CSS overflow 속성 모두 정리하기(visible, hidden, scroll, auto)

오늘은 CSS overflow 속성의 모든 것을

정리해보려 한다.

 

overflow 예시

출처: MDN web docs

CSS overflow의 예제 html코드다.

 

기타 css를 설정해주고,

각 p 마다, overflow 속성을 각각 부여해본다.

 

 

반응형

▼ 아래와 같은 화면이 나오면 성공!

CSS overflow

너무 커서 영역을 벗어나는 

콘텐츠를 제어하는 수단

 

visible  , hidden,  scroll ,  auto 총 4가지 종류가 있다.

 

▶ 보통 hidden과 auto를 많이 쓴다.

1. overflow: visible;

 

오버플로우란 쉽게 말해서 상자를 만들어주는 거라고 보면 됩니다.

이 영역밖으로 나가면,

그에 따른 조치를 취해주는 겁니다.

 

visible은 그냥 그대로 두는 것으로,

넘치면 콘텐츠가 잘리지 않고

상자 밖으로 보입니다.

 

2. hidden;

 

패딩상자 밖으로 넘친 부분이 잘립니다.

아예 보이지 않습니다.

 

사용하는 빈도 수가 많습니다.

3. scroll;

 

패딩상자 밖으로 넘친 콘텐츠들이 잘립니다.

그러나 스크롤을 통해서, 확인이 가능합니다.

4. auto;

 

콘텐츠들이 넘치면 자동으로 스크롤이 생깁니다.

5. overflow-x 와 oveflow-y

 

가로(x축) 와 세로(y축)을

조정할 수 있다.

특이사항은 y의 경우 세로로 공간에서 삐져나오고,

x는 가로로 박스를 삐져나온다.

 

오버플로에 x축 부분을 제어할 수 있다는 뜻이다.

(overflow-x도 브라우저에게 명령해서

visible/hidden/scroll/auto로 통제할 수 있다.)

통제했을 때 확연하게 보이는 부분이

바로 스크롤이다.

 

overflow-y: scroll; 하면

세로 부분 스크롤만 생긴다.

 

밑에 가로 스크롤은 필요없고,

y축에만 무슨 짓을 하고 싶을 때

이걸 쓰면 된다.