CSS를 사용한 캐러셀

Adam Argyle

게시일: 2025년 3월 20일

Chrome 135부터 스크롤 및 캐러셀 환경을 만들도록 설계된 CSS 오버플로 5 사양의 기능을 사용할 수 있습니다.

이 게시물에서는 이러한 새로운 기능을 사용하고 JavaScript 없이 만들어진 다양한 스크롤 및 캐러셀 환경을 간략하게 살펴봅니다. 다음 동영상을 시청하고 이제 달성할 수 있는 목표에 대해 알아보세요.

동영상에는 스크롤 버튼, 스크롤 마커, 스크롤 기반 애니메이션, scroll-state() 쿼리, :has(), 그리드, 앵커 등이 조화롭게 표시됩니다.

접근성 스토리는 더욱 인상적입니다.

엔지니어링팀과 접근성팀의 협업 덕분에 캐러셀 권장사항은 브라우저에서 처리됩니다. 이보다 더 접근성이 좋은 캐러셀을 만들기는 매우 어려울 것입니다.

::scroll-button() 및 ::scroll-marker() 소개

캐러셀은 최대 2개의 추가 UI 어포던스(버튼 및 마커)가 있는 스크롤 영역입니다.

CSS 캐러셀 기능의 버전 1에서는 버튼과 마커가 CSS에서 생성됩니다. 브라우저는 적절한 역할과 적절한 탭 순서로 요소를 형제로 배치하고 상태를 유지합니다. 이렇게 하면 접근성 있는 캐러셀을 더 쉽게 개발할 수 있습니다.

• 스크롤 버튼
  콘텐츠 액세스를 지원하고 누르면 스크롤 영역의 85% 를 스크롤하는 브라우저 제공, 상태 저장, 대화형 스크롤 어포던스 <button> 요소입니다.

• 스크롤 마커
  스크롤 영역에서 요청된 항목의 콘텐츠 액세스를 지원하는 브라우저 제공 상태 저장 탐색 <a> 요소입니다.

이 게시물의 나머지 부분에서는 이러한 새로운 기능을 사용하여 캐러셀을 빌드하는 방법을 보여줍니다.

스크롤러로 시작하기

사이트의 스크롤 영역에 버튼과 마커를 추가할 수 있습니다.

다음 CSS는 나중에 버튼과 마커를 추가하는 데 사용할 기본 스크롤 영역을 만듭니다. 캐러셀에는 스크롤 스냅이 필요하지 않지만 이 예에서는 사용됩니다. 캐러셀은 세로 스크롤러와 양방향 스크롤러에서도 작동합니다.

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
  }
}

::scroll-button()로 스크롤 버튼 추가

운영체제에 따라 스크롤 막대 주변에 스크롤 버튼이 이미 있을 수 있습니다. 내장 스크롤바 버튼은 스크롤 영역을 약간씩 이동하는 경향이 있는 반면 CSS 스크롤 버튼은 스크롤 영역의 85% 를 페이지로 나눕니다.

스크롤 스냅 포인트를 사용하여 한 번에 하나의 전체 너비 항목만 표시하는 캐러셀의 경우 항목별 금액처럼 느껴집니다. 한 번에 두 개 이상의 항목이 표시되는 긴 항목 목록의 경우 거의 전체 페이지가 스크롤됩니다.

CSS로 스크롤 버튼을 추가하려면 다음 단계를 따르세요.

1. 오른쪽으로 스크롤하는 버튼의 경우 .carousel::scroll-button(right) 선택기를 사용하여 다른 의사 요소와 같이 추가합니다.
2. 선택사항인 접근 가능한 대체 텍스트와 함께 content를 지정합니다.

브라우저에서 스크롤러의 형제로 콘텐츠가 포함된 실제 버튼을 만듭니다. 이제 이러한 버튼을 배치하고, 스타일을 지정하고, 필요에 따라 anchor()할 수 있습니다. 다음 CSS는 스크롤 왼쪽 버튼과 스크롤 오른쪽 버튼을 각각 하나씩 만듭니다.

.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> 링크와 비슷하지만 몇 가지 특별한 기능이 있습니다.

1. 여기에는 마커가 표시되거나 스냅될 때의 :target-current 상태가 포함됩니다.
2. 키보드 탐색이 포함되어 있으며 focusgroup처럼 동작합니다.
3. 스크린 리더 환경이 포함되어 있으며 tablist와 같이 보고됩니다.

다음 단계에 따라 스크롤러의 의미 있는 관심 지점에 마커를 추가합니다.

1. scroll-marker-group의 게재위치를 before 또는 after로 정의합니다.
2. 선택기 .carousel .point-of-interest::scroll-marker로 관심 장소를 선택합니다.
3. 선택사항인 접근 가능한 대체 대체 텍스트(숫자, 텍스트, 빈 값 또는 이미지)와 함께 content를 지정합니다.

브라우저가 모든 마커를 만들고 마커 그룹 컨테이너에 넣습니다. 이 예에서는 각 항목에 마커 점을 만들기 위해 각 <li>에 빈 마커를 만듭니다.

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
  }

  > li::scroll-marker:target-current {
    background: var(--accent);
  }
}

마커의 포함 요소는 ::scroll-marker-group라고 하며 스크롤 버튼과 마찬가지로 스크롤러의 형제로 생성됩니다. 이 컨테이너는 스타일을 지정하고 필요한 곳에 배치할 수 있습니다.

마커와 버튼을 동시에 사용

두 가지를 함께 사용하면 캐러셀과 비슷한 환경을 제공하지만 다음과 같은 이점이 있습니다.

• JavaScript가 사용 중지된 상태에서도 작동합니다.
• 하이드레이션 또는 지연된 크기 조정이 없습니다 (CLS 감소).
• 모든 종류의 스크롤 애니메이션과 트리거에 적합합니다.
• 접근성이 포함됩니다.
• 터치, 마우스, 키보드 친화적

더 적은 노력으로 더 많은 사람에게 더 빠르게 도달하세요.

리소스

이 게시물에서는 이러한 기능을 주로 '캐러셀'이라고 언급하지만, 기능과 유용성은 캐러셀 사용 사례를 훨씬 뛰어넘습니다. 이러한 새로운 기능의 잠재력을 완전히 파악하려면 회전 갤러리를 사용해 보고 스크롤스파이, 탭, 슬라이드와 같은 다른 구성요소를 확인하세요.

• 웹 표준
  • CSS 오버플로 5
  • 캐러셀 설명
  • WAI Aria 캐러셀
• Chrome
  • 배송 의도
  • 회전 갤러리
  • 캐러셀 구성 도구

캐러셀 구성 도구

시각적 학습자 및 대화형 학습자의 경우 캐러셀 구성 도구를 사용해 보세요.

스크롤 버튼과 같은 스위치를 제공하며, 사용 설정하면 표시된 캐러셀에 버튼이 즉시 표시되고 연결된 CSS가 사용됩니다.

또한 캐러셀과 관련된 고급 개념의 예도 포함되어 있습니다.

• 상호작용성
• scroll-state
• 스크롤 기반 애니메이션
• 및 스크롤 스냅 열

회전 갤러리

이러한 기능을 얼마나 활용할 수 있는지 궁금한 사용자를 위한 쇼케이스 공간으로, 'X를 할 수 있나요?'와 같은 질문에 답변합니다. 각 데모는 인터넷에서 찾은 사용 사례를 기반으로 합니다. 각 데모에서는 스크롤 기반 애니메이션, scroll-state() 쿼리 등을 사용하여 이러한 버튼과 마커를 오케스트레이션하는 방법을 보여줍니다.

재미있는 사실은 전체 사이트에 JavaScript가 없다는 것입니다.

이 예는 매우 간단한 것부터 환상적으로 강력하고 기능이 풍부한 것까지 다양합니다. 갤러리를 둘러보는 것은 영감을 주고 안심을 시켜야 하며, 물론 코드를 가져올 수 있도록 검사할 수 있어야 합니다. 캐러셀을 만드는 데 도움이 되는 유틸리티를 위해 @layer utilities를 찾아 검사합니다.

추가 작업

이러한 기능이 모든 HTML 및 CSS와 얼마나 잘 통합되는지 자랑스럽게 생각합니다. CSS 캐러셀의 접근성은 최고 수준입니다. CSS 캐러셀의 성능은 JavaScript 솔루션보다 우수합니다. CSS 캐러셀의 사용자 환경은 자연스럽고 부드럽고 풍부합니다. 하지만 개선할 방법이 있습니다.

자체 요소 가져오기

스크롤 버튼과 마커를 위한 자체 구성요소를 추가할 수 있도록 하는 작업이 이미 진행 중입니다. 즉, 아이콘과 같은 리치 콘텐츠가 있는 자체 <a> 태그를 제공할 수 있습니다. Tailwind로 빌드된 자체 다층 버튼을 가져올 수도 있습니다.

순환 스크롤

많은 캐러셀은 끝에 도달하면 회전목마처럼 자체적으로 래핑됩니다. Google은 이 문제를 인지하고 있으며 플랫폼 솔루션을 제공할 계획입니다.

이 기능을 유용하게 활용하시기 바랍니다. 이제 스크롤 가능한 멋진 환경을 이용할 수 있는 'JavaScript 사용 중지' 웹 사용자와 내장 캐러셀의 더 나은 타이밍 수명 주기에서 얻을 수 있는 모든 CLS 감소를 기대합니다.

작업량 감소, 우수한 사용자 환경, 실적 개선