[CSS] 32. CSS Image Gallery 이미지 갤러리

Posted by 낭만사업가 정대표 블로그 on 2022-09-20 06:07:41

화면 캡처 2022-09-20 060648.jpg

이미지 갤러리

다음 이미지 갤러리는 CSS로 생성됩니다.

예시

<html>
<head>
<style>
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
  <a target="_blank" href="img_5terre.jpg">
    <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="img_forest.jpg">
    <img src="img_forest.jpg" alt="Forest" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="img_lights.jpg">
    <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="img_mountains.jpg">
    <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>
직접 사용해 보기 »

더 많은 예

반응형 이미지 갤러리

CSS 미디어 쿼리를 사용하여 데스크톱, 태블릿 및 스마트폰에서 보기 좋은 반응형 이미지 갤러리를 만드는 방법.

responsiveImgGallery.jpg
직접 사용해 보기 »

 


Total 220
번호 제목 글쓴이 조회 날짜
122 07-15
347 07-15
218 100 07-20
217 80 07-20
216 110 07-20
215 132 07-20
214 78 07-20
213 91 07-20
212 329 06-20
211 103 07-20
210 1,040 06-21
209 216 06-20
208 310 02-25
207 886 02-27
206 108 07-08
RSS

오픈런하우스

1인가구를 위한 원룸형 아파트 쉐어하우스, 1인기업(프리랜서)을 위한 홈오피스형 공유주택

GO!