[WEB][CSS3] overflow: hidden이 뭔데..

overflow? 
넘쳐흐르다, 범람하다, 가득 차다

 

기능

▷ 영어 뜻에서 추측해볼 수 있듯이,
크기가 제한된 영역에서 많은 양의 컨텐츠를 보여줄 때(= 컨텐츠가 넘쳐흐를 때) 사용한다.

 

속성 종류

visible	기본값, height 보다 내용의 크기가 크더라도 전부 출력
hidden	height 만큼만 출력, heigt 공간 안의 내용은 숨긴다는 뜻!
auto	컨텐츠의 양이 가변적이어서 스크롤바를 보여줘야 할지 말지 미리 결정하기 어려운 경우에 사용!
scroll	주어진 공간을 넘어가는 컨텐츠가 삐져나오면 안 되고, 누락되어도 안 될 때 사용
	내용이 공간을 넘어가지 않아도 스크롤바가 생김

 

말로만 설명하면 이해가 어려우니..    예시 코드!

예시 코드

See the Pen overflow:hidden(1) by Kyx (@dkyuuum) on CodePen.

• 컨텐츠의 높이보다 글이 더 많다면 넘쳐흐르게 된다.
• 사실 이게 왜 문제야? 라고 할 수 있겠지만,

 

See the Pen Untitled by Kyx (@dkyuuum) on CodePen.

• div가 여러개면 위와 같이 내용이 겹쳐지게 됨!! 😨😱

 

따라서 .. ! 👇🏻👇🏻👇🏻👇🏻

See the Pen Untitled by Kyx (@dkyuuum) on CodePen.

See the Pen Untitled by Kyx (@dkyuuum) on CodePen.

• 따라서 div 속성에 overflow: hidden을 주게 되면, 안에 있는 글들이 안으로 숨겨집니다~

 

---

See the Pen Untitled by Kyx (@dkyuuum) on CodePen.

• overflow: auto
• 내용이 공간을 넘어갈 때 자동으로 스크롤 할 수 있게 바가 생긴다!
• 💥 가로 스크롤 하려면

    white-space: nowrap;​

 

---

See the Pen Untitled by Kyx (@dkyuuum) on CodePen.

• overflow: scroll
• 스크롤 할 수 있는 바가 존재한다!
• 이때, auto와 다른 점은?
  • 내용이 공간을 넘어가지 않더라도 스크롤 바가 존재함.
  • 따라서 유동적으로 스크롤 바 생성을 할 거라면 auto 사용을 추천!

 

---

• 나는 이번 프로젝트를 진행하며 float 속성과 함께 종종 썼는데 !
• 어떤 경우에 사용하게 되냐며 온 ..

See the Pen overflow:hideen, float by Kyx (@dkyuuum) on CodePen.

• float: 둥둥 떠있다.
• 두 개의 div가 한 줄에 배치된다!!!
• 더 자세한 float 속성에 대한 건 다음 글에!

---

https://www.daleseo.com/css-overflow/

CSS의 overflow 속성 사용법

참고