[CSS] 제일 쉬운 overflow 설명

[CSS] 제일 쉬운 overflow 설명

제일 쉬운 overflow 설명

 

---

 

오늘은 css의 overflow 속성에 대해서 알아보겠습니다.

---

기본 컨텐츠, 콘테이너 성질 이해하기

 

기본 CSS는 요소의 크기(width, height) 를 정하지 않는다면

아래 그림 1 처럼 컨텐츠 늘어나면, 요소의 크기도 같이 커지게 됩니다.

 

 

그림 1. 컨텐츠가 길 때 css 기본 설정값

 

이럴 때 "초과하는" 영역을 제어할 수 있는 속성이 overflow 입니다. 

 

그림2. 컨텐츠가 길 때 overflow 세팅

 

요소의 크기(width, height)를 고정해둔 상태에서 overflow 속성을 주게 된다면

 

컨텐츠가 요소의 크기보다 늘어날 경우,
초과한(넘쳐흐른 = overflow 된) 부분이 설정해 둔 속성에 맞춰서 보이게 됩니다.

 

 

속성값

visible	기본값. 영역을 벗어난 부분을 자르지 않고 그대로 보이게 함 (그림 1 참고)
hidden	영역을 벗어난 부분을 숨겨서 보이지 않게 함 (crop, 잘라내는 느낌)
scroll	스크롤을 생성하여 스크롤을 내릴 경우 보이게 함 (영역을 넘어가든 안넘어가든 무조건 스크롤 생성)
auto	영역을 벗어난 부분이 있을 경우, 자동으로 스크롤을 생성해 스크롤을 내릴 경우 보이게 함 (영역을 넘어가는 경우에만 스크롤 생성)

 

 

예시

 

See the Pen overflow case by 이상진 (@sangziii) on CodePen.

 

📌  참고
overflow: scroll 시 발생하는 스크롤바를 숨기는 방법은 아래 포스팅에서 다루고 있습니다.

 

---

 

심화 활용 예시

overflow 는 초과한 텍스트 만 제어하는 것이 아니라,

초과한 컨텐츠 전부를 대상으로 합니다. 

 

이를 활용하여 실무에서는 flicking 리스트 UI 를 만들 때도 사용됩니다. 

 

아래 예제를 살펴보세요.

 

See the Pen overflow case by 이상진 (@sangziii) on CodePen.

 

정리

overflow 를 알고 있어야 텍스트 말줄임 (ellipsis) 를 정확하게 할 수 있습니다.

 

아래 말줄임 관련 포스팅도 참고해주세요 😊

 

[CSS] 말줄임 알아보기 

[CSS] 말줄임 처리(ellipsis)

 

포스팅이 여러분의 코딩에 조금이나마 도움이 되면 좋겠습니다.

 

글이 도움이 되셨다면 공감&댓글 부탁드립니다.
글 작성에 큰 힘이 됩니다. 🙂