[CSS] overflow란?

overflow

요소의 크기 이상으로 컨텐츠가 넘칠 때, 어떻게 보여질지에 대한 속성

1. visible(기본값) : 넘친 그대로 보여준다.
2. hidden : 넘친 내용을 잘라낸다
3. scroll : 넘친 내용을 잘라내고 스크롤바를 생성한다.
4. auto : 넘친 내용이 있는경우에만 스크롤을 생성한다. (scroll과 조금 다름, 아래의 코드 확인)

See the Pen overflow by J-Plum (@J-Plum) on CodePen.

1. 첫 번째 div는 자식 요소가 더 커서 부모 밖으로 넘친 걸 볼 수 있습니다.

2. 두 번째는 자식 요소가 넘쳤지만, hidden 옵션으로 인해 넘친 내용이 잘린 걸 볼 수 있습니다.

3. 세 번째 overflow : scroll은 넘친 자식요소는 잘리고 스크롤이 생긴걸 볼 수 있습니다.

 

4. 마지막 auto의 경우는 scroll처럼 넘친 자식 요소는 잘리고 스크롤이 생긴 것 까지는 같지만
    넘치지 않은 y 축은 스크롤이 생기지 않은 걸 볼 수 있습니다.

 

(overflow-x , overflow-y로  x축 y축 별도로 지정 가능합니다)