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: hiddenoverflow: hidden를 사용하면 콘텐츠가 지정된 방향으로 잘리며 이를 표시하기 위한 스크롤바가 제공되지 않습니다.overflow: scrolloverflow: scroll는 사용자가 콘텐츠를 스크롤할 수 있도록 스크롤바를 사용 설정합니다. 현재 콘텐츠가 오버플로되지 않더라도 스크롤바는 표시됩니다. 이는 나중에 컨테이너가 스크롤 가능할 수 있는 경우(예: 크기 조절에 따라) 향후 레이아웃 변경을 줄이고 사용자가 스크롤 가능한 영역을 시각적으로 준비할 수 있는 좋은 방법입니다.overflow: clipoverflow: 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를 사용하여 접근성 적용에서 아드리안 로셀리는 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-색인이 생깁니다. 여기에서 루트 스크롤러와 중첩된 암시적 스크롤러를 비교해 보세요.
). 향상된 스크롤 동작이 없는 암시적 스크롤러를 스크롤하는 것과 비교됩니다.
스크롤 동작
scroll-behavior를 사용하면 브라우저 제어 스크롤 요소를 선택할 수 있습니다. 이렇게 하면 .scrollTo() 또는 링크와 같은 인페이지 탐색 또는 링크 처리 방식을 지정할 수 있습니다.
이는 특히 사용자 환경설정에 따라 스크롤 동작을 지정하기 위해 prefers-reduced-motion과 함께 사용될 때 유용합니다.
@media (prefers-reduced-motion: no-preference) {
.scroll-view {
scroll-behavior: auto;
}
}
오버스크롤 동작
모달 오버레이의 끝에 도달했는데 계속 스크롤하면서 오버레이 뒤의 페이지가 이동했다면 이는 스크롤 체이닝(스크롤 체이닝) 또는 상위 스크롤 컨테이너로 버블업(버블링)하는 것입니다. overscroll-behavior 속성을 사용하면 오버플로 스크롤이 상위 컨테이너로 유출 (스크롤 체이닝이라고 함)되는 것을 방지할 수 있습니다.
학습 내용 확인하기
오버플로에 대한 지식 테스트
텍스트 오버플로와 요소 오버플로가 동일한가요?
overflow 속성에는 2개의 키워드를 사용할 수 있습니다. 첫 번째 키워드는 어떤 축을 위한 것인가요?
표시할 때 인라인으로 스크롤바가 사용되는 상자 모델의 공간은 무엇인가요?
overlay 모드의 스크롤바는 패딩과 겹치고 inline 모드일 때는 패딩에 추가됩니다.중첩된 암시적 스크롤러에서 스크롤하는 추가적인 모멘텀을 잡으려면 어떤 속성을 사용해야 하나요?
scroll-behaviorscroll-hintoverscroll-behaviorcontain로 설정하면 스크롤이 트랩됩니다.scroll-paddingoverscroll-effect