CSS - 이미지 갤러리

안녕하세요, 웹 디자인 초보자 여러분! 오늘 우리는 CSS 이미지 갤러리의 흥미로운 세계로 뛰어들어 볼 거예요. 여러분의 친절한 이웃 컴퓨터 선생님으로서, 저는 이 여정을 안내해 드리는 것을 매우 기쁘게 생각합니다. 지루한 정적 이미지들을 눈부신, 상호작용이 가능한 갤러리로 변환해 보겠습니다!

간단한 이미지 갤러리

먼저 기본적인 것으로 시작해 보겠습니다. 간단한 이미지 갤러리는 벽에 사진을 배치하는 것과 같아요 - 전시 방법에 대해 알아보는 것입니다. 다음은 CSS를 사용하여 간단한 이미지 갤러리를 만드는 방법입니다:

<div class="gallery">
<img src="image1.jpg" alt="이미지 1">
<img src="image2.jpg" alt="이미지 2">
<img src="image3.jpg" alt="이미지 3">
</div>

.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.gallery img {
width: 200px;
height: 200px;
margin: 10px;
object-fit: cover;
}

이 예제에서 우리는 flebox를 사용하여 반응형 레이아웃을 만듭니다. flex-wrap: wrap 속성은 공간이 부족할 때 이미지가 다음 줄로 넘어가도록 합니다. justify-content: center 속성은 이미지를 수평 중앙에 배치합니다.

호버 효과가 있는 이미지 갤러리

이제 상호작용을 추가해 보겠습니다! 호버 효과는 갤러리를 더욱 흥미롭게 만들 수 있습니다. 가까이서 보면 나타나는 비밀 메시지 같은 느낌을 줍니다.

<div class="gallery">
<div class="image-container">
<img src="image1.jpg" alt="이미지 1">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<!-- 다른 이미지들에 대해 반복 -->
</div>

.image-container {
position: relative;
width: 200px;
height: 200px;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: rgba(0,0,0,0.5);
}

.image-container:hover .overlay {
opacity: 1;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

이 CSS는 호버할 때 나타나는 오버레이를 생성합니다. transition 속성은 부드러운.fade-in 효과를 제공합니다.

반응형 이미지 갤러리 사용하는 미디어 쿼리

오늘날 다양한 장치에서 사용되는 시대에, 반응성은 중요합니다. 우리의 갤러리가 다양한 화면 크기에 맞게 조정되도록 만들겠습니다:

.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}

@media screen and (max-width: 600px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
}
}

@media screen and (max-width: 400px) {
.gallery {
grid-template-columns: 1fr;
}
}

이 CSS는 CSS Grid를 사용하여 반응형 레이아웃을 만듭니다. minmax 함수는 이미지가 최소 200px宽이고 공간이 허용된다면 더 커질 수 있도록 합니다. 미디어 쿼리는 화면 크기에 따라 레이아웃을 조정합니다.

이미지 갤러리의 문법 이해

이제 사용한 문법을 이해해 보겠습니다. CSS 속성은 다음과 같은 구조를 따릅니다:

selector {
property: value;
}

다음은 이미지 갤러리에서 자주 사용되는 일반 CSS 속성 표입니다:

속성	설명	예제
display	표시 행동 지정	display: flex;
width	요소의 너비 설정	width: 200px;
height	요소의 높이 설정	height: 200px;
margin	요소의 여백 설정	margin: 10px;
object-fit	이미지의 크기 조정 방법 지정	object-fit: cover;
position	위치 방법 지정	position: relative;
opacity	요소의 투명도 설정	opacity: 0;
transition	전환 효과 설정	transition: 0.5s ease;

수평 스크롤이 있는 이미지 갤러리

때로는 갤러리가 수평으로 스크롤되는 것이 좋습니다. 이미지 레일을 스와이프할 수 있는 것 같은 느낌을 줍니다:

<div class="gallery-container">
<div class="gallery-scroll">
<img src="image1.jpg" alt="이미지 1">
<img src="image2.jpg" alt="이미지 2">
<!-- 필요한 만큼 더 많은 이미지 추가 -->
</div>
</div>

.gallery-container {
width: 100%;
overflow-x: auto;
}

.gallery-scroll {
display: flex;
width: max-content;
}

.gallery-scroll img {
width: 200px;
height: 200px;
margin-right: 10px;
object-fit: cover;
}

이 CSS는 수평 스크롤이 가능한 갤러리를 생성합니다. overflow-x: auto 속성은 필요할 때 수평 스크롤 바를 추가합니다.

수직 스크롤이 있는 이미지 갤러리

수직 스크롤 갤러리는 많은 이미지를 compac한 공간에 보여주기에 훌륭합니다:

<div class="gallery-vertical">
<img src="image1.jpg" alt="이미지 1">
<img src="image2.jpg" alt="이미지 2">
<!-- 필요한 만큼 더 많은 이미지 추가 -->
</div>

.gallery-vertical {
height: 400px;
overflow-y: scroll;
display: flex;
flex-direction: column;
align-items: center;
}

.gallery-vertical img {
width: 200px;
height: 200px;
margin-bottom: 10px;
object-fit: cover;
}

이 CSS는 수직 스크롤이 가능한 갤러리를 생성합니다. overflow-y: scroll 속성은 수직 스크롤 바를 추가합니다.

CSS 그리드 이미지 갤러리

CSS Grid는 복잡한 레이아웃을 만드는 강력한 도구입니다. 그리드를 사용하여 동적 이미지 갤러리를 만들어 보겠습니다:

<div class="grid-gallery">
<img src="image1.jpg" alt="이미지 1">
<img src="image2.jpg" alt="이미지 2">
<img src="image3.jpg" alt="이미지 3">
<img src="image4.jpg" alt="이미지 4">
<img src="image5.jpg" alt="이미지 5">
</div>

.grid-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}

.grid-gallery img {
width: 100%;
height: 200px;
object-fit: cover;
}

.grid-gallery img:nth-child(4) {
grid-column: span 2;
}

.grid-gallery img:nth-child(5) {
grid-row: span 2;
}

이 CSS는 그리드 레이아웃을 만들어 일부 이미지가 여러 열이나 행을 차지하게 합니다.

탭으로 구성된 이미지 갤러리

탭으로 구성된 갤러리는 다양한 이미지 그룹을 정리하는 좋은 방법입니다:

<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Nature')">자연</button>
<button class="tablinks" onclick="openTab(event, 'City')">도시</button>
</div>

<div id="Nature" class="tabcontent">
<img src="nature1.jpg" alt="자연 1">
<img src="nature2.jpg" alt="자연 2">
</div>

<div id="City" class="tabcontent">
<img src="city1.jpg" alt="도시 1">
<img src="city2.jpg" alt="도시 2">
</div>

.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}

.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}

.tab button:hover {
background-color: #ddd;
}

.tab button.active {
background-color: #ccc;
}

.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

이 CSS는 탭bed 인터페이스를 생성합니다. JavaScript가 필요합니다:

function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}

CSS 슬라이드 쇼

간단한 슬라이드 쇼를 만들어 보겠습니다:

<div class="slideshow-container">
<div class="mySlides fade">
<img src="img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img3.jpg" style="width:100%">
</div>
</div>

.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

.mySlides {
display: none;
}

.fade {
animation-name: fade;
animation-duration: 1.5s;
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

JavaScript가 필요합니다:

var slideIndex = 0;
showSlides();

function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // 2초마다 이미지 변경
}

CSS 슬라이드 갤러리

마지막으로, 슬라이드 쇼와 썸네일을 결합하여 더욱 상호작용이 가능한 경험을 제공하는 슬라이드 갤러리를 만들어 보겠습니다:

<div class="slideshow-container">
<div class="mySlides fade">
<img src="img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img3.jpg" style="width:100%">
</div>
</div>

<div class="row">
<div class="column">
<img class="demo cursor" src="img1.jpg" style="width:100%" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="img2.jpg" style="width:100%" onclick="currentSlide(2)">
</div>
<div class="column">
<img class="demo cursor" src="img3.jpg" style="width:100%" onclick="currentSlide(3)">
</div>
</div>

.row {
display: flex;
}

.column {
flex: 33.33%;
padding: 5px;
}

.demo {
opacity: 0.6;
}

.active,
.demo:hover {
opacity: 1;
}

JavaScript를 수정하여 썸네일 클릭을 처리합니다:

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}

이제 여러분은 다양한 CSS 이미지 갤러리 기술을 다루었으니, 이를 결합하여 자신만의 독특한 갤러리를 만들어 보세요.编码愉快!

Credits: Image by storyset