CSS의 오버플로 이해

한동안 CSS를 작성했다면 오버플로 속성을 접했을 것입니다. 컨테이너의 오버플로 콘텐츠 표시를 제어합니다.

예를 들어 보겠습니다. 다음과 같이 너비가 300px이고 높이가 100px인 div가 있습니다.

#container {
 border: 2px solid blue;
 height: 100px;
 width: 300px;  
}

내부에 텍스트를 입력해 보겠습니다.


모든 것이 괜찮습니다. 텍스트를 더 입력해 보겠습니다.


보시다시피 컨테이너 용량보다 내용이 많으면 텍스트가 넘칩니다.

그러나 이것이 유일한 행동입니까? 당연히 아니.

오버플로 가능한 값

오버플로우에는 네 가지 가능한 값이 있습니다.

표시(기본값)

숨김(오버플로된 콘텐츠는 잘림)

스크롤(컨텐츠의 길이에 상관없이 스크롤 막대가 컨테이너에 추가됨)

자동(필요한 경우 스크롤 막대가 추가됨)

작동 중인 오버플로 값

작동 중인 오버플로 값을 살펴보겠습니다.

보이는

이것이 기본값입니다. 따라서 위의 스크린샷을 재사용하겠습니다.

숨겨진

스크롤

오버플로가 발생하는 경우:


넘침이 없을 때:


=> 상관없이 스크롤 막대가 있습니다 :O

자동

넘침이 없을 때:


오버플로가 발생하는 경우:

오버플로-x 및 오버플로-y

오버플로만 사용하도록 제한되지 않습니다. overflow-x 및 overflow-y를 사용하여 이러한 축의 동작을 개별적으로 설정할 수 있습니다(위와 동일한 값 사용).