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 type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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를 사용하여 접근성 적용에서 애드리안 로젤리는 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">scroll-behavior
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
scroll-behavior
를 사용하면 요소에 대한 브라우저 제어 스크롤을 선택할 수 있습니다. 이렇게 하면 .scrollTo()
또는 링크와 같은 인페이지 탐색 방법을 지정할 수 있습니다.
이 모드는 prefers-reduced-motion과 함께 사용하여 사용자 환경설정에 따라 스크롤 동작을 지정하는 경우에 특히 유용합니다.
@media (prefers-reduced-motion: no-preference) {
.scroll-view {
scroll-behavior: auto;
}
}
오버스크롤 동작
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
모달 오버레이의 끝에 도달한 다음 계속 스크롤하여 오버레이 뒤의 페이지가 움직이는 경우 스크롤 체인, 즉 상위 스크롤 컨테이너까지 위로 올라갑니다. overscroll-behavior
속성을 사용하면 오버플로 스크롤이 상위 컨테이너에 유출 (스크롤 체인이라고 함)되는 것을 방지할 수 있습니다.
이해도 확인
오버플로에 관한 지식 테스트
텍스트 오버플로와 요소 오버플로가 동일한가요?
overflow
속성은 2개의 키워드를 허용하며, 첫 번째 키워드는 어떤 축에 관한 것인가요?
스크롤바를 표시하고 인라인으로 표시할 때 박스 모델에서 스크롤바가 소비하는 공간은 무엇인가요?
overlay
모드의 스크롤바는 패딩과 겹치고 inline
모드일 때는 패딩에 추가됩니다.중첩된 암시적 스크롤러에서 스크롤할 때 추가적인 모멘텀을 트랩하려면 어떤 속성을 사용해야 하나요?
scroll-behavior
scroll-hint
overscroll-behavior
contain
로 설정하면 스크롤을 트랩합니다.scroll-padding
overscroll-effect