웹 페이지에서 썸네일(thumbnail)은 원본 이미지의 작은 미리보기 버전으로, 갤러리나 게시판 목록 등에서 널리 사용됩니다. CSS만으로도 이미지에 테두리, 둥근 모서리, 고정 크기, 마우스 오버(hover) 효과를 적용해 깔끔하고 보기 좋은 썸네일을 손쉽게 만들 수 있습니다.
CSS 썸네일 예제 코드
다음은 CSS를 사용하여 썸네일 이미지를 만드는 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
img {
border: 3px solid rgb(208, 255, 0);
border-radius: 4px;
width: 150px;
height: 150px;
}
img:hover {
box-shadow: 2px 2px 4px 2px rgb(60, 255, 53);
}
</style>
</head>
<body>
<h1>Thumbnail Image Example</h1>
<a target="_blank" href="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
<img src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"/></a>
<h1>Clicking on the above thumbnail will open image in new tab</h1>
</body>
</html>
코드 핵심 속성 설명
- border: 이미지 주위에 3px 두께의 연노랑색(rgb(208, 255, 0)) 테두리를 추가해 썸네일 영역을 명확하게 구분합니다.
- border-radius: 모서리를 4px만큼 둥글게 처리해 부드럽고 세련된 느낌을 줍니다.
- width / height: 이미지 크기를 150px × 150px로 고정하여 여러 이미지를 나열할 때도 일정한 썸네일 크기를 유지할 수 있습니다.
- img:hover: 마우스 커서를 올렸을 때 초록색 그림자(box-shadow)가 나타나 사용자에게 시각적인 피드백을 제공합니다.
- <a target="_blank">: 썸네일을 클릭하면 원본 이미지가 새 탭에서 열리도록 링크를 설정했습니다.
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
썸네일 위에 마우스를 올리면 초록색 그림자 효과가 나타나고, 이미지를 클릭하면 새 탭에서 고해상도 원본 이미지를 확인할 수 있습니다. 이처럼 몇 줄의 CSS만으로도 실용적인 썸네일 UI를 간단히 구현할 수 있습니다.