overflow 속성에 대해서

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 속성을 이용해서 구성한다면 좀 더 효과적으로 구현이 가능합니다.