[CSS] overflow 속성 사용법
Apr 4, 2021 · 4 min read



웹개발을 하다보면 주어진 공간보다 더 많은 컨텐트를 보여줘야 하는 경우가 생기는데요. 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로 설정되어 있는 엘리먼트는 내부에 주어진 공간보다 담고있는 컨텐트가 더 큰 경우, 컨텐트를 밖으로 밀어내는 한이 있더라도 끝까지 보여줍니다.

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

hidden

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

.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 {
  white-space: nowrap;
}

마치면서

이상으로 overflow 속성을 활용하여 많은 양의 컨텐트를 제한된 영역에서 여러가지 방법으로 처리해보았습니다.