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>

[실제 적용한 모습]

원래 페이지로 가기