오버플로

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 속성은 기기 뷰포트의 가로축을 따라 오버플로를 제어하므로 왼쪽과 오른쪽으로 스크롤합니다.

스크롤 방향의 논리적 속성

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이 있습니다. 이렇게 하면 사용자의 환경설정을 따르고 필요한 경우 스크롤바를 표시하지만 기본적으로 숨기며 스크롤은 사용자와 브라우저에 맡깁니다.

스크롤 및 오버플로

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

스크롤 및 접근성

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

스크롤 상자가 포커스를 수락하도록 하려면 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

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

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

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

overscroll-behavior

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

이해도 확인

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

리소스

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