overflow Property


Home > Document > CSS > Positioning > overflow

overflow Property

overflow Property는 DIV와 같은 style container속의 내용물이 가로(X 방향)나 세로(Y 방향)으로 넘쳤을 때 어떻게 처리하느냐를 다루는 Property입니다.

  [표 보는 방법]
overflow Property
Value visible | hidden | scroll | auto | Inherit
Initial visible
Applies to block-level and replaced elements
Inherited no
Percentages N/A
Media Visual
HTML Syntax { overflow: sOverflow }
Scripting object.style.overflow [ = sOverflow ]




CSS Scripting
onMouseOver="this.style.overflow='hidden';"


overflow Property 의 사용값
  • visible
    Box 속의 내용물을 모두 보여 줍니다. 따라서 내용물의 크기에 따라 Box의 가로와 세로 폭이 늘어납니다.


  • hidden
    Box의 width와 height를 지정했을 경우, 지정된 범위를 넘치는 내용물은 보이지 않습니다.


  • auto
    Box의 width와 height를 지정했을 경우, 내용물이 Box의 크기를 넘치는 순간 scroll bar가 생겨서 범위를 넘는 내용물을 scroll 하여 볼 수 있게 합니다.


  • scroll
    Box의 width와 height를 지정했을 경우, 내용물이 넘치든 넘치지 않든 scroll bar 의 면적을 차지하며, 내용물이 넘치는 순간 scroll bar가 생깁니다.
overflow Property DHTML
overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow
width : 200px, height : 200px width : auto, height : auto
visible hidden auto scroll


소스 보기





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색