메가박스를 클론 코딩하는 중 수평으로 스크롤을 처리하는 부분 있어, 어떻게 처리 했는지 공유하고자 한다.
먼저, 카드를 담고 있는 컨테이너와 카드를 만들자.
<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가지가 있다.
.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
을 해주면, 수평 스크롤 끝!
.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
값보다 더 줄어들지도 늘어나지도 않게된다.