auto;overflow: hidden; 속성에 대해

CSS에 overflow는 요소내 컨텐츠가 커서 요소내 모두 보여죽 어려울때 그것을 어떻게 보여줄지를 지정한다.
기본적 컨텐츠 포함 요소의 크기가 고정되있지 않다면 모두 포함할 수 있도록 요소의 크기가 커진다. 크기가 고정되있으면 지정된 값에 따라 보여진다.

 

 

overflow에 사용할 수 있는 값 4가지

1. visible

기본 값, 넘칠 경우 컨텐츠가 상자 밖으로 보여짐

2. hidden

넘치는 부분은 잘려서 보여지지 않음

3. scroll

스크롤바가 추가되어 스크롤할 수 있음

4. auto

컨텐츠 량에 따라 스크롤바를 추가할지 자동 결정

 

 

즉 auto;overflow: hidden; 의 의미는 컨텐츠 량에 따라 스크롤바를 추가할지 자동 결정하고, 넘친 컨텐츠는 잘려지고 보여지지 않음을 의미하게 된다.