CSS를 활용하면 복잡한 JavaScript 없이도 간단한 마크업과 몇 줄의 스타일 규칙만으로 이미지 갤러리를 손쉽게 만들 수 있습니다. 이번 글에서는 3개의 이미지로 구성된 갤러리를 직접 만들어 보겠습니다. 아래 예제 코드를 그대로 실행해 보면 결과를 바로 확인할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
div.myGallery {
margin: 3px;
border: 2px solid orange;
float: left;
width: 220px;
}
div.myGallery:hover {
border: 1px solid blue;
}
div.myGallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class = "myGallery">
<a target = "_blank" href="https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg">
<img src = "https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg" alt="3D 애니메이션 강좌" width="600" height="500">
</a>
<div class = "desc">3D 애니메이션 강좌</div>
</div>
<div class = "myGallery">
<a target="_blank" href="https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg">
<img src = "https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg" alt="Swift 비디오 강좌" width="600" height="500">
</a>
<div class = "desc">Swift 비디오 강좌</div>
</div>
<div class = "myGallery">
<a target = "_blank" href = "https://www.tutorialspoint.com/assets/videotutorials/courses/css_online_training/380_course_215_image.jpg">
<img src = "https://www.tutorialspoint.com/assets/videotutorials/courses/css_online_training/380_course_215_image.jpg" alt="CSS 비디오 강좌" width="600" height="500">
</a>
<div class = "desc">CSS 강좌</div>
</div>
</body>
</html>
코드 핵심 포인트 살펴보기
- div.myGallery: 각 갤러리 항목의 기본 스타일을 정의합니다.
margin으로 항목 사이 간격을 확보하고, 주황색 테두리를 적용한 뒤float: left를 사용해 이미지들이 가로 방향으로 나란히 배치되도록 합니다. - div.myGallery:hover: 마우스 커서를 올렸을 때 테두리가 파란색으로 바뀌는 호버 효과를 추가해 사용자에게 시각적인 피드백을 제공합니다.
- div.myGallery img:
width: 100%와height: auto를 설정하여 이미지가 컨테이너 너비에 맞춰 자동으로 조절되는 반응형 구조를 만듭니다. - div.desc: 이미지 아래에 표시되는 설명 텍스트에 패딩과 가운데 정렬을 적용해 가독성을 높입니다.
이처럼 float, hover 같은 기본적인 CSS 속성만으로도 실용적인 이미지 갤러리를 충분히 구현할 수 있습니다. 참고로 최신 프로젝트에서는 Flexbox나 Grid 레이아웃을 활용하면 float 없이도 더 유연하고 정돈된 반응형 갤러리를 만들 수 있으니, 응용 단계에서 함께 학습해 보시길 권장합니다.