[CSS] overflow

 

 

▶ overflow

  - 요소의 크기 이상으로 내용(자식 요소)이 넘쳤을 때 내용이 보이는 방식을 제어. 단축 속성.
    - 부모 요소의 영역 밖으로 자식 요소가 넘쳤을 때 넘친 영역을 어떻게 표시할 것인지에 대한 처리.

 

 

 

[속성 값]
  - visible: 넘친 부분을 자르지 않고 그대로 보여줌. 기본값.
  - hidden: 넘친 부분을 잘라내고 보이지 않도록 함.
  - scroll: 넘친 부분을 잘라내고 스크롤 바를 통해 볼 수 있도록 함.
           넘침의 유무와 상관 없이 강제로 스크롤 바를 생성. 
  - auto: 넘친 부분이 있는 경우만 잘라내고 스크롤 바를 통해 볼 수 있도록 함. 자동으로 스크롤 바 생성.
           넘치면 넘치는 대로, 넘치지 않으면 않는 대로 스크롤 바를 생성하거나 생성하지 않는 것.

 

 

 

[사용 예시]

 

HTML 구조

- overflow: visible; (기본값)

overflow: visible;(기본값) 예시

 

 

- overflow: hidden;

overflow: hidden; 사용 예시

 

 

- overflow: scroll;

overflow: scroll; 사용 예시

  - 위/아래로는 내용이 넘쳤으니 스크롤 바가 생기고 이를 통해 넘친 영역까지 볼 수 있음.

  - 좌/우 영역은 넘치지 않았음에도 스크롤 바가 생성됨.

 

 

- overflow: auto;

overflow: auto; 사용 예시

  - 위/아래로는 넘쳤으니 스크롤 바가 생기고, 좌/우처럼 넘치지 않는 부분은 스크롤 바가 생기지 않음.
  - 화면 특정 영역에 부분적인 스크롤을 넣을 수 있는 개념으로 활용도가 높음.