[CSS] overflow (scroll 가능하도록 하기)

scroll 가능하게 하기

box 크기를 작게하면 그 안의 content가 빠져나올(overflow) 될때가 있다.

 

overflow 돼버린 경우

 

box와 content의 크기를 유지하면서 content의 내용을 box 안에 모두 집어넣고 싶을때, 스크롤하여 보이도록 할 수 있다.

 

overflow: hidden; // 넘치는 것 감추기
overflow: auto; // 넘치면 스크롤 하게 만들기
overflow: scroll; // 항상 스크롤 하게 만들기

 

 

overflow: scroll;

 

 

가로 스크롤 가능하게 하기

CSS에서는 기본적으로 알아서 너비에 맞춰 줄바꿈을 해준다.

따라서 가로 스크롤을 할 필요가 없다.

다만 content 줄바꿈을 하지 않고 그대로 넣고 싶을때,

white-space: nowrap;

을 해주면, content가 줄바뀜이 되지않고 그대로 들어가면서 가로 스크롤을 해야하도록 바뀐다.

(가로스크롤은 터치패드로 하거나 shift+마우스 스크롤 을 해주면 된다.)