[Front-End] overflow 정리 ( CSS 문법 )

CSS에서 overflow는 요소의 내용이 해당 요소의 크기보다 클 때, 그 내용을 어떻게 처리할지를 결정하는 속성입니다.

이 속성에는 hidden, visible, scroll, auto 네 가지 값이 있으며 각각의 기능은 다음과 같습니다:

1. visible:

   • 기본값으로 설정되어 있습니다.
   • 요소의 크기보다 내용이 더 커지면 요소 밖으로 내용이 넘치게 됩니다. 그래서 "넘쳐 보이는" 상태가 됩니다.
   • 추가적인 스크롤바나 숨겨짐이 없습니다.

2. hidden:

   • 요소의 크기보다 내용이 넘칠 경우, 넘치는 부분은 보이지 않게 됩니다.
   • 요소 내부의 내용이 잘리지만 스크롤바는 표시되지 않습니다.
   • 잘려도 괜찮거나 요소 크기에 딱 맞게 내용을 표시하고 싶을 때 사용됩니다.

3. scroll:

   • 내용이 요소의 크기를 넘어가면 스크롤바가 항상 표시됩니다.
   • 실제로 넘치는 내용이 없더라도 스크롤바가 계속 보입니다.
   • 이 옵션은 언제나 스크롤 기능을 사용할 수 있도록 하고 싶을 때 유용합니다.

4. auto:

   • 요소의 내용이 크기보다 클 경우에만 스크롤바가 표시됩니다.
   • 넘치는 내용이 없으면 스크롤바는 나타나지 않습니다.
   • 자동으로 스크롤 기능이 필요할 때만 표시하므로 사용자 경험에 최적화할 때 유용합니다.

parent - child 요소간의 넘치는 영역에 대한 정리를 위해 사용되고, parent의 요소에 overflow를 정의하여 child를 제어합니다.

정리하자면, overflow를 통해 요소의 크기와 내용이 맞지 않을 때 어떻게 처리할지 결정할 수 있습니다.
hidden은 넘치는 부분을 숨기고, visible은 그대로 노출시키며, scroll은 항상 스크롤바를 표시하고, auto는 필요할 때만 스크롤바를 표시합니다.