웹프로그래밍

본문 바로가기
사이트 내 전체검색


웹프로그래밍
웹프로그래밍

1. Div 영역에 스크롤바 지정하기

페이지 정보

작성자 관리자 댓글 0건 조회 1,039회 작성일 21-02-17 21:57

본문

1. Div 영역에 스크롤바 지정하기

DIV 영역에 스크롤바를 표시하고 제어하려면, 스타일(style) 속성에서 overflow 를 지정하면 된다. DIV 영역의 오른쪽에 표시되는 세로 스크롤바가 기본이다. 


[Div 영역에 스크롤바 지정]

<div style="overflow:scroll; width:350px; height:200px;">

</div>

overflow에는 자동 auto, 항상표시 scroll, 항상숨김 hidden 으로 지정할 수 있다.



1. overflow: scroll;  항상 스크롤바 표시

내용이 DIV 영역보다 많든 적든 상관없이 항상 스크롤바를 표시한다.


2. overflow: auto; 내용이 DIV 영역 보다 많을 때만 표시

내용의 양이 DIV 영역보다 많으면 스크롤바를 표시하고, 적으면 표시하지 않는다.

텍스트로 된 내용이 DIV 영역보다 많을 때는, 텍스트 문장은 자동 줄바뀜이 되기 때문에, 세로 스크롤바만 표시되고, DIV 영역보다 큰 그림의 경우에는 가로 세로 스크롤바가 모두 표시 된다.



<div style="overflow:auto; width:500px; height:150px;">

</div>



3. overflow: hidden; 항상 스크롤바 숨김

내용이 DIV 영역보다 많든 적든 항상 스크롤바를 표시하지 않는다. 

따라서, DIV 영역을 넘는 내용은 보이지 않게 된다. 의도적으로 내용을 숨기려 할 때나 필요한 기능이다.


<div style="overflow:hidden; width:500px; height:150px;">

</div>


4. overflow-y, overflow-x

overflow-y 는 DIV 영역 오른쪽의 세로 스크롤바를 말하고, overflow-x 는 DIV 영역 아래의 가로 스크롤바를 말한다.

내용이 텍스트인 경우에는 줄바꿈(wrap)을 하지 않도록 하는 경우 외에는 특별히 쓸 일이 없을 것 같다. 

DIV 영역보다 큰 그림의 경우에는 쓸 경우가 있을 수 있겠다.

overflow에 주는 속성(scroll, auto, hidden)은 위에서 본 것과 같다.


세로(y) 스클롤바를 숨김. 따라서, DIV 영역의 세로(길이)를 넘는 부분은 보이지 않는다.
<div style="overflow-y:hidden; width:500px; height:150px;">
</div>

5. white-space:nowrap; 과 overflow-y:hidden

[DIV 영역 안의 텍스트 줄바꿈을 하지 않도록 하는 태그]
white-space:nowrap;
 
DIV 영역에 들어 있는 문장의 길이가 길면 자동으로 줄바꿈이 되는데, 줄바꿈(wrap)을 하지 않도록 하면 텍스트 문장이 DIV 영역 밖으로 펼쳐 보이게 된다.


긴 문장의 자동 줄바꿈을 하지 않도록 하였음. 따라서, DIV 영역을 넘어서 문장이 표시됨
<div style="white-space:nowrap; width:500px; height:150px;">
</div>

긴 문장의 줄바꿈을 하지 않도록 하고, 스크롤바 표시를 자동을 설정함.
따라서, 문장의 길이가 DIV 영역의 너비 보다 길면 가로(x) 스크롤바가 표시됨.
<div style="white-space:nowrap; overflow:auto;  width:500px; height:150px;">
</div>

긴 문장의 줄바꿈을 하지 않도록 하고, 스크롤바를 표시하지 않도록 설정함.
따라서, 문장의 길이가 DIV 영역의 너비 보다 길지만 스크롤바가 표시되지 않았다.
<div style="white-space:nowrap; overflow:hidden;  width:500px; height:150px;">
</div>

댓글목록

등록된 댓글이 없습니다.


개인정보취급방침 서비스이용약관 모바일 버전으로 보기 상단으로

TEL. 063-469-4551 FAX. 063-469-4560 전북 군산시 대학로 558
군산대학교 컴퓨터정보공학과

Copyright © www.leelab.co.kr. All rights reserved.