DEV/css
-
CSS 심플한 Table CSS 예시DEV/css 2023. 11. 16. 09:52
CSS 다음과 같이 적용 /* TABLE */ .custom-table { border-collapse: collapse; /* margin: 25px 0; */ /* font-size: 0.9em; */ font-family: sans-serif; min-width: 100%; width: 100%; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); } .custom-table thead tr { background-color: #009879; color: #ffffff; text-align: left; } .custom-table th, .custom-table td { font-size: 12px; padding: 2px 8px; text-align: center; } .c..
-
CSS 웹 페이지 스크롤 디자인 수정DEV/css 2023. 11. 16. 09:35
/* 스크롤바 메인 */.class::-webkit-scrollbar { width: 8px; /* 세로축 스크롤바 폭 너비 */ height: 10px; /* 가로축 스크롤바 폭 너비 */ border-radius: 36px; background-color: white; /* 스크롤바 배경색 */}/* 외부 스크롤바 */.class::-webkit-scrollbar-track { opacity: 0; border-radius: 36px;}/* 내부 스크롤바 */.class::-webkit-scrollbar-thumb { background-color: #ffffff; /* 스크롤바 색상 */ border-radius: 36px; opacity: 0.8;}/* 세..
-
CSS 이미지 비율 맞추기, 이미지 사이즈 맞추기 (object-fit)DEV/css 2022. 12. 18. 19:29
img { width: 300px; height: 150px; object-fit: cover; } object-fit fill (기본값) : 주어진 너비와 높이에 딱 맞도록 사이즈를 조절, 비율 조정 X contain : 가로세로 비율을 유지한 채로 사이즈가 조절, 비율 조정에 의해 빈 공간이 생김. cover : 가로세로 비율을 유지한 채로 사이즈가 조절, contain과 다르게 이미지를 확대해 컨테이너를 완전히 채움. none : 아무것도 하지 않고 본래의 이미지 사이즈를 유지함. 이미지가 사이즈가 큰 경우 중앙을 기준으로 사이즈를 조절함. scale-down none 또는 contain 중에 더 적절한 방향으로 이미지 사이즈를 조절. * IE 지원 안한다고 알고 있음.