CSS overflow 속성이란?
CSS의 overflow 속성은 박스(box)의 내용물이 박스 자체보다 클 때, 브라우저가 이를 어떻게 처리할지 지정하는 속성입니다. 예를 들어 고정된 높이의 컨테이너 안에 텍스트가 넘쳐흐를 때, 내용을 그대로 보여줄지, 잘라낼지, 스크롤바를 만들지 결정하는 역할을 합니다.
overflow 속성에는 다음과 같은 네 가지 주요 값이 있습니다.
overflow 속성 값 비교
| 값 | 설명 |
|---|---|
visible | 기본값으로, 콘텐츠가 포함 요소(containing element)의 경계를 벗어나도 그대로 표시됩니다. 즉, 넘친 내용이 요소 밖으로 삐져나와 보이게 됩니다. |
hidden | 포함 요소의 경계를 벗어나는 부분은 잘려서 보이지 않으며, 스크롤바도 나타나지 않습니다. 넘치는 내용은 완전히 숨겨집니다. |
scroll | 포함 요소의 크기는 변하지 않지만, 콘텐츠가 넘치지 않더라도 항상 스크롤바가 추가되어 사용자가 스크롤하여 내용을 확인할 수 있습니다. |
auto | scroll과 목적은 같지만, 실제로 콘텐츠가 넘칠 때에만 스크롤바가 표시됩니다. 대부분의 경우 가장 권장되는 값입니다. |
사용 예시
.container { width: 300px; height: 150px; overflow: auto; }위 코드처럼 설정하면 컨테이너 크기는 유지되면서, 내용이 넘칠 때만 스크롤바가 자동으로 생성됩니다.
참고: overflow-x와 overflow-y
overflow 속성은 가로 방향과 세로 방향을 개별적으로 제어하는 overflow-x, overflow-y 하위 속성으로도 나누어 사용할 수 있습니다. 예를 들어 overflow-x: hidden; overflow-y: auto;처럼 설정하면 가로 스크롤은 숨기고 세로 스크롤만 허용할 수 있어 반응형 웹 디자인에서 매우 유용합니다.