CSS 상자 모델 개념에 따르면 페이지의 모든 요소는 직사각형 상자입니다. 이러한 상자의 크기, 위치 및 동작은 모두 CSS를 사용하여 제어할 수 있습니다. 동작이란 상자 내부와 외부의 내용물이 변경될 때 처리 방법을 의미합니다. 예를 들어, 상자의 높이를 설정하지 않으면 상자의 높이는 내용에 맞게 필요에 따라 커집니다. 하지만 상자의 높이나 너비를 지정했는데 상자 안의 내용이 이를 초과하면 어떻게 될까요? 이제 이 상황을 처리하는 방법을 지정할 수 있는 CSS 오버플로 속성을 추가할 때입니다.
오버플로 속성 에는 표시(기본값), 숨김, 스크롤 및 자동이라는 네 가지 값이 있습니다. 또한 오버플로에는 거의 사용되지 않는 두 가지 자매 속성인 Overflow-y와 Overflow-x도 있습니다.
이러한 각 값을 살펴보고 일반적인 사용법과 기술에 대해 논의해 보겠습니다.
보이는
오버플로 속성을 설정하지 않으면 기본 오버플로 속성 값이 표시됩니다. 따라서 일반적으로 다른 곳에 설정된 값을 재정의하려는 경우가 아니면 오버플로 속성을 특별히 표시로 설정할 이유가 없습니다.
여기서 기억해야 할 중요한 점은 상자 외부의 콘텐츠가 표시되더라도 해당 콘텐츠가 페이지의 작업 흐름에 영향을 주지 않는다는 것입니다. 예를 들어:
일반적으로 말해서 내용이 텍스트인 상자에 대해서는 적어도 고정 높이를 설정할 필요가 없으므로 이러한 상황이 발생하지 않습니다.
숨겨진
표시되는 기본값의 반대 값은 숨겨집니다. 상자 밖의 모든 것을 숨길 것입니다.
이는 콘텐츠 오버플로로 인해 일부 레이아웃 문제를 일으킬 수 있는 동적 콘텐츠를 처리하는 데 정말 유용합니다. 하지만 이 방법을 사용하여 숨겨진 콘텐츠는 (소스 코드를 확인하지 않는 한) 전혀 표시되지 않는다는 점을 기억하세요. 예를 들어, 일부 사용자는 브라우저의 기본 글꼴을 예상보다 크게 설정하고 일부 텍스트를 상자 밖으로 밀어내어 완전히 숨깁니다.