CSS Overflow 속성에 대해서

최근에 개발하다가 특정 요소의 overflow-y에는 값을 지정하지 않고, overflow-x에만 auto를 지정했는데, 해당 요소에서 overflow-y가 기본값 visible이 아닌 auto로 동작하는 것 같아서 무엇이 잘못됐는지를 한참 고민한 적이 있었어요. 알고 보니 overflow-x: auto, overflow-y: visible은 overflow-x: auto, overflow-y: auto와 동일하게 동작한다고 하더군요. 그 근거를 아래 4번째 항목에 정리해두었으니 해당 내용만 보고 싶으신 분들은 4번째 항목만 보시면 돼요. 1. 역할 overflow 속성은 콘텐츠가 요소의 상자를 벗어났을 때 어떻게 표시되어야 하는지를 결정하는 속성이에요. 2. 값 사용할 수 있는 값에는 visible(기본값) | hidden | clip | scroll | auto가 있어요. - visible: 콘텐츠를 자르지 않고 요소의 상자 밖에도 그릴 수 있어요. - hidden: 콘텐츠를 요소의 상자에 맞춰 잘라내며, 스크롤바를 제공하지 않고, 스크롤 할 방법(드래그, 마우스 휠 등)도 지원하지 않아요. 다만, 코드를 사용해 스크롤 할 수는 있어요. (Element.scrollTop 또는 Element.scrollLeft 속성 사용) - clip: hidden과 마찬가지로, 콘텐츠를 요소의 상자에 맞춰 잘라내며, 스크롤바를 제공하지 않고, 스크롤 할 방법(드래그, 마우스 휠 등)도 지원하지 않아요. hidden과 다르게, 코드를 사용해도 스크롤 할 수 없어요. - scroll: 콘텐츠를 요소의 상자에 맞춰 잘라내며, 콘텐츠를 실제로 잘라냈는가에 상관없이 항상 스크롤바를 노출해요. - auto: 콘텐츠가 요소의 상자에 들어간다면 visible과 동일하게 보이지만, 콘텐츠가 넘칠 때는 스크롤바를 노출해요. 3. 구문 overflow 속성은 값을 하나 또는 두 개를 사용해서 지정할 수 있는데요, 두 개를 사용한 경우 첫 번째 값은 overflow-x, 두 번째 값은 overflow-y를 지정해요. 하나만 사용하면 지정한 값을 양 축 모두에 적용해요. - overflow: visible clip은 overflow-x: visible, overflow-y: clip과 동일해요. - overflow: visible은 overflow-x: visible, overflow-y: visible과 동일해요. 4. overflow-x와 overflow-y의 관계 W3C CSS Overflow Module Level 3 명세(https://www.w3.org/TR/css-overflow-3/)를 따르면, "The visible/clip values of overflow compute to auto/hidden (respectively) if one of overflow-x or overflow-y is neither visible nor clip."이라고 해요. 다시 말해, overflow-x에 visible을 지정하고 overflow-y에는 visible/clip 이외의 값을 지정하는 경우, overflow-x의 값은 auto로 계산되고, overflow-x에 clip을 지정하고 overflow-y에는 visible/clip 이외의 값을 지정하는 경우, overflow-y의 값은 hidden으로 계산돼요. - overflow-x: visible, overflow-y: auto -> overflow-x: auto, overflow-y: auto - overflow-x: visible, overflow-y: scroll -> overflow-x: auto, overflow-y: scroll - overflow-x: visible, overflow-y: hidden -> overflow-x: auto, overflow-y: hidden - overflow-x: clip, overflow-y: auto -> overflow-x: hidden, overflow-y: auto - overflow-x: clip, overflow-y: scroll -> overflow-x: hidden, overflow-y: scroll - overflow-x: clip, overflow-y: hidden -> overflow-x: hidden, overflow-y: hidden