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에 맞추어 확장된다.
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 속성은 고정된 영역에서 레이아웃을 해치지 않고
컨텐츠를 보여주고자 할떄 유용하게 쓰일 수 있다.
'Programing > HTML/JavaScript/CSS' 카테고리의 다른 글
Ajax + Drag&Drop 활용 사이트 (0) | 2006.11.10 |
---|---|
자동으로 Sorting 이 되는 SELECTBOX에 항목추가하기 (0) | 2006.11.08 |
이벤트 추가 - addEventListener/attachEvent (2) | 2006.10.09 |
xmlhttprequest로 값 전송시 한글 인코딩/디코딩 (0) | 2006.07.18 |
window.navigator (0) | 2006.07.03 |