오버플로우란 무엇인가요? (What is overflow?)
CSS의 모든 것은 상자(box)입니다. 여러분은 width나 height 같은 값을 할당하여 이 상자들의 크기를 제한할 수 있죠. 오버플로우는 상자에 들어가기에는 내용물이 너무 많을 때 발생합니다. CSS는 이 오버플로우를 관리하기 위한 다양한 도구들을 제공합니다. CSS 레이아웃을 더 깊이 배우고 코드를 작성하다 보면, 이런 오버플로우 상황을 정말 자주 만나게 될 거예요.
💡 강사의 실무 팁!
"내용이 상자 밖으로 삐져나왔어요!" 초보 시절에 가장 많이 겪는 버그 중 하나입니다. 주로 높이(height)를 고정된 픽셀(px)로 줬을 때 텍스트가 길어지면서 발생하죠. 그래서 실무에서는 텍스트가 들어가는 박스에height를 고정하는 것을 극도로 조심해야 합니다!
CSS는 "데이터 손실(data loss)"을 피하려고 노력합니다
오버플로우가 발생했을 때 CSS의 기본 동작이 어떤지 보여주는 두 가지 예제를 살펴볼까요?
첫 번째 예제는 height를 설정하여 크기를 제한한 박스입니다. 박스 안의 콘텐츠가 사용 가능한 공간을 초과했기 때문에, 상자를 넘쳐흐르며(overflow) 그 아래에 있는 문단까지 침범해버립니다.
<div class="box">
This box has a height and a width. This means that if there is too much
content to be displayed within the assigned height, there will be an overflow
situation. If overflow is set to hidden then any overflow will not be visible.
</div>
<p>This content is outside of the box.</p>.box {
border: 1px solid #333333;
width: 250px;
height: 100px;
}두 번째 예제는 상자 안에 아주 긴 단어가 하나 들어있는 상황입니다. 상자가 이 단어를 품기에는 너무 작게 만들어졌고, 결국 단어가 상자 밖으로 뚫고 나와버리네요.
<div class="word">Overflow</div>.word {
border: 1px solid #333333;
width: 100px;
font-size: 250%;
}여러분이 보시기엔 CSS가 왜 이렇게 지저분한 방식으로 동작하는지 의문이 들 수 있습니다. 의도한 컨테이너 밖으로 콘텐츠가 삐져나와서 엉망진창으로 보이잖아요? 그냥 넘치는 콘텐츠를 싹 숨겨버리면 안 될까요? 아니면 모든 콘텐츠가 딱 맞게 들어가도록 컨테이너 크기를 자동으로 늘려주면 안 되는 걸까요?
이유가 있습니다. 가능하면 CSS는 절대 콘텐츠를 숨기지 않습니다. 콘텐츠를 숨기는 것은 곧 데이터 손실(data loss)을 의미하기 때문이죠. 데이터 손실이 무서운 점은 여러분이나 웹사이트 방문자가 무언가 사라졌다는 사실조차 눈치채지 못할 수 있다는 겁니다. 만약 폼(form)의 '제출(Submit)' 버튼이 짤려서 사라져 버렸고 아무도 폼을 제출할 수 없게 된다면, 이건 비즈니스적으로 엄청난 문제가 되겠죠!
그래서 대신에, CSS는 오버플로우를 눈에 확 띄게(visible) 만듭니다. 엉망으로 삐져나온 걸 봐야 "아, 여기에 문제가 있구나!" 하고 알아차릴 가능성이 높으니까요. 최악의 경우라도 사이트 방문자가 "내용이 서로 겹쳐서 보여요"라고 여러분에게 알려줄 수 있습니다.
여러분이 박스의 width나 height를 제한했다면, CSS는 여러분이 무슨 일을 하고 있는지 잘 알고 있다고 믿어줍니다. 즉, 오버플로우가 발생할 가능성까지 여러분이 직접 컨트롤할 것이라고 가정하는 것이죠. 일반적으로 텍스트가 들어가는 박스의 블록 방향 크기(주로 height)를 제한하는 것은 문제를 일으키기 쉽습니다. 여러분이 디자인할 때 예상했던 것보다 실제 텍스트가 훨씬 더 길 수도 있고, 혹은 사용자가 브라우저 설정에서 글꼴 크기를 크게 키웠을 수도 있으니까요.
overflow 속성 (The overflow property)
overflow 속성을 사용하면 넘치는 콘텐츠를 브라우저가 어떻게 처리해야 할지 구체적으로 지시할 수 있습니다. overflow 속성의 기본값은 visible입니다. 이 기본 설정 때문에 콘텐츠가 상자를 넘치면 우리 눈에 그대로 보이게 되는 것이죠.
넘치는 콘텐츠 숨기기 (Hiding overflowing content)
넘치는 콘텐츠를 안 보이게 숨기고 싶다면 overflow: hidden을 설정하면 됩니다. 말 그대로 오버플로우를 '숨김' 처리합니다. 단, 이 설정은 일부 콘텐츠를 영원히 안 보이게 만들 수 있으므로 주의해야 합니다. 콘텐츠가 안 보여도 사용상 문제가 없는 경우에만 사용하셔야 합니다.
<div class="box">
This box has a height and a width. This means that if there is too much
content to be displayed within the assigned height, there will be an overflow
situation. If overflow is set to hidden then any overflow will not be visible.
</div>
<p>This content is outside of the box.</p>.box {
border: 1px solid #333333;
width: 250px;
height: 100px;
overflow: hidden;
}위의 예제를 MDN Playground에서 visible로 바꿨다가 다시 hidden으로 바꿔보면서 어떤 차이가 있는지 눈으로 확인해 보세요.
💡 강사의 실무 팁!
overflow: hidden은 언제 자주 쓰일까요?
1) 프로필 이미지 같은 네모난 사진을 동그랗게 자르고 싶을 때, 부모 박스에border-radius: 50%를 주고overflow: hidden을 주면 부모의 둥근 모서리 밖으로 삐져나간 이미지가 싹 잘리면서 깔끔한 원형이 됩니다.
2) 웹사이트 전체에서 가로 스크롤이 생기는 버그를 막을 때,body { overflow-x: hidden; }을 주어 임시방편으로 막기도 합니다. (물론 근본 원인을 찾는 게 더 중요하지만요!)
넘치는 콘텐츠 스크롤하기 (Scrolling overflowing content)
콘텐츠를 잘라서 숨기지 말고, 사용자가 스크롤을 내려서 모든 내용을 읽을 수 있게 해주고 싶다면 어떻게 할까요? overflow: scroll을 설정하면 됩니다.
다만 알아두실 점은, 이 속성을 주면 콘텐츠가 넘치지 않아서 스크롤이 필요 없는 상황에서도 브라우저가 항상 스크롤바를 띄워놓는다는 것입니다. 내용물의 양에 따라 스크롤바가 생겼다 사라졌다 하면서 레이아웃이 덜컹거리는 현상을 막고, 항상 일관된 화면을 유지하고 싶을 때 장점이 될 수 있습니다.
아래 예제를 볼까요? box <div> 안에 있는 텍스트를 좀 지워보세요. 텍스트가 짧아져서 스크롤할 필요가 없어져도 우측과 하단에 스크롤바 트랙이 꿋꿋하게 남아있는 것을 보실 수 있을 겁니다.
<div class="box">
This box has a height and a width. This means that if there is too much
content to be displayed within the assigned height, there will be an overflow
situation. If overflow is set to hidden then any overflow will not be visible.
</div>
<p>This content is outside of the box.</p>.box {
border: 1px solid #333333;
width: 250px;
height: 100px;
overflow: scroll;
}📝 참고사항 (Note):
스크롤바가 화면에 표시되는 방식은 여러분이 쓰는 운영체제(Windows, macOS, Linux 등)마다 다릅니다. 이 예제에서 항상 스크롤바 트랙이 보이게 하려면 운영체제나 브라우저 설정에서 '스크롤바 항상 표시'를 켜두어야 할 수도 있습니다. (최근 macOS나 모바일 브라우저는 스크롤할 때만 스크롤바가 나타나는 방식이 기본값이기 때문이죠!)
위 예제에서는 세로(y축) 방향으로만 스크롤이 필요하지만, 가로/세로 양쪽 모두 스크롤바가 생겼습니다. 만약 세로 방향으로만 스크롤바를 제어하고 싶다면 overflow-y 속성을 사용해서 overflow-y: scroll로 설정하면 됩니다.
마찬가지로 가로 방향(x축) 스크롤을 넣고 싶다면 overflow-x를 사용하면 됩니다. 하지만, 아주 긴 영단어 같은 것이 삐져나가는 걸 막기 위해서 가로 스크롤을 넣는 것은 그다지 권장하는 방법이 아닙니다! 작은 박스 안에 긴 단어가 있다면 word-break나 overflow-wrap 속성을 사용해서 단어가 강제로 줄바꿈되도록 하는 것이 훨씬 좋습니다.
<div class="word">Overflow</div>.word {
border: 5px solid #333333;
width: 100px;
font-size: 250%;
overflow-x: scroll;
}scroll 값을 줬을 때와 마찬가지로, 가로 스크롤이 필요하든 필요하지 않든 스크롤 차원이 설정되면 스크롤바는 항상 나타나게 됩니다.
📝 참고사항 (Note):
overflow속성에 값을 두 개 전달하면 x축과 y축 스크롤을 한 번에 따로따로 지정할 수 있습니다. 예를 들어overflow: scroll hidden이라고 적으면, 첫 번째 값은overflow-x에 적용되어 가로 스크롤이 생기고, 두 번째 값은overflow-y에 적용되어 세로 방향 넘침은 숨겨집니다. 값을 하나만 적으면 양축에 모두 적용됩니다.
필요할 때만 스크롤바 표시하기 (Only displaying scrollbars when needed)
"콘텐츠가 상자를 넘칠 때만 스크롤바가 생기고, 평소에는 안 보이게 할 순 없나요?"
당연히 있습니다! 바로 overflow: auto를 사용하면 됩니다. 이렇게 하면 스크롤바를 띄울지 말지 결정하는 권한을 브라우저에게 넘기게 됩니다. 브라우저가 똑똑하게 판단해서 내용이 넘치면 스크롤바를 만들어주고, 공간이 충분하면 스크롤바를 지워줍니다.
아래 예제에서 텍스트 내용을 줄여서 상자 안에 다 들어가게 만들어 보세요. 스크롤바가 마법처럼 싹 사라지는 걸 볼 수 있습니다!
<div class="box">
This box has a height and a width. This means that if there is too much
content to be displayed within the assigned height, there will be an overflow
situation. If overflow is set to hidden then any overflow will not be visible.
</div>
<p>This content is outside of the box.</p>.box {
border: 1px solid #333333;
width: 250px;
height: 100px;
overflow: auto;
}💡 강사의 실무 팁!
네, 눈치채셨겠지만 실무에서 스크롤을 구현할 때는 99%overflow: auto를 사용합니다!scroll은 디자인상 빈 스크롤바 트랙이 보여서 예쁘지 않기 때문에, 내용물에 따라 똑똑하게 반응하는auto가 최고랍니다.
웹 디자인에서 원치 않는 오버플로우 피하기 (Unwanted overflow in web design)
나중에 CSS 레이아웃(CSS layout) 모듈에서 자세히 배우겠지만, 현대적인 레이아웃 기법들(Flexbox, Grid 등)은 오버플로우를 아주 똑똑하게 관리합니다. 이 최신 기술들은 "웹 페이지에 콘텐츠가 얼마나 들어올지"를 굳이 가정하지 않아도 자연스럽게 작동하도록 설계되어 있습니다.
하지만 과거에는 그렇지 않았습니다. 옛날에는 상자들의 아래쪽 라인을 딱 맞추기 위해 높이를 고정(fixed-height)해서 사이트를 만들곤 했죠. 이런 방식은 엄청나게 부서지기 쉬운(fragile) 구조였습니다.
만약 여러분이 어떤 웹사이트를 보다가 텍스트가 다른 상자를 침범해서 겹쳐 있는 끔찍한 모습을 발견한다면, 이제 "아하, 저건 십중팔구 오버플로우 문제구나!" 하고 알아볼 수 있을 것입니다. 가장 이상적인 해결책은 고정된 높이를 가진 컨테이너에 의존하지 않도록 레이아웃의 구조를 리팩토링(개선)하는 것입니다.
웹 사이트를 개발할 때는 항상 오버플로우의 가능성을 염두에 두어야 합니다. 콘텐츠 내용이 아주 많을 때와 아주 적을 때를 모두 테스트하세요. 글꼴 크기도 최소 두 단계 이상 키우거나 줄여보면서 CSS가 깨지지 않고 튼튼하게(robust) 잘 버티는지 확인하세요.
콘텐츠를 숨기거나(hidden), 스크롤바를 억지로 넣기 위해(scroll/auto) overflow 값을 변경하는 것은, 스크롤되는 박스를 의도적으로 만들어야 하는 특수한 상황에서만 사용하는 것이 좋습니다.
요약 (Summary)
이 레슨을 통해 오버플로우라는 아주 중요한 개념을 소개했습니다. CSS의 기본 철학은 '오버플로우된 콘텐츠를 안 보이게 숨겨버리는 것을 피한다'는 것을 확실히 이해하셨을 겁니다. 잠재적인 오버플로우를 여러분이 직접 제어할 수 있다는 것도 배웠고, 의도치 않게 레이아웃이 망가지는 오버플로우가 발생하지 않도록 꼼꼼하게 테스트해야 한다는 점도 알게 되셨죠!
