[CSS] overflow 속성과 scroll

목차

1. Overflow란?

2. overflow: visible

3. overflow: hidden

4. overflow: scroll

5. overflow: auto

 

 

Overflow란?

'넘쳐 흐른다'는 뜻으로, 주로 프로그래밍 분야에서 데이터가 특정 영역보다 넘치는 경우를 뜻한다.

CSS도 이러한 뜻으로 overflow 속성이 있으며, 다양한 옵션에 대해 소개한다.

✅ x축, y축을 한 번에 설정할 수 있는 overflow 속성과, x축, y축을 각각 설정할 수 있는 overflow-x와 overflow-y 속성이 있다.

 

 

1. overflow: visible;

기본값으로, content 크기가 box보다 넘칠 때, 넘친 내용물이 그대로 보여진다.

 

 

 

2. overflow: hidden;

넘친 내용물을 숨김 처리한다.

 

 

 

3. overflow: scroll;

스크롤바를 생성하여 box 내의 모든 내용물을 볼 수 있다.

✅ (window 기준) x축, y축 스크롤바가 항상 표시된다.

 

(1) overflow-x: scroll;

x축 스크롤바가 항상 표시된다.

✅ 이 때 y축으로 oveflow가 발생했다면 y축 스크롤바도 표시된다.

 

(2) overflow-y: scroll;

y축 스크롤바가 항상 표시된다.

✅ 이 때 x축으로 oveflow가 발생했다면 x축 스크롤바도 표시된다.

 

 

 

4. overflow: auto;

내용이 넘치는 축의 스크롤바만 생성된다.