오버플로

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 속성 컨트롤은 기기 표시 영역의 가로축을 따라 오버플로가 발생하므로 왼쪽과 오른쪽으로 스크롤됩니다.

스크롤 방향의 논리적 속성

브라우저 지원

• <ph type="x-smartling-placeholder"></ph> x
• <ph type="x-smartling-placeholder"></ph> x
• <ph type="x-smartling-placeholder"></ph> 69개
• <ph type="x-smartling-placeholder"></ph> 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입니다. 이렇게 하면 사용자의 환경설정을 존중하고 필요한 경우 스크롤바를 표시하지만, 기본적으로 스크롤바를 숨기고 사용자와 브라우저에 스크롤할 책임을 부여합니다.

를 통해 개인정보처리방침을 정의할 수 있습니다.

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

스크롤 및 오버플로

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

스크롤 및 접근성

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

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

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

그런 다음 CSS를 사용하여 상자에 포커스가 있음을 나타내고 outline 속성을 사용하여 이제 스크롤이 가능하다는 시각적 단서를 제공합니다.

CSS를 사용하여 접근성 적용에서 애드리안 로젤리는 CSS가 접근성 저하를 방지하는 데 어떻게 도움이 되는지 보여줍니다. 예를 들어 올바른 속성이 사용된 경우에만 스크롤을 사용 설정하고 포커스 표시기를 추가하는 경우입니다. 다음 규칙은 tabindex, aria-labelledby, role 속성이 있는 경우에만 상자를 스크롤할 수 있도록 합니다.

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

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

박스 모델 내 스크롤바 위치 지정

스크롤바는 패딩 상자 내의 공간을 차지하며 overlaid가 아닌 inline인 경우 공간을 두고 경쟁할 수 있습니다. 박스 모델 모듈은 이러한 레이아웃 변경의 잠재적인 소스를 더 확장합니다.

root-scroller와 암시적 스크롤러 비교

일부 스크롤러에는 특히 모바일 및 하이브리드 애플리케이션용으로 개발할 때 당겨서 새로고침 동작과 기타 특수 동작이 있을 수 있습니다. 이 스크롤 동작은 루트 스크롤러에서 발생합니다. 한 페이지에는 루트 스크롤러가 하나만 있습니다. 기본적으로 documentElement는 페이지의 루트 스크롤러이지만, 루트 스크롤러를 변경할 경우 특정 동작을 documentElement 이외의 스크롤러에도 적용할 수 있습니다. 이 새 스크롤러를 암시적 루트 스크롤러라고 합니다.

루트 스크롤러를 만들려면 스크롤러 프로모션이라는 것을 사용할 수 있습니다. 컨테이너를 고정 위치로 배치하고 전체 표시 영역을 덮고 스크롤러와 함께 Z-색인이 상단에 위치하도록 하면 됩니다. 여기에서 루트 스크롤러와 중첩된 암시적 스크롤러를 비교해 보세요.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 이 동영상은 바운스 동작과 새로운 스타일 지정 기능인
가 포함된 루트 스크롤러를 보여줍니다. 향상된 스크롤 동작이 없는 암시적 스크롤러를 스크롤하는 것과 비교됩니다.

scroll-behavior

브라우저 지원

• <ph type="x-smartling-placeholder"></ph> 61
• <ph type="x-smartling-placeholder"></ph> 79개
• <ph type="x-smartling-placeholder"></ph> 36
• <ph type="x-smartling-placeholder"></ph> 15.4

소스

scroll-behavior를 사용하면 요소에 대한 브라우저 제어 스크롤을 선택할 수 있습니다. 이렇게 하면 .scrollTo() 또는 링크와 같은 인페이지 탐색 방법을 지정할 수 있습니다.

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

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

오버스크롤 동작

브라우저 지원

• <ph type="x-smartling-placeholder"></ph> 63
• <ph type="x-smartling-placeholder"></ph> 18일
• <ph type="x-smartling-placeholder"></ph> 59명
• <ph type="x-smartling-placeholder"></ph> 16

소스

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

이해도 확인

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

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

true

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

거짓

텍스트 오버플로는 일반적으로 인라인 오버플로와 관련이 있으며, 요소 오버플로는 블록 오버플로와 관련이 있습니다.

overflow 속성은 2개의 키워드를 허용하며, 첫 번째 키워드는 어떤 축에 관한 것인가요?

가로

🎉

카테고리

두 개의 약식 값을 전달할 때 첫 번째 값은 가로 값인 경우가 대부분입니다.

스크롤바를 표시하고 인라인으로 표시할 때 박스 모델에서 스크롤바가 소비하는 공간은 무엇인가요?

콘텐츠 상자

다시 시도해 보세요.

패딩 상자

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

테두리 상자

다시 시도해 보세요.

여백 상자

다시 시도해 보세요.

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

scroll-behavior

다시 시도해 보세요.

scroll-hint

다시 시도해 보세요.

overscroll-behavior

이 속성을 contain로 설정하면 스크롤을 트랩합니다.

scroll-padding

다시 시도해 보세요.

overscroll-effect

다시 시도해 보세요.

리소스

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