HTML DIV tag: 스크롤바 제어 - Overflow: auto, scroll, hidden 예제

원래 페이지로 가기

4. overflow-y, overflow-x
overflow-y 는 DIV 영역 오른쪽의 세로 스크롤바를 말하고, overflow-x 는 DIV 영역 아래의 가로 스크롤바를 말한다.
내용이 텍스트인 경우에는 줄바꿈(wrap)을 하지 않도록 하는 경우 외에는 특별히 쓸 일이 없을 것 같다. DIV 영역보다 큰 그림의 경우에는 쓸 경우가 있을 수 있겠다.
overflow에 주는 속성(scroll, auto, hidden)은 위에서 본 것과 같다.

[예1: overflow:auto]
<div style="overflow:auto; width:500px; height:150px;">
</div>
[실제 적용한 모습]

[예2: overflow-x:hidden]
가로(x) 스크롤바를 숨김. 따라서, DIV 영역 너비를 넘는 오른쪽 부분을 보이지 않는다.
<div style="overflow-x:hidden; width:500px; height:150px;">
</div>
[실제 적용한 모습]
.

[예3: overflow-y:hidden]
세로(y) 스클롤바를 숨김. 따라서, DIV 영역의 세로(길이)를 넘는 부분은 보이지 않는다.
<div style="overflow-y:hidden; width:500px; height:150px;">
</div>
[실제 적용한 모습]

[예4: overflow:hidden]
세로(y) 가로(x) 스클롤바를 모두 숨김. 따라서, DIV 영역을 넘는 부분은 가로 세로 모두 보이지 않는다.
<div style="overflow:hidden; width:500px; height:150px;">
</div>
[실제 적용한 모습]

원래 페이지로 가기
 

도움이 되기를 바랍니다.