css로 가로 스크롤 가능한 이미지 리스트 만들기

html 은 다음과 같이 작성해주세요

<ul class="carousel">

          <li>

                    <img src=" ....." >

           </li>

            ..................li 태그 반복작성........

</ul>

---

css 는 다음과 같이 작성해주세요.

.carousel { overflow-x : scroll, display: flex; }

li { flex :  0  0  600px;  // 가로폭 600px 로 고정함  padding-right : 20px;  // 리스트간 간격을 20px로 조정

img  { width: 100%; height: 100%; // 높이를 모두 같이 맞출 경우 height 속성 사용  object-fit : contain 또는 cover ;

---

그대로 복사해서 사용하시면 안되고요.

읽고 이해하시면 간단하고 쉬운 가로 스크롤 이미지를 만드실 수 있습니다.

완성본 예