overflow 속성은 내부 요소가 부모 박스의 범위를 벗어날 때 어떻게 처리할 것인지를 결정합니다. overflow의 속성은 다음과 같습니다.
속성
설명
hidden
영역을 벗어나는 부분이 보이지 않게 만듭니다.
scroll
영역을 벗어나는 부분은 스크롤 바를 나타나게 만듭니다.
visible
박스를 넘어가도 보여줍니다. (초기 설정과 동일)
auto
박스를 넘어가지 않으면 스크롤 바가 나오지 않고, 박스를 넘어갈 때 스크롤 바가 나타납니다.
initial
기본값으로 설정합니다.
inherit
부모 요소의 속성을 상속받습니다.
웹 페이지를 만들 때에는 콘텐츠의 성격에 따라 박스 성격도 달라집니다. 항상 높이가 고정되어 있는 박스가 있을 수도 있고 콘텐츠의 내용이 자주 업데이트 되면서 높이가 일정하지 않은 박스도 있습니다. 웹 페이지의 기본 구조를 만드는 박스들은 대부분 높이가 고정이며 뉴스 페이지의 기사처럼 내용이 바뀌는 박스들은 내용에 따라 높이가 변할 수 있습니다. 이런 경우에 overflow 속성을 이용하면 좋습니다.
또한 overflow-x와 overflow-y를 사용하면 x축(가로), y축(세로)의 넘치는 부분을 어떻게 보여줄지 개별로 지정할 수 있습니다.
2. overflow 속성
1) hidden 속성
overflow 속성에 hidden을 적용하면 부모 영역에서 벗어난 부분은 보이지 않습니다. 영역 밖으로 나오는 부분은 그냥 잘려버리는 것을 확인할 수 있습니다.
2) scroll 속성
웹 페이지를 비롯한 박스의 내부 스크롤 바를 지정하고자 할 때 scroll 속성을 사용합니다. 주어진 공간을 넘어가도 스크롤링이 가능하도록 바꾸어 콘텐츠를 끝까지 볼 수 있습니다. overflow 속성 대신 overflow-x, overflow-y 속성을 사용하면 가로 또는 세로만 선택적으로 스크롤바를 보여줄 수 있습니다.
3) visible 속성
박스를 넘어가도 보여줍니다. overflow 속성을 생략하면 나오는 값입니다.
4) auto 속성
콘텐츠 양이 가변적이기 때문에 스크롤바를 지정할지 미정이라면, auto를 사용하면 됩니다. 콘텐츠의 크기가 주어진 공간보다 커질 경우에만 스크롤바가 생깁니다.
5) initial 속성
기본값으로 설정합니다.
6) inherit 속성
부모 요소의 속성값을 상속받아 같은 값으로 지정합니다.
3. overflow 예제
HTML과 CSS 코드로 예시를 살펴보겠습니다.
<!DOCTYPEhtml>
<htmllang="ko">
<head>
<metacharset="utf-8">
<title>overflow</title>
<style>
h1{
display: inline;
background: rgb(255, 240, 155);
font-size: medium;
}
div{
width: 50%; height: 60px;
border: 5pxsolid#000;
margin: 10px070px0;
}
.a1{overflow:hidden;}
.a2{overflow:scroll;} /* 기본값 */
.a3{overflow:visible;}
.a4{overflow:auto;}
.a5{overflow:initial;}
.aa{overflow:hidden;}
.a6{overflow:inherit;}
</style>
</head>
<!--
overflow: 내용물이 넘칠 경우 어떻게 보여줄지
hidden 숨기기
visible 넘치게
scroll 스크롤 바로 넘치는 요소 보기
auto 넘치지 않을 경우 스크롤 x 넘치는 경우 스크롤
overflow-x x축(가로)의 넘치는 부분을 어떻게 보여줄지
overflow-y y축(세로)의 넘치는 부분을 어떻게 보여줄지
-->
<body>
<h1>overflow:hidden</h1>
<divclass="a1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis nisi lectus. Fusce mattis nisl id quam mattis, sed tincidunt elit mattis. Ut ultrices tortor sed justo laoreet, ut dapibus ligula egestas. Suspendisse nisl dolor, vulputate vel nulla a, suscipit sagittis dui. Sed pretium tristique pharetra.</div>
<h1>overflow:scroll</h1>
<divclass="a2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis nisi lectus. Fusce mattis nisl id quam mattis, sed tincidunt elit mattis. Ut ultrices tortor sed justo laoreet, ut dapibus ligula egestas. Suspendisse nisl dolor, vulputate vel nulla a, suscipit sagittis dui. Sed pretium tristique pharetra.</div>
<h1>overflow:visible</h1>
<divclass="a3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis nisi lectus. Fusce mattis nisl id quam mattis, sed tincidunt elit mattis. Ut ultrices tortor sed justo laoreet, ut dapibus ligula egestas. Suspendisse nisl dolor, vulputate vel nulla a, suscipit sagittis dui. Sed pretium tristique pharetra.</div>
<h1>overflow:auto</h1>
<divclass="a4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis nisi lectus. Fusce mattis nisl id quam mattis, sed tincidunt elit mattis. Ut ultrices tortor sed justo laoreet, ut dapibus ligula egestas. Suspendisse nisl dolor, vulputate vel nulla a, suscipit sagittis dui. Sed pretium tristique pharetra.</div>
<h1>overflow:initial</h1>
<divclass="a5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis nisi lectus. Fusce mattis nisl id quam mattis, sed tincidunt elit mattis. Ut ultrices tortor sed justo laoreet, ut dapibus ligula egestas. Suspendisse nisl dolor, vulputate vel nulla a, suscipit sagittis dui. Sed pretium tristique pharetra.</div>
<h1>overflow:inherit</h1>
<divclass="aa">
<divclass="a6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis nisi lectus. Fusce mattis nisl id quam mattis, sed tincidunt elit mattis. Ut ultrices tortor sed justo laoreet, ut dapibus ligula egestas. Suspendisse nisl dolor, vulputate vel nulla a, suscipit sagittis dui. Sed pretium tristique pharetra.</div>
