CSS의 overflow 속성 사용법

웹 개발을 하다보면 주어진 공간보다 더 많은 양의 컨텐츠를 보여줘야 하는 경우가 생기는데요. CSS에서는 overflow 속성을 통해서 주어진 공간이 모자라 넘치는 컨텐츠를 어떻게 보여줄지를 제어합니다.

이번 포스팅에서는 크기가 제한된 영역에서 많은 양의 컨텐츠를 보여줄 때 유용한 CSS의 overflow 속성에 대해서 알아보겠습니다.

visible

먼저 overflow 속성을 별도로 명시해주지 않았을 때 적용되는 기본값인 visible에 대해서 살펴보겠습니다.

.lyrics {
  overflow: visible;
}

긴 기사의 컨텐츠를 고정된 크기의 박스 안에서 보여줘야하는 경우를 예를 들어 설명해보겠습니다.

<div class="lyrics">
  동해 물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화
  삼천리 화려 강산 대한 사람, 대한으로 길이 보전하세.
</div>

.lyrics {
  width: 200px;
  height: 50px;
  border: 3px solid blue;
}

overflow 속성을 생략하거나, overflow 속성값을 visible로 지정해줄 경우 컨텐츠가 경계선 밖으로 삐져나오는 것을 볼 수 있는데요. overflow 속성이 visible로 설정되어 있는 HTML 요소(element)는 내부 공간보다 담아야하는 컨텐츠가 더 많은 경우, 컨텐츠를 밖으로 밀어내는 한이 있더라도 끝까지 보여줍니다.

경계선이 없다면 이러한 현상이 대수롭지 않다고 생각할 수 있지만, overflow 속성이 visible로 설정된 요소 두 개를 연속으로 배치해보면 문제가 커지게 됩니다. 첫 번째 요소의 밖으로 빠져나온 컨텐츠는 그 다음 요소의 컨텐츠와 중쳡되어 보일 수 있기 때문이죠.

hidden

반대로 overflow 속성을 hidden으로 설정해주면 해당 HTML 요소 밖으로 삐져나오는 컨텐츠를 숨겨버릴 수 있습니다.

.lyrics {
  overflow: hidden;
}

overflow 속성을 hidden으로 지정된 요소 내에서는 긴 텍스트의 뒷 부분이 아예 잘려버리는 것을 확인할 수 있습니다.

그러므로 overflow 속성을 hidden으로 줄 때는, 의도치 않게 컨텐츠가 누락되지 않도록 주의가 필요하여, 실제 활용도가 제한적인 편입니다.

재미있게도 오히려 다음과 같이 미학적인 용도로 hidden 속성값을 활용할 수 있습니다.

scroll

주어진 공간을 넘어가는 컨텐츠가 삐져나오면 안 되고, 누락되어도 안 된다면, 스크롤링 가능하게 하는 것이 좋은 대안이 되겠죠? overflow 속성을 scroll로 설정해주면 스크롤바가 생기기 때문에 사용자가 원한다면 컨텐츠를 끝까지 볼 수 있습니다.

.lyrics {
  overflow: scroll;
}

overflow 속성 대신에 overflow-x 속성이나 overflow-y 속성을 사용하면 가로 또는 세로만 선택적으로 스크롤바를 보여줄 수 있습니다.

예를 들어, 텍스트 컨텐츠의 경우 자동으로 줄바꿈이 되기 때문에 굳이 가로 스크롤바를 보여줄 필요는 없겠죠? 이럴 때는 overflow-y 속성을 사용하여 세로 스크롤바만 보여주면 됩니다.

auto

컨텐츠의 양이 가변적이어서 스크롤바를 보여줘야 할지 말지 미리 결정하기 어려운 경우에는 overflow 속성값으로 auto를 사용하면 되는데요. 요소의 overflow 속성을 auto로 설정해주면, 그 안의 컨텐츠의 크기가 주어진 공간을 넘어가는 경우에만 스크롤바가 생깁니다.

.lyrics {
  overflow: auto;
}

첫 번째 요소는 컨텐츠가 길어서 스크롤이 가능하도록 스크롤바가 생기는데, 두 번째 요소는 컨텐츠가 짧아서 스크롤바가 생기지 않는 것을 확인할 수 있습니다.

[꿀팁] 가로 스크롤

주어진 공간을 넘어가는 컨텐츠를 줄바꿈하지 않고 사용자가 가로 방향으로 스크롤할 수 있도록 해주고 싶다면 어떻게 해야할까요? 🤓

기본적으로 텍스트나 이미지와 같은 인라인 요소들은 가로 공간이 부족한 경우 줄바꿈이 되기 때문에, 세로 방향으로 스크롤바가 생기는데요. 가로 방향으로 스크롤바가 생기게 하고 싶다면 단순히 white-space 속성을 nowrap으로 변경하여 줄바꿈이 되지 않도록 하면 됩니다.

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

CSS의 white-space 속성에 대해서는 별도 포스팅에서 자세히 다루고 있으니 참고 바랍니다.

마치면서

이상으로 overflow 속성을 활용하여 많은 양의 컨텐츠를 제한된 영역에서 여러 가지 방법으로 처리해보았는데요. 본 포스팅이 웹 개발을 하다가 의도치 않게 삐져나오는 컨텐츠를 원하시는데로 통제하는데 도움이 되었으면 좋겠습니다. 😁

포스팅을 마치면서 한 가지 드리고 말씀은 overflow 속성을 활용하는 것보다 어떻게 하면 컨텐츠가 요소를 넘치지 않도록 디자인할 수 있을까 고민하는 것이 중요하다는 것입니다. 요소에 컨텐츠을 담을 충분한 공간이 있다면 삐져나오는 부분을 어떻게 처리할지에 대해서 고민할 필요가 없을테니까요. 뿐만 아니라 일반적으로 브라우저 전체 창이 아니라 요소 범위에서 생기는 스크롤바는 키보드 사용자가 스크롤하기 어렵게 때문에 웹 접근성(accessibility) 측면에서도 더 고려할 부분이 많아지고요.

컨텐츠가 삐져나오는 것을 방지하기 위한 간단한 방법이 바로 불필요하게 해당 요소에 height 속성을 줘서 높이를 제한하지 않는 것인데요. height 속성이 명시되지 않은 요소는 컨텐츠의 양에 맞게 자동으로 높이가 늘어나기 때문입니다. 이 부분은 본 포스팅에서 다루려는 주제에서 넘어가는 것 같으니 추후 기회가 되면 자세히 다뤄보도록 할께요.