썸네일 이미지 깔끔하게 구현하는 CSS
이미지 썸네일 CSS를 할 때, 크로싱 브라우저만 잘 대응할 수 있다면, 가장 좋은 CSS 설정값은 아래와 같다.
position: absolute;
z-index: 10;
width: 100%;
object-fit: cover;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
위와 같이 설정해주는 것이 중앙정렬도 잘하고, 같은 비율(4:3) 내에서 가로와 세로의 비율을 적당하게 잘라주면서 가장 썸네일처럼 보이게 해주는 설정값이다. 배경이미지의 속성이 아니라, 이미지 내에서 위와 같이 적용하면 딱 알맞게 떨어지는데, 위에서 가장 중요한 요소는 바로 Object-fit이다. Object-fit에는 다양한 속성이 있는데, 배경이미지와 마찬가지로 Cover 속성을 적용하면 깔끔하게 썸네일로 표시된다.
하지만, 같은 비율로 이미지가 확장되어야 하므로 가로에 삐져나온 부분이나, 세로 부분을 알맞게 잘라줘야한다. 그 기준이 되는 것을 width(가로)로 적용하고, margin값을 auto로 적용해주면 깔끔하게 떨어진다.
물론, 위의 경우에는 Object 속성값을 적용한 것이 아니다. 그렇지만, 위와 같은 느낌의 썸네일 이미지를 구현한다면 Object 속성으로 매우 쉽게 구현할 수 있다. 1:1 비율의 경우에는 아래와 같이 설정해준다.
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
margin: 0;
썸네일 커버 사이즈를 1:1로 지정하고, 가로와 세로를 위와 같이 설정해주면 딱 떨어지는 썸네일을 표시할 수 있다. 이때 썸네일의 프레임이 되는 부분은 아래와 같이 설정해준다.
display: block;
position: relative;
overflow: hidden;
width: 100%;
max-width: none;
height: 0;
margin: 0 0 9px 0;
padding-bottom: 100%;
Span 태그로 감싼 프레임에서 각 블럭은 하나의 블럭으로 인식되고, 가로 사이즈를 100%으로 둔 다음에 padding-bottom을 적용하면 위와 같이 속성을 적용시킬 수 있다. 디자인은 쉽고 깔끔할 수록 질리지 않고 오래간다. 모던한 스타일을 좋아하는 사람들에게는 위와 같은 썸네일로 구현하는 것이 가장 깔끔하다.
여기서 별도로 참고해서 알아봐야 할 것은 position의 속성값이다. absolute로 절대값을 기준으로 잡아주고, top과 left를 0으로 설정해주면 이미지가 깔끔하게 들어간다. 깔끔하게 들어간다는 뜻은 정방향 비율로 기준을 잡고 확장된다는 것이다.
'Web Design' 카테고리의 다른 글
에디트플러스 (Edit Plus) 설치 및 FTP 연결방법 (0) | 2020.05.19 |
---|---|
MySQL 그누보드 관리자 계정찾기(아이디/비밀번호) (0) | 2020.05.18 |
나눔스퀘어 웹폰트의 치명적인 문제점(한자표기) (0) | 2020.05.15 |
나눔스퀘어 폰트 깨짐 현상과 웹폰트 활용방법 (0) | 2020.05.15 |
CSS/HTML 미리보기 편집기 웹사이트 'CSSDESK' (0) | 2020.05.14 |
트와이스 여성팬사이트 'Want' (0) | 2020.03.27 |
유튜브 화면 일러스트(.AI) 소스·Source (0) | 2019.12.04 |
엔티티 코드(Entity Code) 정리 (0) | 2019.11.01 |