게시일: 2025년 3월 20일
Chrome 135부터 스크롤 및 캐러셀 환경을 만들기 위해 설계된 CSS Overflow 5 사양의 기능을 사용할 수 있습니다.
이 게시물에서는 JavaScript 없이 이러한 새로운 기능을 사용하여 만든 다양한 스크롤 및 캐러셀 환경을 간략히 설명합니다. 다음 동영상을 시청하고 이제 어떤 작업을 할 수 있는지 알아보세요.
동영상에는 스크롤 버튼, 스크롤 마커, 스크롤 구동 애니메이션, scroll-state() 쿼리, :has(), 그리드, 앵커 등이 조화롭게 사용된 예시가 나와 있습니다.
접근성 스토리는 더욱 인상적입니다.
엔지니어링팀과 접근성팀이 협력하여 캐러셀 권장사항이 브라우저에서 처리됩니다. 이보다 더 접근하기 쉬운 캐러셀을 만드는 것은 매우 어렵습니다.
::scroll-button()님과 ::scroll-marker()님
캐러셀은 버튼과 마커라는 UI 어포던스가 최대 2개 추가된 스크롤 영역입니다.
CSS 캐러셀 기능의 버전 1에서는 버튼과 마커가 CSS로 만들어집니다. 브라우저는 요소를 적절한 역할과 적절한 탭 순서로 형제 요소로 배치하고 상태를 유지합니다. 이렇게 하면 접근성 있는 캐러셀을 더 쉽게 개발할 수 있습니다.
스크롤 버튼
브라우저에서 제공하는 상태 기반의 상호작용 스크롤 어포던스<button>요소로, 콘텐츠 액세스를 돕고 누르면 스크롤 영역의 85% 를 스크롤합니다.스크롤 마커
브라우저에서 제공하는 상태 저장 탐색<a>요소로, 스크롤 영역에서 요청된 항목의 콘텐츠 액세스를 지원합니다.
이 게시물의 나머지 부분에서는 이러한 새로운 기능을 사용하여 캐러셀을 빌드하는 방법을 보여줍니다.
스크롤러로 시작하기
사이트의 모든 스크롤 영역에 버튼과 마커를 추가할 수 있습니다.
다음 CSS는 나중에 버튼과 마커를 추가하는 데 사용할 기본 스크롤 영역을 만듭니다. 캐러셀에는 스크롤 고정이 필요하지 않지만 이 예에서는 사용됩니다. 캐러셀은 세로 스크롤러와 양방향 스크롤러에서도 작동합니다.
.carousel {
overflow-x: auto;
scroll-snap-type: x mandatory;
> li {
scroll-snap-align: center;
}
}
::scroll-button()를 사용하여 스크롤 버튼 추가
운영체제에 따라 스크롤바 주위에 이미 스크롤 버튼이 있을 수 있습니다. 내장 스크롤바 버튼은 스크롤 영역을 살짝 밀어내는 경향이 있는 반면 CSS 스크롤 버튼은 스크롤 영역의 85% 를 스크롤합니다.
스크롤 스냅 지점을 사용하여 한 번에 하나의 전체 너비 항목만 표시하는 캐러셀의 경우 항목별 금액처럼 느껴질 수 있습니다. 한 번에 두 개 이상 표시되는 긴 항목 목록의 경우 거의 전체 페이지가 스크롤됩니다.
CSS를 사용하여 스크롤 버튼을 추가하려면 다음 단계를 따르세요.
- 다른 가상 요소와 마찬가지로 선택기로 추가합니다. 오른쪽으로 스크롤하는 버튼의 경우
.carousel::scroll-button(right)를 사용합니다. - 접근 가능한 대체 대체 텍스트(선택사항)와 함께
content를 지정합니다.
브라우저는 스크롤러의 형제 요소로 콘텐츠가 포함된 실제 버튼을 만듭니다. 이제 필요에 따라 이러한 버튼을 배치하거나 스타일을 지정하거나 anchor()할 수 있습니다. 다음 CSS는 왼쪽 스크롤 버튼용과 오른쪽 스크롤 버튼용 버튼 2개를 만듭니다.
.carousel {
…
&::scroll-button(left) {
content: "⬅" / "Scroll Left";
}
&::scroll-button(right) {
content: "⮕" / "Scroll Right";
}
&::scroll-button(*)::focus-visible {
outline-offset: 5px;
}
}
::scroll-marker()로 스크롤 마커 추가
스크롤바 썸네일 요소와 마찬가지로 CSS 스크롤 마커는 캐러셀의 크기를 암시하는 동시에 끝이나 시작 부분으로 빠르게 이동할 수 있는 어포던스를 제공할 수 있습니다. CSS 스크롤 마커는 각 마커가 스크롤러의 모든 항목을 나타낼 수 있는 링크이므로 스크롤바와 다릅니다.
TV 시리즈의 시즌을 예로 들 수 있습니다. 10개의 에피소드마다 마커를 만드는 대신 챕터 시작 부분으로 이동하는 마커 2개를 만듭니다.
이러한 마커는 점이 아니며 가상 요소의 content: "Season 1" 속성을 사용합니다. 마커는 썸네일일 수도 있으며, 일반적으로 전자상거래 또는 사진 중심 웹사이트의 갤러리 캐러셀에 사용됩니다.
마커는 페이지 내 <a> 링크와 비슷하지만 다음과 같은 몇 가지 특별한 기능이 있습니다.
- 여기에는 마커가 표시되거나 스냅된 경우의
:target-current상태가 포함됩니다. - 키보드 탐색이 포함되어 있으며 포커스 그룹처럼 동작합니다.
- 스크린 리더 환경이 포함되어 있으며 탭 목록과 같은 보고서를 제공합니다.
다음 단계에 따라 스크롤러의 의미 있는 관심 장소에 마커를 추가합니다.
scroll-marker-group의 게재위치를before또는after로 정의합니다.- 선택기
.carousel .point-of-interest::scroll-marker를 사용하여 관심 장소를 선택합니다. content를 지정하고 선택사항인 접근 가능한 대체 대체 텍스트(숫자, 텍스트, 비어 있음 또는 이미지)를 지정합니다.
브라우저는 모든 마커를 만들고 마커 그룹 컨테이너에 배치합니다. 이 예에서는 각 <li>에 대해 빈 마커를 만들어 각 항목의 마커 점을 만듭니다.
.carousel {
…
scroll-marker-group: after;
> li::scroll-marker {
content: ' ';
&:target-current {
background: var(--accent);
}
}
}
마커를 포함하는 요소를 ::scroll-marker-group라고 하며 스크롤 버튼과 마찬가지로 스크롤러의 형제 요소로 생성됩니다. 이 컨테이너는 스타일을 지정하고 필요한 위치에 배치할 수 있습니다.
마커와 버튼을 동시에 누릅니다.
이 두 가지를 결합하면 캐러셀처럼 보이지만 다음과 같은 이점이 있습니다.
- JavaScript가 사용 중지된 경우에도 작동합니다.
- 하이드라이션 또는 지연된 크기 조정 없음 (CLS 감소).
- 모든 종류의 스크롤 애니메이션과 트리거를 사용할 수 있습니다.
- 접근성 기능이 포함되어 있습니다.
- 터치, 마우스, 키보드에 적합합니다.
더 적은 작업으로 더 많은 사용자에게 더 빠르게 도달하세요.
리소스
이 게시물에서는 주로 이러한 기능을 '캐러셀'이라고 하지만, 이 기능의 기능과 유용성은 캐러셀 사용 사례를 훨씬 뛰어넘습니다. 이러한 새로운 기능의 잠재력을 최대한 활용하려면 스크롤 스파이, 탭, 슬라이드와 같은 다른 구성요소와 함께 캐러셀 갤러리를 사용해 보세요.
- 웹 표준
- Chrome
캐러셀 구성자
시각적 학습자와 대화형 학습자는 캐러셀 구성 도구를 사용해 보세요.
스크롤 버튼과 같은 스위치를 제공하며, 사용 설정하면 표시된 캐러셀에 즉시 버튼과 함께 사용된 관련 CSS가 표시됩니다.
캐러셀과 관련된 고급 개념의 예도 포함되어 있습니다.
회전 갤러리
'X를 할 수 있나요?'와 같은 질문에 답변하여 이러한 기능을 얼마나 활용할 수 있는지 궁금해하는 사용자를 위한 쇼케이스 공간입니다. 각 데모는 인터넷에서 발견된 사용 사례를 기반으로 합니다. 각 데모에서는 스크롤 기반 애니메이션, scroll-state() 쿼리 등을 사용하여 이러한 버튼과 마커를 조정하는 방법을 보여줍니다.
재미있는 사실은 이 사이트 전체가 JavaScript가 없다는 점입니다.
예시의 범위는 매우 간단한 예에서부터 매우 강력하고 기능이 풍부한 예까지 다양합니다. 갤러리를 둘러볼 때는 영감을 얻고 안심할 수 있어야 하며, 물론 코드가 가져올 수 있도록 검사할 수 있어야 합니다. 캐러셀을 만드는 데 도움이 되는 유틸리티가 있는지 @layer utilities를 찾아 검사합니다.
추가 작업
이러한 기능이 모든 HTML 및 CSS와 얼마나 잘 통합되는지 자랑스럽게 생각합니다. CSS 캐러셀의 접근성은 최고 수준입니다. CSS 캐러셀의 성능은 JavaScript 솔루션보다 우수합니다. CSS 캐러셀의 사용자 환경은 자연스럽고 부드럽고 풍부합니다. 하지만 개선할 방법이 있습니다.
자체 요소 가져오기
스크롤 버튼과 마커에 자체 구성요소를 추가할 수 있도록 하는 작업이 이미 진행 중입니다. 즉, 아이콘과 같은 풍부한 콘텐츠가 포함된 자체 <a> 태그를 제공할 수 있습니다. Tailwind로 빌드된 자체 다층 버튼을 가져올 수도 있습니다.
주기적 스크롤
많은 캐러셀은 끝에 도달하면 자체적으로 래핑됩니다(예: 박람회장의 캐러셀 놀이기구). YouTube는 이 문제를 인지하고 있으며 이에 대한 플랫폼 솔루션을 제공할 계획입니다.
이 기능을 유용하게 활용하시기 바랍니다. 이제 'JavaScript 사용 중지'된 모든 웹 사용자가 스크롤 가능한 멋진 환경을 이용하고, 내장 캐러셀의 타이밍이 개선된 수명 주기를 통해 CLS를 줄일 수 있기를 기대합니다.
할 일이 줄고, 우수한 사용자 환경과 실적 향상