CSS 오버플로(overflow) 완벽 가이드: 넘치는 콘텐츠 처리 방법

웹 디자인에서 콘텐츠가 영역을 벗어나는 현상(오버플로)을 적절하게 처리하는 것은 완성도 높은 웹사이트를 만드는 데 필수적인 요소입니다.

웹 페이지의 요소를 디자인하다 보면, 요소의 내용이 지정된 크기보다 커서 경계선 밖으로 삐져나오는 경우가 발생할 수 있습니다. 이런 상황을 그대로 두면 페이지가 의도와 다르게 렌더링될 수 있는데, 바로 이럴 때 CSS의 overflow 속성이 유용하게 사용됩니다.

overflow 속성은 요소의 내용이 테두리 안에 들어맞지 않을 때 이를 어떻게 처리할지 결정하는 속성입니다. 이 글에서는 다양한 예제와 함께 CSS overflow 속성을 코드에 적용하는 방법을 단계별로 살펴보겠습니다.

CSS 오버플로(overflow)란?

overflow 속성을 사용하면 콘텐츠가 해당 요소에 할당된 공간보다 클 때 어떤 일이 일어날지 직접 지정할 수 있습니다.

예를 들어, 문단 텍스트가 들어갈 <div> 태그를 만들었다고 가정해 봅시다. 이 <div> 태그는 가로 500px, 세로 250px 크기인데, 텍스트 양이 너무 많아 지정된 공간에 다 담을 수 없는 상황이라면 어떻게 될까요?

이때 overflow 속성을 사용하면 문제를 해결하고 콘텐츠가 사용자 화면에 올바르게 표시되도록 만들 수 있습니다. overflow 속성을 명시적으로 지정하면 웹 요소의 콘텐츠가 잘못 표시될 가능성을 크게 줄일 수 있습니다.

overflow 속성에는 네 가지 값을 사용할 수 있습니다.

visible: 오버플로된 콘텐츠가 잘리지 않고 요소 박스 바깥까지 렌더링됩니다. overflow 속성의 기본값입니다.
scroll: 오버플로된 콘텐츠는 잘리고, 스크롤바가 생성되어 사용자가 나머지 콘텐츠를 볼 수 있게 합니다.
hidden: 오버플로된 콘텐츠는 잘리고, 나머지 부분은 사용자에게 보이지 않습니다.
auto: 필요한 경우에만 스크롤바를 추가하여 나머지 콘텐츠를 볼 수 있게 합니다.

참고로 overflow 속성은 height 속성 등으로 특정 높이가 지정된 블록 레벨 요소에만 적용할 수 있습니다.

CSS 오버플로 예제

이제 overflow 속성에 사용할 수 있는 각 값이 실제로 어떻게 동작하는지 예제를 통해 하나씩 살펴보겠습니다. 먼저 overflow: visible부터 시작합니다.

1. visible — 기본값

visible은 웹 요소에 설정되는 기본 오버플로 값입니다. visible 값이 적용된 요소는 콘텐츠가 잘리지 않으며, 내용이 요소 박스 바깥으로 삐져나와 표시됩니다.

예를 들어 몇 줄의 텍스트가 들어간 박스를 디자인한다고 가정해 보겠습니다. 텍스트가 박스보다 커서 박스 밖으로 렌더링되기를 원한다면 아래와 같은 코드를 사용할 수 있습니다.

index.html

<div>이것은 텍스트가 들어있는 박스입니다. CSS overflow 속성에 "visible" 값을 지정했을 때 어떻게 되는지 보여주기 위해 사용하는 박스입니다.</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow: visible;
}

코드를 자세히 살펴보겠습니다. 위 코드에서는 가로 200px, 세로 100px 크기의 박스를 만들고 배경색을 연회색(lightgray)으로 지정했습니다. 이 스타일은 HTML의 <div> 태그에 적용됩니다.

또한 overflow: visible 속성을 사용해 <div> 태그의 텍스트가 요소 안에 들어맞지 않을 경우 요소 박스 바깥으로 렌더링되도록 지시했습니다. 결과적으로 일부 텍스트가 박스 밖으로 넘쳐나서 표시되는 것을 확인할 수 있습니다.

visible 값은 유용하지만, 대부분의 경우 다른 값보다 적합하지 않을 수 있습니다. 요소의 콘텐츠가 밖으로 넘쳐나면 웹 페이지의 다른 스타일과 충돌하거나 전체 레이아웃을 망가뜨릴 수 있기 때문입니다.

2. scroll — 스크롤바 추가

scroll 값은 웹 요소에서 넘쳐나는 콘텐츠를 잘라낸 후, 스크롤바를 추가해 사용자가 나머지 콘텐츠를 확인할 수 있도록 합니다.

단, scroll 값은 필요 여부와 관계없이 가로·세로 스크롤바를 모두 추가한다는 점에 유의해야 합니다.

예를 들어 박스를 디자인하면서 넘쳐나는 텍스트는 반드시 박스 안에 머물러야 하고, 넘치는 텍스트가 있다면 스크롤바가 나타나 사용자가 박스 내용을 탐색할 수 있도록 하고 싶다고 가정해 봅시다. 이때는 아래와 같은 코드를 사용할 수 있습니다.

index.html

<div>이것은 텍스트가 들어있는 박스입니다. CSS overflow 속성에 "scroll" 값을 지정했을 때 어떻게 되는지 보여주기 위해 사용하는 박스입니다.</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow: scroll;
}

위 코드에서는 가로 200px, 세로 100px 크기의 연회색 배경 박스를 만들고, overflow 속성을 "scroll"로 설정했습니다. 텍스트가 박스에 다 들어가지 못하기 때문에 스크롤바가 나타나고, 넘친 텍스트는 박스 테두리 안에 유지됩니다.

3. auto — 필요할 때만 스크롤바

앞서 살펴본 것처럼 scroll 값은 불필요한 스크롤바까지 함께 추가합니다. 이 방식이 유용한 경우도 많지만, 요소를 디자인할 때는 실제로 필요한 스크롤바만 나타나길 원하는 경우가 더 많습니다. 이럴 때 auto 값을 사용하면 됩니다.

auto 값은 scroll 값과 비슷하게 동작하지만, 스크롤바가 꼭 필요한 경우에만 추가합니다. 텍스트 박스에 스크롤바가 필요할 때만 나타나도록 하려면 아래 코드를 사용할 수 있습니다.

index.html

<div>이것은 텍스트가 들어있는 박스입니다. CSS overflow 속성에 "auto" 값을 지정했을 때 어떻게 되는지 보여주기 위해 사용하는 박스입니다.</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow: auto;
}

위 예제에서도 가로 200px, 세로 100px 크기의 연회색 배경 박스를 만들고 overflow 속성을 auto로 설정했습니다. 실행 결과 스크롤바가 하나만 표시되는데, 이는 박스 안의 넘친 콘텐츠를 보여 주는 데 한 개의 스크롤바면 충분하기 때문입니다.

4. hidden — 넘친 콘텐츠 숨기기

요소에서 넘쳐나는 콘텐츠를 잘라낸 뒤 사용자에게 보이지 않게 처리하고 싶다면 hidden 값을 사용하면 됩니다.

예를 들어 텍스트 박스의 내용이 요소 밖으로 넘칠 경우 해당 내용을 숨기고 싶다면 다음 코드를 사용할 수 있습니다.

index.html

<div>이것은 텍스트가 들어있는 박스입니다. CSS overflow 속성에 "hidden" 값을 지정했을 때 어떻게 되는지 보여주기 위해 사용하는 박스입니다.</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow: hidden;
}

앞선 예제들과 달리, 박스에서 넘쳐난 텍스트가 사용자에게 보이지 않습니다. 코드에서 overflow 속성 값을 hidden으로 설정했기 때문입니다.

overflow-x와 overflow-y로 축별 제어하기

overflow-x와 overflow-y 속성을 사용하면 콘텐츠 오버플로를 가로축과 세로축으로 나누어 각각 다르게 처리할 수 있습니다.

overflow-x는 박스의 왼쪽·오른쪽 가장자리에서 발생하는 오버플로 처리 방식을, overflow-y는 위쪽·아래쪽 가장자리의 오버플로 처리 방식을 지정합니다.

예를 들어 x축에는 hidden 값, y축에는 scroll 값을 각각 적용하고 싶다면 아래와 같이 코드를 작성할 수 있습니다.

index.html

<div>이것은 텍스트가 들어있는 박스입니다. CSS의 overflow-x와 overflow-y 속성을 사용해 웹 요소의 각 축별로 오버플로 값을 설정하는 방법을 보여주기 위한 박스입니다.</div>

styles.css

div {
	width: 200px;
	height: 100px;
	background-color: lightgray;
	overflow-x: hidden;
	overflow-y: scroll;
}

실행 결과 박스에는 가로 스크롤바가 없습니다. overflow-x 값을 "hidden"으로 설정했기 때문입니다. 반면 세로 스크롤바는 존재하는데, overflow-y 값을 "scroll"로 설정했기 때문입니다.

마무리

CSS overflow 속성은 요소의 콘텐츠가 웹 페이지에서 할당된 영역보다 커서 들어맞지 않을 때 콘텐츠를 어떻게 표시할지 지정하는 속성입니다.

이 글에서는 몇 가지 예제를 통해 CSS overflow 속성과 네 가지 값(visible, scroll, hidden, auto)을 사용해 웹 요소의 오버플로를 제어하는 방법을 살펴보았습니다. 또한 overflow-x, overflow-y 속성으로 축별로 오버플로를 다루는 방법도 함께 익혔습니다. 이제 여러분도 전문 개발자처럼 CSS overflow 속성을 자유롭게 활용할 준비가 되었습니다.