본문 바로가기
프로그래밍 놀이터/Web

[CSS] overflow property 에 대해 알아보자.

by 돼지왕 왕돼지 2013. 6. 27.
반응형


 CSS, overflow property 에 대해 알아보자.

 

[CSS] overflow property 에 대해 알아보자.



CSS 의 overflow 는 div 와 같이 block component 에 잘 사용되는 style option 이다.
이 옵션은 태그 안에 들어가는 내용물이, 이를 담고 있는 container 의 영역을 벗어날 경우
내용물(contents) 를 어떻게 처리할가를 정의하는 것이다.

예를 들어

{ overflow:hidden; }


와 같이 overflow 내용을 hidden 으로 표시하면 container 를 벗어나는 내용물은 표시하지 않는다.




overflow value


 값

설명 

 visible

 기본값으로 overflow 되는 값들을 container 밖에라도 그냥 다 보여준다.

 hidden

 overflow 되는 값들을 숨긴다.

 scroll

 overflow 여부와 상관없이 scroller 가 생기고 scroll 을 통해 내용을 볼 수 있다.

 auto

 overflow 되는 경우 scroller 가 생기면서 scroll 을 통해 나머지 내용을 볼 수 있다.

 inherit

 parent 의 overflow 값을 상속해 사용한다.







overflow 값에 대한 example code 보기


요건 W3School 에서 잘 만든 샘플을 제공하여 링크로 대신한다.


W3School Overflow Example 페이지



반응형

댓글