[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 페이지

Auto, Block, css, CSS3, example code, Hidden, Inherit, Overflow, overflow auto scroll 차이, overflow property, overflow value, overflow 속성, overflow:hidden, Sample Code, scroll, Visible, 샘플 코드, 예제 코드