[HTML/CSS] 가로로 긴 컨텐츠 스크롤 박스 만들기

이미지를 반응형으로 사용할 때, 하나의 이미지를 사용하는게 가장 이상적이다.

하지만 모바일 크기에서는 너무 작게보이는 경우에는 모바일버전 이미지를 따로 만드는 경우가 있다.

하지만! 모바일 사이즈의 너비는 한정적인데 가로로 길어야만 하는 이미지가 있다. 예를 들면 가로로 긴 지하철 노선도같은 가로 이미지말이다.

그럴 경우에 나는 가로로 스크롤이 가능하게 박스를 만들어준다.

표도 아무래도 가로로 긴 경우가 많다.

그럴 경우 td 태그를 inline으로 처리하여 줄넘김을 할 수도 있지만 자주 사용하지 않는다.

긴 표의 경우에도 가로 스크롤 박스를 만들어 텍스트가 아래 이미지처럼 가독성 떨어지게 쪼개지지않은 상태에서 볼 수 있게 해준다.

See the Pen Untitled by nah (@wimmwell) on CodePen.

 

table이나 img 등 컨텐츠에 min-width 값을 준 후에 감싼 태그에 overflow-x:auto를 적용하면 된다.

컨텐츠의 최소 너비보다 감싼 요소의 너비가 더 좁을 경우 자동으로 스크롤이 생긴다.