오버플로

CSS 팟캐스트 - 034: 오버플로

콘텐츠가 상위 요소를 벗어나는 경우 이를 처리하는 방법에는 여러 가지가 있습니다. 스크롤하여 여백을 추가하거나, 넘쳐나는 가장자리를 자르거나, 말줄임표로 잘린 부분을 표시하는 등 다양한 작업을 할 수 있습니다. 오버플로는 휴대전화 애플리케이션과 여러 화면 크기를 개발할 때 특히 고려해야 합니다.

CSS에는 두 가지 다른 클리핑 옵션이 있습니다. text-overflow는 개별 텍스트 줄에 도움이 되며 overflow 속성은 박스 모델의 오버플로를 제어하는 데 도움이 됩니다.

text-overflow을 사용한 단일 줄 오버플로

텍스트 노드가 포함된 요소(예: 단락, <p>)에 text-overflow 속성을 사용합니다. 텍스트가 요소의 사용 가능한 공간에 맞지 않을 때 텍스트가 표시되는 방식을 지정합니다. 페이지에서 볼 수 있는 모든 HTML 텍스트는 텍스트 노드에 있습니다. text-overflow를 사용하려면 줄바꿈되지 않은 텍스트 줄이 하나 필요하므로 overflow를 hidden로 설정하고 줄바꿈을 방지하는 white-space 값도 있어야 합니다.

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

오버플로 속성 사용

Overflow 속성은 하위 요소에 사용 가능한 공간보다 더 많은 공간이 필요할 때 어떤 일이 일어나는지 제어하기 위해 요소에 설정됩니다. 이는 의도적으로 발생할 수 있습니다. 예를 들어 Google 지도와 같은 양방향 지도에서 사용자가 특정 크기로 잘린 큰 이미지를 화면에서 좌우로 이동하는 경우입니다. 사용자가 텍스트 풍선에 맞지 않는 긴 메시지를 입력하는 채팅 애플리케이션과 같이 의도치 않게 줄바꿈이 발생할 수도 있습니다.

오버플로는 두 부분으로 생각할 수 있습니다. 상위 요소에는 변경되지 않는 확고하게 제약된 공간이 있습니다. 이를 창이라고 생각할 수 있습니다. 하위 요소는 상위 요소에서 더 많은 공간을 원하는 콘텐츠입니다. 창문을 통해 바라보는 풍경이라고 생각하면 됩니다. 오버플로를 관리하면 창이 콘텐츠를 프레이밍하는 방식을 지정하는 데 도움이 됩니다.

세로 및 가로 축에서 스크롤

overflow-y 속성은 기기 뷰포트의 세로 축을 따라 실제 오버플로를 제어하므로 위아래로 스크롤합니다.

overflow-x 속성은 기기 뷰포트의 가로축을 따라 오버플로를 제어하므로 왼쪽과 오른쪽으로 스크롤합니다.

스크롤 방향의 논리적 속성

Browser Support

• x
• x
• 69
• x

Source

overflow-inline 및 overflow-block 속성은 문서 방향 및 쓰기 모드를 기반으로 오버플로를 설정합니다.

overflow 약어

overflow 바로가기는 한 줄에 overflow-x 및 overflow-y 스타일을 모두 설정합니다.

overflow: hidden scroll;

키워드가 두 개 지정되면 첫 번째 키워드는 overflow-x에, 두 번째 키워드는 overflow-y에 적용됩니다. 그렇지 않으면 overflow-x와 overflow-y 모두 동일한 값을 사용합니다.

값

overflow 속성에 사용할 수 있는 값 및 키워드를 자세히 살펴보겠습니다.

overflow: visible(기본)

속성을 설정하지 않으면 overflow: visible가 웹의 기본값입니다. 이렇게 하면 콘텐츠가 의도치 않게 숨겨지지 않고 '콘텐츠 숨기지 않기' 또는 '정확한 레이아웃의 안전한 레이아웃'이라는 핵심 원칙을 준수할 수 있습니다.

overflow: hidden

overflow: hidden를 사용하면 콘텐츠가 지정된 방향으로 잘리며 이를 표시하기 위한 스크롤바가 제공되지 않습니다.

overflow: scroll

overflow: scroll를 사용하면 스크롤바를 사용해 사용자가 콘텐츠를 스크롤할 수 있습니다. 현재 콘텐츠가 오버플로되지 않더라도 스크롤바가 표시됩니다. 이는 향후 컨테이너가 크기 조절을 기반으로 스크롤 가능해질 수 있는 경우 향후 레이아웃 전환을 줄이고 스크롤 가능한 영역을 사용자에게 시각적으로 준비하는 데 유용한 방법입니다.

overflow: clip

overflow: hidden와 마찬가지로 overflow: clip가 있는 콘텐츠는 요소의 패딩 상자에 잘립니다. clip와 hidden의 차이점은 clip 키워드가 프로그래매틱 스크롤을 비롯한 모든 스크롤을 금지한다는 점입니다.

overflow: auto

마지막으로 가장 많이 사용되는 값인 overflow: auto이 있습니다. 이렇게 하면 사용자의 환경설정을 따르고 필요한 경우 스크롤바를 표시하지만 기본적으로 숨기며 스크롤은 사용자와 브라우저에 맡깁니다.

참고: visible가 아닌 값으로 overflow 속성을 사용하면 블록 형식 지정 컨텍스트가 생성됩니다.

스크롤 및 오버플로

이러한 overflow 동작의 대부분은 스크롤바를 도입하지만 오버플로 컨테이너에서 스크롤을 제어하는 데 도움이 되는 몇 가지 특정 스크롤 동작과 속성이 있습니다.

스크롤 및 접근성

키보드 사용자가 상자에 탭한 다음 화살표 키를 사용하여 스크롤할 수 있도록 스크롤 가능한 영역에서 포커스를 받을 수 있는지 확인하는 것이 중요합니다.

스크롤 상자가 포커스를 수락하도록 하려면 tabindex="0", aria-labelledby 속성이 있는 이름, 적절한 role 속성을 추가합니다. 예를 들면 다음과 같습니다.

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

그런 다음 CSS를 사용하여 상자에 포커스가 있음을 나타낼 수 있습니다. outline 속성을 사용하여 이제 스크롤할 수 있음을 시각적으로 알릴 수 있습니다.

CSS를 사용하여 접근성을 적용에서 Adrian Roselli는 CSS가 접근성 회귀를 방지하는 데 어떻게 도움이 되는지 보여줍니다. 예를 들어 올바른 속성이 사용된 경우에만 스크롤을 사용 설정하고 포커스 표시기를 추가합니다. 다음 규칙은 상자에 tabindex, aria-labelledby, role 속성이 있는 경우에만 상자를 스크롤 가능하게 만듭니다.

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

상자 모델 내 스크롤바 위치 지정

스크롤 막대는 패딩 상자 내에서 공간을 차지하며 overlaid가 아닌 inline인 경우 공간을 놓고 경쟁할 수 있습니다. 상자 모델 모듈에서는 이러한 잠재적인 레이아웃 이동 소스에 대해 자세히 설명합니다.

root-scroller와 implicit-scroller 비교

특히 모바일 및 하이브리드 애플리케이션을 개발할 때 일부 스크롤러에 풀-투-리프레시 동작 및 기타 특수 동작이 있는 것을 볼 수 있습니다. 이 스크롤 동작은 루트 스크롤러에서 발생합니다. 페이지에는 루트 스크롤러가 하나만 있을 수 있습니다. 기본적으로 documentElement은 페이지의 루트 스크롤러이지만, 루트 스크롤러가 되는 요소를 변경하면 documentElement 이외의 스크롤러에 특수 동작을 적용할 수 있습니다. 이 새로운 스크롤러를 암시적 루트 스크롤러라고 합니다.

루트 스크롤러를 만들려면 컨테이너를 고정으로 배치하여 전체 표시 영역을 덮고 스크롤러와 함께 z-index가 가장 높은지 확인하는 스크롤러 승격을 사용하면 됩니다. 여기에서 루트 스크롤러와 중첩된 암시적 스크롤러를 비교해 보세요.

이 동영상에서는 향상된 스크롤 동작이 없는 암시적 스크롤러를 스크롤하는 것과 비교하여
반동 동작과 새로운 스타일 지정 기능이 있는 루트 스크롤러를 보여줍니다.

scroll-behavior

Browser Support

• 61
• 79
• 36
• 15.4

Source

scroll-behavior를 사용하면 요소로의 브라우저 제어 스크롤을 선택할 수 있습니다. 이렇게 하면 .scrollTo() 또는 링크와 같은 페이지 내 탐색이 처리되는 방식을 지정할 수 있습니다.

이는 특히 prefers-reduced-motion과 함께 사용하여 사용자 환경설정에 따라 스크롤 동작을 지정하는 경우에 유용합니다.

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

overscroll-behavior

Browser Support

• 63
• 18
• 59
• 16

Source

모달 오버레이의 끝에 도달한 후 계속 스크롤하여 오버레이 뒤에 있는 페이지가 이동한 적이 있다면 이는 스크롤 체이닝 또는 상위 스크롤 컨테이너로의 버블링입니다. overscroll-behavior 속성을 사용하면 상위 컨테이너로 오버플로 스크롤이 유출되는 것을 방지할 수 있습니다 (스크롤 체이닝이라고 함).

이해도 확인

오버플로에 대한 지식 테스트

텍스트 오버플로와 요소 오버플로는 동일한가요?

true

텍스트 오버플로는 요소 오버플로와 비교할 때 특별합니다.

거짓

텍스트 오버플로는 일반적으로 인라인 오버플로에 관한 것이고 요소 오버플로는 블록 오버플로에 관한 것입니다.

overflow 속성은 2개의 키워드를 허용합니다. 첫 번째 키워드는 어느 축에 관한 것인가요?

가로

🎉

카테고리

두 가지의 약어 값을 전달할 때는 거의 항상 첫 번째 값이 가로입니다.

스크롤바가 표시되고 인라인일 때 상자 모델의 어떤 공간을 사용하나요?

콘텐츠 상자

다시 시도해 보세요.

패딩 상자

overlay 모드의 스크롤바는 패딩과 겹치고 inline 모드에서는 패딩에 추가됩니다.

테두리 상자

다시 시도해 보세요.

margin box

다시 시도해 보세요.

중첩된 암시적 스크롤러에서 스크롤로 인한 추가 모멘텀을 가두려면 어떤 속성을 사용해야 하나요?

scroll-behavior

다시 시도해 보세요.

scroll-hint

다시 시도해 보세요.

overscroll-behavior

이 속성을 contain로 설정하면 스크롤이 중지됩니다.

scroll-padding

다시 시도해 보세요.

overscroll-effect

다시 시도해 보세요.

리소스

Smashing Magazine의 CSS에서 오버플로 및 데이터 손실