수평으로 스크롤 할 수 있는 컨테이너 만들기

메가박스를 클론 코딩하는 중 수평으로 스크롤을 처리하는 부분 있어, 어떻게 처리 했는지 공유하고자 한다.

먼저, 카드를 담고 있는 컨테이너와 카드를 만들자.

<div class="scroll-container">
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
</div>

수평 스크롤을 처리 할 수 있는 방법은 2가지가 있다.

1. white-space를 이용하는 방법

.scroll-container {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: no-wrap;
}
.card {
  display: inline-block;
  width: 120px;
  height: 50px;
}

코드를 보면, 수직 스크롤을 비활성화 시키고, 수평 스크롤만 활성화 시키고 있다. 그리고 white-space 라는 속성을 사용하고 있는데 줄 바꿈을 어떻게 처리할지 정하는 속성이다.

no-wrap 으로 설정 함으로써 줄바꿈이 안되게 설정한다. 그리고 카드를 한 줄로 나타내기위해 display: inline-block 을 해주면, 수평 스크롤 끝!

2. flexbox를 이용하는 방법

.scroll-container {
  display: flex;
  flex-wrap: no-wrap;
  overflow-x: scroll;
  overflow-y: hidden;
}
.card {
  width: 120px;
  height: 50px;
  flex: 0 0 auto;
}

flex-wrap: no-wrap 과 white-space: no-wrap 의 결과는 같다. 둘 다 모두, 다음 줄로 줄바꿈을 하지 않는다.

나머지 코드는 위와 크게 다를거 없으며, flex: 0 0 auto 는 flex 단축 속성으로 각각 flex-grow, flex-shrink, flex-basis 를 의미한다.

카드에 설정되어 있는 기본 크기 (120*50)을 유지하기 위해서는 기본 크기에서, 늘어나서도 줄어들어서도 안된다. flex-grow 와 flex-shrink 의 값을 각각 0 0 으로 설정해 놓으면, flex-basis 값보다 더 줄어들지도 늘어나지도 않게된다.