CSS- Overflow속성에 대하여

웹개발을 하던 중 우연히 알게 된 overflow 

(때는 바야흐로 웹을 구현하던중 공백 또는 여백이 발생해 구글링을 하며 알게 되었다..)

 

 

 

 

그때는 대충 공백을 없애주는 속성으로만 알고 있었는데 CSS를 입힐수록

많은 overflow를 접하게 되어 정리해보려고 한다!

 

 

 

1. Overflow란 무엇인가?

overflow는 요소의 크기보다 내부 콘텐츠가 더 많을 때 어떻게 처리할지를 결정하는 CSS 속성이다. 콘텐츠가 박스 밖으로 넘치는 경우 이를 어떻게 표시할지 설정할 수 있다. 주로 레이아웃을 짤 때,

텍스트나 이미지 같은 요소들이 부모 요소를 벗어나는 상황을 제어하는 데 사용된다.

 

 

 

 

 

2. Overflow의 기본 값들

overflow 속성에는 몇 가지 중요한 값들이 있다. 각각 어떻게 동작하는지 살펴보겠다.

 

 

1. visible (기본 값)
   기본값으로, 요소의 크기를 넘어가는 콘텐츠는 잘리지 않고 그대로 표시된다. 말 그대로 "넘쳐서 보이는" 방식이다.

   overflow: visible;

2. hidden
   넘치는 콘텐츠를 잘라낸다. 즉, 요소 크기를 벗어난 부분은 보이지 않게 된다. 하지만 여전히 그 영역 안에 존재하는 콘텐츠는 그대로 유지되며 스크롤바가 생성되지 않는다.

   overflow: hidden;

3. scroll
   넘치는 콘텐츠에 대해 항상 스크롤바를 생성한다. 콘텐츠가 넘치지 않더라도 스크롤바는 항상 나타난다.

   overflow: scroll;

4. auto
   콘텐츠가 넘치는 경우에만 스크롤바를 생성한다. 넘치지 않으면 스크롤바가 보이지 않는다. 가장 많이 사용되는 값 중 하나다.

 

overflow: auto;

 

 

 

 

 

 

3. Overflow-x와 Overflow-y

overflow-x와 overflow-y는 각각 가로 및 세로 방향에 대한 overflow 동작을

개별적으로 설정할 수 있는 속성이다

. 이를 통해 가로 혹은 세로 방향에서만 스크롤이나 숨김 처리를 할 수 있다.

• overflow-x: 가로 방향의 콘텐츠가 넘칠 때 적용되는 동작을 정의한다.
• overflow-y: 세로 방향의 콘텐츠가 넘칠 때 적용되는 동작을 정의한다.

예를 들어, 세로로는 스크롤바를 허용하고, 가로로는 잘라내고 싶다면 다음과 같이 설정할 수 있다:

 

overflow-x: hidden;
overflow-y: auto;

 

 

4. Overflow 속성의 실용 예시

1. 모달 창 구현
   모달 창의 경우 화면에 넘치는 부분은 스크롤이 안 되게 하고, 내부 콘텐츠만 스크롤할 수 있게 만들어야 한다. 이때 overflow: auto;를 사용하면 콘텐츠가 많을 때만 스크롤이 생긴다.

   .modal-content {
     overflow: auto;
   }

2. 텍스트 자르기
   긴 텍스트가 영역을 넘어가면 넘치는 부분을 숨기고 싶을 때 overflow: hidden;과 함께 text-overflow: ellipsis;를 사용하면 텍스트가 잘리고 말줄임표(...)가 표시된다.

   .text {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }

3. 스크롤 가능한 콘텐츠 박스
   특정 요소 안에 긴 콘텐츠가 있을 때 자동으로 스크롤바를 만들고 싶은 경우 overflow: auto;를 활용한다. 이를 통해 유저가 필요한 부분만 스크롤할 수 있게 한다.

.scroll-box {
  width: 300px;
  height: 200px;
  overflow: auto;
}

 

 정리

overflow 속성은 레이아웃에서 넘치는 콘텐츠를 다루는 중요한 속성이다.

이를 적절하게 사용하면 가독성과 사용자 경험을 향상시킬 수 있다.

visible, hidden, scroll, auto와 같은 값들의 차이를 이해하고,

상황에 맞게 사용하는 것이 중요할 거 같다.