왼쪽에 보이는 화면은 스타일시트를 이용해서 <div> 태그에 스크롤이 생기게 한 화면이다.
팝업창 등 고정된 영역에서 <iFrame>등을 사용하지 않고 긴 내용을 뿌려주고자 할때 사용하면 편하고, 보여주기도 좋다.
아래는 왼쪽에 보이는 화면의 소스이다. 붉은색 스타일시트 속성을 유심히 보자.
--[Source]---------------------------------------------------------------------------------------------
<div style="overflow-y:scroll; width:300px; height:150px; padding:4px; border:1 solid #000000;">
Div에 스크롤 생기게 하기<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
</div>
---------------------------------------------------------------------------------------------------------
※ 스타일시트의 OverFlow 속성
1) overFlow : visible
레이어 속의 내용이 레이어의 크기를 넘을 경우, 레이어 크기를 키워서 보여준다. (default 설정 값)
2) overFlow : hidden
레이어 속의 내용이 레이어의 크기를 넘을 경우, 레이어 크기만큼만 보여준다.
3) overFlow : auto
레이어 속의 내용이 레이어의 크기를 넘을 경우, 내용에 따라 자동으로 스크롤을 만든다.
4) overFlow : scroll
레이어 속의 내용의 길이와 상관없이 무조건 스크롤을 만든다.
* X, Y에 대해 다르게 적용하고자 할 때에는
overFlow-x : scroll, overFlow-y : scroll
와 같이 적용한다.
[출처] div에 스크롤이 생기게 하자|작성자 다찌
'프로그래밍 > Html' 카테고리의 다른 글
iPhone Safari 웹개발 기본 팁 (1) | 2011.06.08 |
---|---|
HTML 코드 정리기 (0) | 2011.01.12 |
HTML 코드 정리 사이트 (0) | 2010.09.04 |
HTML5 Cheat Sheet (HTML5 컨닝페이퍼) (0) | 2010.04.16 |