이번 포스팅에서는 주어진 영역보다 더 많은 양의 콘텐츠가 존재할 경우, 넘치는 콘텐츠를 어떻게 표시할지를 지정하는 속성인 overflow에 대하여 알아보겠습니다.
overflow 속성을 통하여 스크롤을 만들 수도 있고, float 이라는 속성을 해제하거나, 다양한 레이아웃을 제작할 때 사용됩니다.
overflow 속성의 속성 값으로는 visible, hidden, auto, scroll이 있는데요.
속성 값별로 어떻게 작용하는지 하나 하나 알아보도록 하겠습니다.
1. visible
visible은 overflow 속성의 기본 값으로, 별다른 선언을 하지 않는다면 visible이 자동으로 적용됩니다.
h1 {
overflow : visible;
}
visible 속성 값은 콘텐츠의 양이 지정된 영역보다 많은 경우에도 모두 노출시켜줍니다.
평범한 경우라면 상관없을 수 있지만 다른 영역과 함께 사용되는 경우 콘텐츠가 서로 겹치는 문제점이 발생할 수 있습니다.
See the Pen Untitled by 닛날 (@fxadrmwc-the-scripter) on CodePen.
2. hidden
위의 문제점을 해결할 수 있는 방법 중 하나가 hidden 속성 값인데요.
h1 {
overflow : hidden;
}
해당 속성값의 경우에는 지정한 영역 밖으로 콘텐츠가 존재하는 경우 노출시키지않고 숨김처리를 해줍니다.
See the Pen Untitled by 닛날 (@fxadrmwc-the-scripter) on CodePen.
위와 같이 콘텐츠가 겹치지 않는다는 장점이 있지만, 콘텐츠가 중간에 짤려서 전달하고자 하는 바를 정확하게 전달하지 못할 수 있습니다.
추후에 다룰 내용이지만 float 속성을 사용한 후, 부모 요소에 overflow:hidden을 선언하여 float를 해제(클리어픽스)하기도 합니다.
3. auto
콘텐츠의 양을 짐작하기 어려워 스크롤을 표현할지 말지 판단하기 어려울 경우에 auto 속성 값을 사용하면 되는데요.
h1 {
overflow : auto;
}
h2 {
overflow-x : auto;
}
h3 {
overflow-y : auto;
}
auto 값을 사용하게 되면 지정한 영역 밖으로 콘텐츠가 넘치는 경우에만 스크롤을 생성해 주고, 넘치지 않는 경우에는 스크롤을 생성하지 않습니다.
overfow:auto는 x축과 y축에 모두 해당되며, overflow-x는 x축에 대해서만, overflow-y는 y축에 대해서만 해당됩니다.
See the Pen Untitled by 닛날 (@fxadrmwc-the-scripter) on CodePen.
가로 스크롤을 생성해주는 overflow-x의 경우에는 콘텐츠가 자동으로 줄바꿈이 되지 않도록 white-space:nowrap 속성을 함께 사용해주면 됩니다.
4. scroll
auto 속성 값이 콘텐츠의 양에 따라 유동적으로 스크롤을 만들어 준다면, scroll 속성 값은 무조건 스크롤을 생성해준다고 생각하시면 됩니다.
h1 {
overflow : scroll;
}
h2 {
overflow-x : scroll;
}
h3 {
overflow-y : scroll;
}
auto 속성 값과 동일하게 overfow:scroll은 x축과 y축에 모두 해당되며, overflow-x는 x축에 대해서만, overflow-y는 y축에 대해서만 해당됩니다.
See the Pen Untitled by 닛날 (@fxadrmwc-the-scripter) on CodePen.
스크롤은 지정한 영역 내에서 생성되며, 스크롤바는 약 15px정도 차지하는 점 참고해 주세요.
여기까지 overflow 속성에 대하여 알아보았는데요.
해당 속성을 통하여 영역 밖으로 넘치는 콘텐츠를 원하는 방식으로 제어하여 디자인해보세요.
오늘도 읽어주셔서 감사합니다.
좋은 하루 보내세요 :)
댓글