TV, 휴대전화, 데스크톱 등을 위한 반응형 가로 스크롤 뷰를 빌드하는 방법에 관한 기본 개요입니다.
이 게시물에서는 가로 스크롤을 만드는 방법에 관한 생각을 공유하고자 합니다. 웹용 환경을 위한 최소한의 노력, 반응성, 접근성을 브라우저와 플랫폼 (예: TV)에 최적화되어 있습니다. 이 demo
<ph type="x-smartling-placeholder">동영상을 선호한다면 이 게시물의 YouTube 버전을 참고하세요.
개요
다음 동영상의 썸네일을 호스팅하기 위한 가로 스크롤 레이아웃을 만들 것입니다.
미디어 또는 제품입니다. 구성요소는 소박한 <ul> 목록으로 시작하지만
가 CSS를 통해 만족스럽고 부드러운 스크롤 환경으로 변환되었습니다.
그리드에 맞출 수 있습니다. 자바스크립트가 추가되어
이동-색인 상호 작용을 통해 키보드 사용자가 100개 이상의 항목 순회를 건너뛸 수 있습니다.
또한 실험용 미디어 쿼리인 prefers-reduced-data를 사용하여
경량의 제목 스크롤러 환경으로 전환할 수 있습니다.
접근성 높은 마크업으로 시작하기
미디어 스크롤러는 몇 가지 핵심 구성요소, 즉 항목이 있는 목록으로 이루어져 있습니다. 가 전 세계를 여행할 수 있는 가장 간단한 형식으로, 소비하고 있습니다. 이 페이지의 사용자는 목록을 둘러보고 링크를 클릭할 수 있습니다. 항목을 볼 수 있습니다. 이것이 바로 접근 가능한 기지입니다.
<ul> 요소가 포함된 목록을 전송합니다.
<ul class="horizontal-media-scroller">
<li></li>
<li></li>
<li></li>
...
<ul>
<a> 요소를 사용하여 목록 항목을 대화형으로 만듭니다.
<li>
<a href="#">
...
</a>
</li>
<figure> 요소를 사용하여 이미지와 자막을 의미론적으로 나타냅니다.
<figure>
<picture>
<img alt="..." loading="lazy" src="https://picsum.photos/500/500?1">
</picture>
<figcaption>Legends</figcaption>
</figure>
<img>에서 alt 속성과 loading 속성을 확인합니다. 미디어의 대체 텍스트
스크롤러는 썸네일에 추가적인 맥락을 제공할 수 있는 UX 기회이거나
이미지가 로드되지 않았거나 사용자에게 음성 UI를 제공하는 경우 대체 텍스트
스크린 리더와 같은 보조 테크에 의존합니다. Five Golden에서 자세히 알아보세요.
준수 규칙 대체
텍스트를 입력합니다.
loading 속성은 이 이미지에 신호를 보내기 위한 수단으로 lazy 키워드를 허용합니다.
소스는 이미지가 표시 영역 내에 있을 때만 가져와야 합니다. 이는
사용자는 자신이 가지고 있는 항목에 대한 이미지만 다운로드하므로
큰 목록에 아주 적합합니다.
시야로 스크롤됩니다.
사용자의 색 구성표 환경설정 지원
color-scheme를 <meta> 태그로 사용하여 브라우저에 내 페이지가 있음을 알립니다.
는 제공된 밝은 사용자 에이전트 스타일과 어두운 사용자 에이전트 스타일을 모두 원합니다. 무료 어두운 모드
또는 밝은 모드 중 하나를 선택합니다.
<meta name="color-scheme" content="dark light">
메타 태그는 가능한 이른 신호를 제공하므로 브라우저가 는 사용자에게 어두운 테마 환경설정이 있는 경우 어두운 기본 캔버스 색상을 선택할 수 있습니다. 즉, 사이트의 페이지를 탐색할 때 흰색 캔버스가 깜박이지 않습니다. 로드가 끊기지 않습니다. 로드 간에 매끄러운 어두운 테마가 제공되며, 있습니다.
토마스 슈타이너의 https://web.dev/color-scheme/.
콘텐츠 추가
위의 ul > li > a > figure > picture > img 콘텐츠 구조를 고려할 때
다음 작업은 스크롤할 이미지와 제목을 추가하는 것입니다. 데모에는
사용하지 않아도 되지만, 원한다면
즐겨찾는 데이터 소스를 선택합니다.
CSS로 스타일 추가
이제 CSS가 이 일반적인 콘텐츠 목록을 가져와서 경험해 볼 수 있습니다 Netflix, App Store 및 기타 다양한 사이트와 앱에서 표시 영역을 카테고리 및 옵션으로 패킹합니다.
스크롤러 레이아웃 만들기
레이아웃에서 콘텐츠가 잘리거나 텍스트에 의존하지 않도록 해야 합니다. 생략할 수 있습니다. 많은 텔레비전에는 다음과 같은 미디어 스크롤러가 있습니다. 하지만 너무 자주 생략된 콘텐츠에 의존합니다. 이 레이아웃은 그렇지 않습니다. 또한 미디어 콘텐츠가 열 크기를 재정의하여 하나의 레이아웃을 만들 수 있습니다. 많은 흥미로운 조합을 처리할 수 있을 만큼 유연합니다.
컨테이너를 사용하면 기본 크기를 맞춤 속성입니다 이 그리드 레이아웃은 열 크기에 대해 독단적이며 간격 및 방향만 관리:
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2); /* parent owned value for children to be relative to*/
margin: 0;
}
그런 다음 <picture> 요소에서 맞춤 속성을 사용하여 기본 가로세로 비율인 상자를 만듭니다.
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
& picture {
inline-size: var(--size);
block-size: var(--size);
}
}
몇 가지 마이너 스타일만 더 사용하여 미디어 스크롤러의 기본 스타일을 완성합니다.
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
& > li {
display: inline-block; /* removes the list-item bullet */
}
& picture {
inline-size: var(--size);
block-size: var(--size);
}
}
overflow를 설정하면 스크롤과 키보드 탐색을 허용하도록 <ul>가 설정됩니다.
모든 직계 하위 요소인 경우 각 직계 하위 <li> 요소에서 ::marker가 삭제됩니다.
새 디스플레이 유형 inline-block을 가져옵니다.
하지만 이미지는 아직 응답하지 않으며, 상자에서 바로 꺼집니다. 있습니다. 몇 가지 크기, 맞추기, 테두리 스타일로 단장하고 지연 로드를 위한 배경 그라데이션:
img {
/* smash into whatever box it's in */
inline-size: 100%;
block-size: 100%;
/* don't squish but do cover the space */
object-fit: cover;
/* soften the edges */
border-radius: 1ex;
overflow: hidden;
/* if empty, show a gradient placeholder */
background-image:
linear-gradient(
to bottom,
hsl(0 0% 40%),
hsl(0 0% 20%)
);
}
스크롤 패딩
페이지 콘텐츠 정렬 및 더 넓은 스크롤 표면 영역 조화롭고 최소한의 구성 요소에 중요합니다.
서체와 일치하는 더 넓은 화면 스크롤 레이아웃을 구현하기 위해
레이아웃 라인이 있는 경우 scroll-padding와 일치하는 padding를 사용합니다.
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
padding-inline: var(--gap);
scroll-padding-inline: var(--gap);
padding-block: calc(var(--gap) / 2); /* make space for scrollbar and focus outline */
}
가로 스크롤 패딩 버그 수정 위의 내용은 스크롤 컨테이너 패딩이 있지만 심각한 호환성 문제가 있음 (Chromium 91 이상에서 수정되었습니다.) 자세한 내용은 여기에서 짧은 것은 패딩이 항상 계산되지는 않는다는 것입니다. 스크롤 뷰로 스크롤할 수 있습니다.
스크롤러 끝에 패딩을 넣도록 브라우저를 속이기 위해 각 목록의 마지막 그림을 타겟팅하고 크기를 조정할 수 있습니다.
.horizontal-media-scroller > li:last-of-type figure {
position: relative;
&::after {
content: "";
position: absolute;
inline-size: var(--gap);
block-size: 100%;
inset-block-start: 0;
inset-inline-end: calc(var(--gap) * -1);
}
}
논리적 속성을 사용하면 미디어 스크롤러가 모든 쓰기 모드에서 작동할 수 있습니다. 문서 방향입니다.
스크롤 맞추기
오버플로가 있는 스크롤 컨테이너는 한 줄의 CSS로 맞춰지는 표시 영역이 될 수 있으며, 하위 요소에서 표시 영역과 정렬되는 방식을 지정합니다.
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
padding-inline: var(--gap);
scroll-padding-inline: var(--gap);
padding-block-end: calc(var(--gap) / 2);
scroll-snap-type: inline mandatory;
& figure {
scroll-snap-align: start;
}
}
포커스
이 구성요소는 TV에서의 엄청난 인기에서 비롯되었습니다. 앱 스토어 등에서 찾을 수 있습니다. 많은 비디오 게임 플랫폼에서 미디어 스크롤러를 사용하며 기본 홈 화면 레이아웃으로 사용합니다. 집중력은 중요한 UX 소소한 내용이 담겨 있는 것이 아닙니다. 이 미디어 스크롤러를 사용하여 소파에 리모컨을 대고 이 상호작용을 좀 더 편리하게 해 보세요.
.horizontal-media-scroller a {
outline-offset: 12px;
&:focus {
outline-offset: 7px;
}
@media (prefers-reduced-motion: no-preference) {
& {
transition: outline-offset .25s ease;
}
}
}
이렇게 하면 상자에서 떨어진 곳에 포커스 윤곽선 스타일 7px가 설정되므로
있습니다. 사용자에게 모션을 줄이는 것에 관한 모션 환경설정이 없는 경우, 오프셋은
전환되어 포커스 이벤트에 미세한 모션을 부여합니다.
이동 색인
게임패드 및 키보드 사용자는 이 긴 목록에서 각별히 주의를 기울여야 합니다. 스크롤하는 콘텐츠와 옵션을 맞춤설정할 수 있습니다 이 문제를 해결하기 위한 일반적인 패턴을 이동 색인. 사용자가 항목의 컨테이너에 키보드 포커스가 있지만 하위 요소 1개만 포커스를 보유할 수 있음 할 수 있습니다. 한 번에 하나의 포커스 가능 항목은 Tab 50+ 끝까지 보게 될 것입니다.
데모의 첫 번째 스크롤러에는 항목이 300개 있습니다. 해를 입히는 것보다 다음 섹션에 도달하기 위해 모든 것을 통과합니다.
이 환경을 만들려면 JavaScript에서 키보드 이벤트를 관찰하고 포커스를 두어야 합니다. 이벤트를 수신합니다. 웹사이트에 작은 오픈소스 라이브러리를 만들어 npm: 사용자가 쉽게 달성할 수 있는 환경입니다. 3개의 스크롤러에 이를 사용하는 방법은 다음과 같습니다.
import {rovingIndex} from 'roving-ux';
rovingIndex({
element: someElement
});
이 데모는 스크롤러에 대한 문서를 쿼리하고 각각에 대해
rovingIndex() 함수를 사용하세요. rovingIndex()에 요소를 전달하여 이동
대상 쿼리 선택기와 같은 환경(예: 목록 컨테이너, 타겟 쿼리 선택기)을
포커스 타겟은 직접 하위 요소가 아닙니다.
document.querySelectorAll('.horizontal-media-scroller')
.forEach(scroller =>
rovingIndex({
element: scroller,
target: 'a',
}))
이 효과에 관해 자세히 알아보려면 오픈소스 라이브러리를 참고하세요. Roving-ux를 사용합니다.
가로세로 비율
이 게시물을 작성하는 시점을 기준으로,
aspect-ratio이(가) 뒤에 있습니다.
플래그이지만 Chromium 브라우저 또는 셋톱 박스에서는 사용할 수 있습니다.
미디어 스크롤러 그리드 레이아웃은 방향과 간격만 지정하는데, 크기는
가로세로 비율 지원을 확인하는 기능이 미디어 쿼리 내에서 변경됩니다.
좀 더 동적인 미디어 스크롤러를 점진적으로 개선합니다.
@supports (aspect-ratio: 1) {
.horizontal-media-scroller figure > picture {
inline-size: auto; /* for a block-size driven ratio */
aspect-ratio: 1; /* boxes by default */
@nest section:nth-child(2) & {
aspect-ratio: 16/9;
}
@nest section:nth-child(3) & {
/* double the size of the others */
block-size: calc(var(--size) * 2);
aspect-ratio: 4/3;
/* adjust size to fit more items into the viewport */
@media (width <= 480px) {
block-size: calc(var(--size) * 1.5);
}
}
}
}
브라우저가 aspect-ratio 문법을 지원하는 경우 미디어 스크롤러 사진은 다음과 같습니다.
aspect-ratio 크기 설정으로 업그레이드됨 초안 중첩 문법을 사용하면
첫 번째, 두 번째 또는 세 번째 행인지에 따라 가로세로 비율이 변경됩니다. 이
nest 구문을 사용하면
다른 크기 조정 로직으로
설정할 수 있습니다
이 CSS를 사용하면 더 많은 브라우저 엔진에서 이 기능을 사용할 수 있으므로 시각적으로 더 매력적인 레이아웃이 렌더링됩니다.
데이터 감소 선호
이 다음 기법은
플래그 뒤에 배치된
카나리아,
페이지 로드 시간을 크게 절약하고
데이터 사용에 관한 의문을 해소해 줍니다. prefers-reduced-data 미디어 쿼리:
수준 5에서는 기기가
줄어든 데이터 상태(예: 데이터 절약 모드) 그렇다면
이 경우 이미지를 숨길 수 있습니다.
figure {
@media (prefers-reduced-data: reduce) {
& {
min-inline-size: var(--size);
& > picture {
display: none;
}
}
}
}
콘텐츠를 탐색할 수는 있지만 무거운 이미지를 사용하는 데 드는 비용은 없습니다.
다운로드되었습니다. 다음은 prefers-reduced-data CSS를 추가하기 전의 사이트입니다.
(요청 7개, 131ms에 리소스 100kb)
다음은 prefers-reduced-data CSS를 추가한 후의 사이트 성능입니다.
(요청 71개, 1.07초 동안 리소스 1.2MB)
요청이 64개 더 적은 경우 표시 영역 내 이미지가 최대 60개가 될 것입니다 (테스트 진행 최대 80%의 페이지 로드 부스트를 제공하며, 데이터의 10% 를 전송한다고 가정해 보겠습니다. 상당히 강력한 CSS입니다.
결론
이제 내가 어떻게 했는지 알았으니 어떻게 하면 어떨까?! 🙂
접근방식을 다각화하고 웹에서 빌드하는 방법을 모두 알아보겠습니다. Codepen을 만들거나 데모를 호스트하고 트윗해 주시면 커뮤니티 리믹스 섹션을 참조하세요.
소스
커뮤니티 리믹스
표시할 내용이 아직 없습니다.