Horizontal Overflow

배경

이미지를 가로로 스크롤 할 수 있도록 표시하고 싶은 경우, overflow: auto만으로는 해결되지 않는다.

기본적으로 이미지는 inline 요소라서 공간이 부족하면 자동으로 줄바꿈되기 때문이다.

해결책

white-space 속성은 inline/inline-block 요소들의 줄바꿈을 제어한다.

스크롤 선언과 white-space 속성을 같이 이용하여 가로 스크롤을 구현한다.

.wrapper {
  overflow: auto;
  white-space: nowrap;
}

• white-space: nowrap을 사용하여 줄바꿈을 방지
• overflow: auto와 함께 사용하여 가로 스크롤 구현
• 이렇게 하면 모든 콘텐츠가 한 줄로 유지되면서 가로 스크롤이 생성