블로그 이미지
초딩입맛제주아재
하고 싶은 것만 하며 살고 싶다

calendar

1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
2006. 10. 19. 02:16 Programing/HTML/JavaScript/CSS
'overflow'
Value:   visible | hidden | scroll | auto | inherit
Initial:   visible
Applies to:   non-replaced block-level elements, table cells, and inline-block elements
Inherited:   no
Percentages:   N/A
Media:   visual
Computed value:   as specified
visible
This value indicates that content is not clipped, i.e., it may be rendered outside the block box.
hidden
This value indicates that the content is clipped and that no scrolling user interface should be provided to view the content outside the clipping region.
scroll
This value indicates that the content is clipped and that if the user agent uses a scrolling mechanism that is visible on the screen (such as a scroll bar or a panner), that mechanism should be displayed for a box whether or not any of its content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. When this value is specified and the target medium is 'print', overflowing content may be printed.
auto
The behavior of the 'auto' value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes.

example:

<div style="width: 300px; height: 200px; overflow: hidden;">
   contents
</div>

-> contents의 길이가 지정된 영역을 벗어나면 보이지 않는다.

<div style="width: 300px; height: 200px; overflow: scorll;">
   contents
</div>

-> contents의 길이에 상관 없이 스크롤바가 생성된다.

<div style="width: 300px; height: 200px; overflow: auto;">
   contents
</div>

-> contents의 길이에 따라 스크롤바가 생성되거나 사라진다.

<div style="width: 300px; height: 200px; overflow: visible;">
   contents
</div>

-> 레이어의 크기가 contents에 맞추어 확장된다.


overflow 속성은 고정된 영역에서 레이아웃을 해치지 않고
컨텐츠를 보여주고자 할떄 유용하게 쓰일 수 있다.
posted by 초딩입맛제주아재