오버플로

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;
}

오버플로 속성 사용

오버플로 속성은 요소에 설정되어 하위 요소에 사용 가능한 공간보다 더 많은 공간이 필요한 경우 발생하는 상황을 제어합니다. 이는 의도적인 것일 수 있습니다. 예를 들어 사용자가 특정 크기로 클리핑된 큰 이미지를 이동하는 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 동작 중 상당수는 스크롤 막대를 도입하지만 오버플로 컨테이너의 스크롤을 제어하는 데 도움이 되는 몇 가지 특정 스크롤 동작과 속성이 있습니다.

스크롤 및 접근성

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

스크롤 상자가 포커스를 수락하도록 하려면 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가 상단에 있도록 하는 스크롤러 승격을 사용하면 됩니다. 루트 스크롤러와 중첩된 암시적 스크롤러를 여기에서 경험해 보세요.

스크롤바 스타일 지정

스크롤바를 스타일링하여 사이트 디자인에 통합할 수 있습니다. scrollbar-color는 스크롤바의 엄지와 거터의 색상을 설정합니다.

스크롤 막대의 너비를 변경하려면 scrollbar-width을 사용합니다. 임의의 길이로 설정할 수는 없지만 thin 스크롤바 또는 none를 원하는지 지정할 수 있습니다.

scroll-behavior

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

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

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

overscroll-behavior

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

스크롤 스냅

일반적으로 스크롤이 부드러워 스크롤포트 내에서 원하는 위치에 콘텐츠를 배치할 수 있습니다. 이미지 갤러리나 페이지 또는 슬라이드를 에뮬레이션하는 콘텐츠와 같은 디자인의 경우 콘텐츠가 스크롤 포트에 스냅되도록 할 수 있습니다.

스크롤 컨테이너 설정

스크롤 스냅을 사용 설정하려면 스크롤 컨테이너에 scroll-snap-type를 추가합니다. 먼저 스크롤 스냅이 발생할 축을 정의합니다. 논리적 속성 (block 또는 inline), 물리적 속성 (x 또는 y) 또는 both일 수 있습니다.

스크롤 스냅이 얼마나 엄격해야 하는지도 정의할 수 있습니다. 기본 엄격성은 proximity이며, 이는 스크롤 컨테이너가 가능한 경우 스냅을 시도한다는 의미입니다. mandatory로 엄격성을 설정하여 스크롤 컨테이너가 항상 스냅되도록 할 수도 있습니다.

.scroll-container {
    scroll-snap-type: block mandatory;
}

스크롤 스냅은 스크롤 컨테이너의 전체 경계 내에서 요소를 정렬합니다. 하지만 스크롤 컨테이너의 일부가 표시되지 않으면 어떻게 될까요? 예를 들어 스크롤 컨테이너의 일부를 오버레이하는 고정 헤더가 있을 수 있습니다. 맞춰진 요소를 스크롤 컨테이너의 표시된 부분에 정렬하려면 scroll-padding를 설정하면 됩니다.

스냅 가능 요소 제어

요소를 스냅 가능하게 만들려면 scroll-snap-align 속성을 start, end 또는 center로 설정합니다. 스크롤 스냅 방향이 both인 경우 두 값을 설정할 수 있습니다. 요소의 가장자리가 스크롤포트의 가장자리에 정렬되는지 아니면 중앙에 배치되는지를 설정합니다.

scroll-margin를 사용하여 스냅된 요소의 가장자리 주변 간격을 조정할 수 있습니다.

scroll-margin는 요소를 스크롤할 때 패딩을 설정하는 데도 사용됩니다.

스크롤을 더 고정하려면 스크롤 컨테이너의 항목에 scroll-snap-stop: always를 추가하면 됩니다. 한 번의 스크롤로 여러 항목을 지나치는 것을 방지하지는 않습니다. 관성으로 스크롤이 계속되는 방식으로 스크롤 동작을 종료하면 스크롤이 계속되지 않고 다음 스냅 위치에서 종료됩니다.

이해도 확인

리소스

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