CSS Overflow Module Level 3
W3C
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
다음 내용이 궁금하다면?
이미 회원이신가요?
2023년 10월 3일 오전 9:33
댓글 0
함께 읽은 게시물
이번 WWDC에서 애플이 발표한 새로운 디자인 시스템인 Liquid Glass도 역시 호불호가 있겠지만, 개인적으로는 가장 좋아했던 Mac OS X 첫 출시때 디자인인 Aqua 디자인과 닮아서 맘에든다.
... 더 보기-
< AI의 '환각'보다 무서운, 내가 만드는 '환상' >
1. AI가 없는 삶은 이제 상상할 수 없다. 전기와 인터넷처럼. 편리하지만 또 부작용도 있다. '환각'과 '환상'이다.
구현패턴으로 DB사용비용을 10배줄이기
코
... 더 보기
알람 소리에 반사적으로 일어나서 준비를 마치고 정신없이 이동하면 어느새 사무실 책상에 앉아 있게 됩니다. 동료들과 인사를 마치고 컴퓨터를 켜는 순간 업무는 시작되지요.
... 더 보기🧊 급격하게 얼어붙고 있는 해외 취업 시장 🥶
최근 한국에 아는 개발자 분께서 미국에서 근무할 수 있는 포지션의 최종 면접을 앞두고 있었는데 갑자기 채용이 무기한 연기되었다는 황당한 소식을 듣게 되셨습니다. 다른 개발자 분께서는 심지어 최종 합격을 하고 리로케이션 패키지까지 받았는데, 느닷없이 오퍼가 취
... 더 보기
