이번 글에서는 HTML에서 스크롤 바를 표시할지 말지를 정의하는 속성인 CSS overflow 항목에 대하여 다루도록 하겠습니다.
# CSS overflow
overflow는 '넘쳐 흐르다'라는 뜻을 가지고 있는 단어로, 만약에 우리가 설정한 박스내부에서 정보들이 한번에 표현되지 않을 때에 정보를 어떻게 표시할 지에 대한 기준을 정의하는 CSS 속성입니다. 아래의 예시 사진을 한번 들여다 보겠습니다.
위 사진은 어떠한 카테고리들을 나타내는 웹페이지입니다. 여기서 5개의 카테고리가 한번에 100px 이라는 높이안에 표현이 가능하기 때문에, 어떠한 스크롤바도 나타나고 있지 않습니다. 하지만 이 정보들을 나타냄에 있어서 과도하게 정보가 많거나, 스크롤바가 필요한 상황일 때에는 스크롤바를 표시해야 합니다. 이러한 상황에서 사용하는 것이 overflow 속성입니다.
# overflow 속성 종류
먼저, overflow 는 overflow-x와 overflow-y로 나뉩니다. x는 x축으로 즉, 수평방향으로 넘치는 정보들에 대한 스크롤바를, y는 y축으로 즉, 수직방향으로 넘치는 정보들에 대한 스크롤바를 정의하는 속성입니다.
overflow-x 만으로 설명드리겠습니다. overflow-x : 우리가 원하는 수단과 같이 사용하며 그 종류는 auto / hidden / scroll이 있습니다.
- auto는 자동적으로 브라우저가 필요한지 아닌지에 대하여 판단하여 사용합니다.
- hidden은 넘치는 정보들을 화면에 표시하지 않습니다.
- scroll은 넘치든 안넘치든 스크롤바를 표시합니다.
# 실제 overflow 사용방법
실제 사용방법을 사진으로 보기에 앞서 -ms-overflow-style은 마이크로소프트 엣지 브라우저 내부에서만 표현되는 스타일을 정의하는것이며, 보통의 경우에는 wqbkit scrollbar를 사용하기 때문에 신경쓰지 않으셔도 무방합니다.
위와 같이 overflow 속성을 scroll로 정의하면 아래 사진과 같이 정보들이 한 박스안에 들어감에도 불구하고 스크롤 바가 출력되어 표시됩니다.
여기까지 HTML에서 스크롤 바를 표시할지 말지를 정의하는 속성인 CSS overflow 항목에 대하여 다루었습니다.
댓글