티스토리 뷰

프로그래밍/CSS 3.0

overflow 속성에 대해서

쇠주는참이슬 2015. 2. 2. 11:20




overflow 는 정의된 화면의 크기보다 컨텐츠 내용이 길어졌을때 어떻게 보여줄지에 대한 속성입니다.

아주 간단한 속성이지만 그냥 잊고 지나치면 나중에 혼란을 일으킬 수 있는 속성이기에 블로깅합니다.


overflow 속성은 기본적으로 아래와 같습니다.

visible : 정의된 화면의 크기보다 컨텐츠가 길어도 그대로 보입니다. (영역을 넘어서 표시됨)

hidden : 정의된 화면의 크기만큼만 표시되고, 그 뒤에 내용은 보이지 않습니다.

scroll : 스크롤바가 항상 표시됩니다.

auto : 정의된 화면의 크기를 넘었을때만 스크롤바가 보입니다.


Style 정의

   1:     <style>
   2:          .container
   3:          {
   4:              width:300px;
   5:              height:100px;
   6:              background-color:red;border:1px solid black;
   7:              position:relative;
   8:              overflow:visible;
   9:          }
  10:   
  11:          .item
  12:          {
  13:              width:500px;
  14:              height:80px;
  15:              vertical-align:middle;
  16:              background-color:yellow;
  17:              position:absolute;
  18:              top:5px;            
  19:          }
  20:      </style>

HTML 

   1:   <div class="container"> 
   2:          <div class="item"></div> 
   3:   </div>


컨테이너의 크기보다 아이템의 크기가 크게 설정을 하고
overflow 속성을 visible 로 했을시에 보이는 화면입니다.

visible 속성을 hidden 으로 변경한경우

해당 컨테이너의 크기만큼만 표시되고 뒤에 내용은 표시되지 않습니다.

visible을 scroll로 변경한경우

컨테이너의 크기보다 큰 영역만큼 스크롤바가 생깁니다.

x, y축따로 설정을 하려면 overflow-x, overflow-y 속성을 설정하면 됩니다.

visible을 auto로 변경한경우

컨테이너의 크기보다 큰 영역만큼 자동으로 스크롤바가 생깁니다.

아이템영역이 작아지면 자동으로 스크롤은 사라지게 됩니다.

스크립트를 이용해서 슬라이드쇼(Slide Show) 페이지나, 이미지뷰어(Image Viewer)를 만든다고 했을시에

overflow 속성을 이용해서 구성한다면 좀 더 효과적으로 구현이 가능합니다.





댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2024/03   »
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
글 보관함