본문 바로가기
프로그래밍/Html

div에 스크롤이 생기게 하자

by 백룡화검 2008. 6. 30.

div-scroll-dazzilove

왼쪽에 보이는 화면은 스타일시트를 이용해서 <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

와 같이 적용한다.

'프로그래밍 > 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