[css] 가로 스크롤 구현하기

세로 스크롤은 간단하게 HTML 부모 태그에 overflow 속성에서 auto나 hidden을 적용하면 간단하게 세로 스크롤을 구현할 수 있다.

하지만, 가로 스크롤의 경우는 어떻게 구현해야 할까?

 			<div class="inner">
                <ul class="product-list">
                    <li class="product-item">
                        <a href="">
                            <div class="thumb-area">
                                <img src="./assets/images/main/sc-board_l_1.jpg" alt="">
                                <span class="new-mark"></span>
                            </div>
                            <div class="text-area">
                                <div class="review">리뷰 141,098</div>
                                <div class="name">[1+1] 에어쿨링 지니 시그니처 레깅스</div>
                                <div class="price"><strong>50%</strong>49,000원<span>98,000원</span></div>
                                <div class="link-detail">회원 할인가 65,500원 (3/26~3/30)</div>
                            </div>
                        </a>
                    </li>
                    ...
                </ul>
            </div>
                    

다음과 같은 html 코드가 있을 때,

inner에 화면 자체가 가로로 길어지지 않게 넓이는 부모의 넓이를 따르고 높이는 자식의 요소만큼 설정했다.

그 다음, list에 display: flex을 설정하여 item들이 가로로 정렬하게 했다.

css 코드로 보자면 다음과 같다.