미리보기 이미지 갤러리를 만들어 스타일링하는 6가지 예제를 CSS와 HTML로 구성하고 상세히 설명하겠습니다.
예제 1: 기본 이미지 갤러리
<!DOCTYPE html>
<html>
<head>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.image {
width: 200px;
height: 150px;
object-fit: cover;
}
</style>
</head>
<body>
<div class="gallery">
<img class="image" src="image1.jpg" alt="Image 1">
<img class="image" src="image2.jpg" alt="Image 2">
<img class="image" src="image3.jpg" alt="Image 3">
</div>
</body>
</html>
이 예제에서는 기본 이미지 갤러리를 만들었습니다. display: flex;를 사용하여 이미지를 가로로 나열하고, gap 속성을 사용하여 이미지 간 간격을 설정하였습니다.
예제 2: 이미지 갤러리 타이틀
<!DOCTYPE html>
<html>
<head>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.image {
width: 200px;
height: 150px;
object-fit: cover;
}
.title {
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div class="gallery">
<div>
<img class="image" src="image1.jpg" alt="Image 1">
<p class="title">Image 1</p>
</div>
<div>
<img class="image" src="image2.jpg" alt="Image 2">
<p class="title">Image 2</p>
</div>
<div>
<img class="image" src="image3.jpg" alt="Image 3">
<p class="title">Image 3</p>
</div>
</div>
</body>
</html>
이 예제에서는 이미지 갤러리에 이미지 타이틀을 추가하였습니다. 이미지와 타이틀을 감싸는 div 요소를 추가하여 이미지와 타이틀을 함께 표시하였습니다.
예제 3: 이미지 갤러리 가운데 정렬
<!DOCTYPE html>
<html>
<head>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.image {
width: 200px;
height: 150px;
object-fit: cover;
}
</style>
</head>
<body>
<div class="gallery">
<img class="image" src="image1.jpg" alt="Image 1">
<img class="image" src="image2.jpg" alt="Image 2">
<img class="image" src="image3.jpg" alt="Image 3">
</div>
</body>
</html>
이 예제에서는 이미지 갤러리를 가운데 정렬하였습니다. justify-content: center; 속성을 사용하여 이미지를 가운데 정렬합니다.
예제 4: 이미지 갤러리 확대/축소 효과
html
Copy code
<!DOCTYPE html>
<html>
<head>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.image {
width: 200px;
height: 150px;
object-fit: cover;
transition: transform 0.3s;
}
.image:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="gallery">
<img class="image" src="image1.jpg" alt="Image 1">
<img class="image" src="image2.jpg" alt="Image 2">
<img class="image" src="image3.jpg" alt="Image 3">
</div>
</body>
</html>
이 예제에서는 이미지 갤러리에 확대/축소 효과를 추가하였습니다. transition 속성으로 이미지의 크기 변경에 대한 애니메이션을 설정하고, :hover 선택자를 사용하여 마우스 호버 시 이미지를 확대합니다.
예제 5: 이미지 갤러리 그리드 레이아웃
<!DOCTYPE html>
<html>
<head>
<style>
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.image {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="gallery">
<img class="image" src="image1.jpg" alt="Image 1">
<img class="image" src="image2.jpg" alt="Image 2">
<img class="image" src="image3.jpg" alt="Image 3">
</div>
</body>
</html>
이 예제에서는 이미지 갤러리를 그리드 레이아웃으로 표현하였습니다. display: grid;를 사용하여 그리드 레이아웃을 생성하고 grid-template-columns 속성으로 열의 개수와 크기를 조절합니다.
예제 6: 이미지 갤러리 캡션
<!DOCTYPE html>
<html>
<head>
<style>
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.image {
width: 100%;
height: auto;
}
.caption {
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div class="gallery">
<div>
<img class="image" src="image1.jpg" alt="Image 1">
<p class="caption">Image 1</p>
</div>
<div>
<img class="image" src="image2.jpg" alt="Image 2">
<p class="caption">Image 2</p>
</div>
<div>
<img class="image" src="image3.jpg" alt="Image 3">
<p class="caption">Image 3</p>
</div>
</div>
</body>
</html>
이 예제에서는 이미지 갤러리에 캡션을 추가하였습니다. 이미지와 캡션을 함께 표시하기 위해 div 요소를 사용하고, 캡션에 스타일을 적용하였습니다.
'CSS' 카테고리의 다른 글
| 풀스크린 배경 이미지: 전체 화면 배경 이미지. (0) | 2023.12.23 |
|---|---|
| 카드 디자인: 카드 레이아웃 스타일링. (0) | 2023.12.23 |
| 테이블 스타일링: HTML 테이블 스타일 변경. (0) | 2023.12.23 |
| 텍스트 그라데이션: 텍스트에 그라데이션 효과. (0) | 2023.12.23 |
| 3D 효과: 요소에 3D 효과 적용. (0) | 2023.12.23 |