How To - 가로 스크롤 가능 이미지 갤러리

w3.css

가로 스크롤 가능 이미지 갤러리

CSS를 사용하여 가로 스크롤 막대가 있는 이미지 갤러리를 만드는 방법을 알아보자.

가로 스크롤을 사용하여 이미지 갤러리 만들기

1단계) HTML 추가

<div class="scroll-container">
  <img src="img_5terre.jpg" alt="Cinque Terre">
  <img src="img_forest.jpg" alt="Forest">
  <img src="img_lights.jpg" alt="Northern Lights">
  <img src="img_mountains.jpg" alt="Mountains">
</div>

2단계) CSS 추가

div.scroll-container {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
}

div.scroll-container img {
  padding: 10px;
}

기본 예시

예제 보기