2022년에 요소를 선택하는 방법(모범 사례)
게시 됨: 2022-08-23이 기사에서는 현대적인 웹 디자인에서 움직이는 선택 윤곽 요소를 만드는 가장 좋은 방법에 대해 설명합니다.
선택 윤곽은 자동으로 수평으로 스크롤되는 텍스트 및/또는 시각적 요소(예: 이미지)의 무한 섹션입니다.
공식 HTML <marquee> 요소가 감가상각 되고 사용을 강력히 권장하지 않음 에도 불구하고 스크롤의 전반적인 효과, 웹 페이지를 장식하는 데 사용되는 연속 요소는 2022년에도 살아있고 많은 유행 웹 사이트에 나타납니다.
일부는 여전히 Marquee 요소를 사용하는데, 이는 (다시) 사용을 권장하지 않음에도 불구하고 모든 브라우저에서 여전히 지원됩니다. 예를 들어, HTML 선택 윤곽으로 만든 고전적인 튀는 DVD "화면 보호기"가 있습니다.
이것은 똑똑하지 않지만 여전히 작동합니다. 2022년에 이 요소를 사용하지 말아야 하는 이유는 명확합니다.
- 정말 접근이 안되네요
- 100% 감가상각되며 지원이 제거될 수 있습니다(아마도 언젠가는 제거될 것입니다).
- 처음부터 실제 HTML 요소가 아니었습니다(표준의 일부가 아님).
그러나 우리는 항상 Isotropic의 천막의 팬이었습니다.
최신 유행의 Awwwards 웹사이트를 살펴보면 다음과 같이 텍스트, 이미지 또는 이 둘의 조합이 수평으로 움직이는 것을 볼 수 있습니다.
이것은 데모 선택 윤곽입니다.
물론 스크롤링이나 애니메이션 섹션에 미션 크리티컬 정보를 넣는 것은 결코 좋은 생각이 아닙니다 . 그러나 위의 예와 같은 경우 멋지게 보이고 사이트를 차별화하며 기억에 남습니다. 현명하고 적당히 사용하십시오.
선택 윤곽이 너무 멋져서 CSS 상자 그림자를 사용하여 스크롤하는 텍스트의 "티커" 스타일 섹션을 자동으로 생성하는 유용한 도구도 게시했습니다. 멋지긴 하지만 이 기사에서 논의한 접근 방식이 훨씬 더 낫다고 생각합니다.
이 선택 윤곽 데모를 만드는 코드는 Ryan Mulligan이 작성한 이 CodePen에서 가져왔습니다. 이는 2022년에 선택 윤곽 효과를 만드는 가장 좋은 방법일 것입니다. 그는 또한 이 코드에 대해 자신의 블로그(https://ryanmulligan.dev/)에 씁니다. 블로그/css-선택 윤곽.
액세스가 가능하고(preferred-reduced-motion 지원), 무한하며, 모든 유형의 html 요소를 허용하고, 가볍고 구현하기 쉽습니다.
또한 JS 없이 100% CSS로 만들어졌습니다.
<div 클래스="선택 윤곽">
<div class="marquee__group">
<img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8
<img src='https://images.unsplash.com/photo-1583511666445-775f1f2116f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1586917383423-c25e88ac05ce?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
</div>
<div aria-hidden="true" class="marquee__group">
<img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8
<img src='https://images.unsplash.com/photo-1583511666445-775f1f2116f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1586917383423-c25e88ac05ce?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
</div>
</div>
<div class="marquee marquee--borders">
<div class="marquee__group">
<p>언스플래쉬의 개</p>
<p aria-hidden="true">Unsplash의 개</p>
<p aria-hidden="true">Unsplash의 개</p>
</div>
<div aria-hidden="true" class="marquee__group">
<p>언스플래쉬의 개</p>
<p>언스플래쉬의 개</p>
<p>언스플래쉬의 개</p>
</div>
</div>
<div class="marquee marquee--reverse">
<div class="marquee__group">
<img src='https://images.unsplash.com/photo-1546421845-6471bdcf3edf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8
<img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1571772805064-207c8435df79?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1508948956644-0017e845d797?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=rb-1.2.1&q=80&w=400' alt=''>
</div>
<div aria-hidden="true" class="marquee__group">
<img src='https://images.unsplash.com/photo-1546421845-6471bdcf3edf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8
<img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1571772805064-207c8435df79?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1508948956644-0017e845d797?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=rb-1.2.1&q=80&w=400' alt=''>
</div>
</div> @import url("https://fonts.googleapis.com/css2?family=Corben:wght@700&display=swap");
* {
상자 크기: 테두리 상자;
}
신체 {
최소 높이: 100vh;
}
신체 {
--공백: 2rem;
디스플레이: 그리드;
내용 정렬: 가운데;
오버플로: 숨김;
간격: var(--공백);
너비: 100%;
글꼴 패밀리: "Corben", system-ui, sans-serif;
글꼴 크기: 1.5rem;
라인 높이: 1.5;
}
.마키 {
--지속시간: 60초;
--갭: var(--공백);
디스플레이: 플렉스;
오버플로: 숨김;
사용자 선택: 없음;
간격: var(--gap);
변환: skewY(-3deg);
}
.marquee__그룹 {
플렉스 수축: 0;
디스플레이: 플렉스;
항목 정렬: 가운데;
justify-content: 공백 주위;
간격: var(--gap);
최소 너비: 100%;
애니메이션: 스크롤 var(--duration) 선형 무한대;
}
@media(리듀스 모션 선호: 리듀스) {
.marquee__그룹 {
애니메이션 재생 상태: 일시 중지됨;
}
}
.marquee__group img {
최대 너비: 클램프(10rem, 1rem + 28vmin, 20rem);
종횡비: 1;
개체 맞춤: 덮개;
경계 반경: 1rem;
}
.marquee__그룹 피 {
배경 이미지: 선형 그라데이션(
75도,
hsl(240deg 70% 49%) 0%,
hsl(253deg 70% 49%) 11%,
hsl(267deg 70% 49%) 22%,
hsl(280deg 71% 48%) 33%,
hsl(293deg 71% 48%) 44%,
hsl(307deg 71% 48%) 56%,
hsl(320deg 71% 48%) 67%,
hsl(333deg 72% 48%) 78%,
hsl(347deg 72% 48%) 89%,
hsl(0도 73% 47%) 100%
);
-webkit-background-clip: 텍스트;
-webkit-text-fill-color: 투명;
}
.marquee--테두리 {
테두리 블록: 3px 솔리드 dodgerblue;
패딩 블록: 0.75rem;
}
.marquee--역 .marquee__group {
애니메이션 방향: 역방향;
애니메이션 지연: calc(var(--duration) / -2);
}
@keyframes 스크롤 {
0% {
변환: translateX(0);
}
100% {
변환: translateX(calc(-100% - var(--gap))));
}
}
이것이 어떻게 만들어졌으며 왜 그렇게 좋은지 살펴 보겠습니다.
모든 코드를 살펴보기 전에 다음과 같은 개요가 있습니다.
- 스크롤 효과의 속도와 방향을 쉽게 제어할 수 있습니다. 속도를 위해 우리는 설정합니다
.marquee--reverse클래스를 사용합니다. - 모듈식입니다. div의 콘텐츠를
.marquee클래스로 래핑하고 내부 콘텐츠를.marquee__group으로 래핑하여 원하는 만큼 그룹을 가질 수 있습니다. - 크기 조정은 CSS 변수와 클램프를 사용하므로 반응이 빠르고 유동적입니다.
- CSS의 preferred-reduced-motion이 Reduce로 설정된 경우 aria 레이블을 사용하고 일시 중지하여 액세스할 수 있습니다.
- 움직임은 키프레임을 사용하는 표준 CSS 애니메이션입니다(원하는 경우 마우스를 가져갈 때 일시 중지할 수 있음). JS가 전혀 없습니다.
- 그것은 또한 꽤 복사/붙여넣기입니다. 단순히 콘텐츠를 교체하고 HTML과 CSS를 구현하면 멋진 작은 선택 윤곽이 생깁니다.
정말 잘 했고 (이모) 2022년에 선택 윤곽 효과가 구현되는 표준 방식이 되어야 합니다.
HTML은 다음과 같습니다.
데모에서 3개의 선택 윤곽을 볼 수 있습니다. 첫 번째와 세 번째는 .marquee--reverse 클래스로 반전됩니다. 표준 속도를 가지며 이미지를 포함합니다.
두 번째(가운데)는 모두 텍스트이며 사용자 정의 클래스로 테두리를 구현합니다. 또한 style 속성에 의해 설정된 더 느린 지속 시간이 있습니다. .
또한 .marquee div 내에 본질적으로 중복 항목이 있음을 알 수 있습니다. 이는 aria 태그를 제외하고는 동일합니다.
이는 애니메이션을 매끄럽게 무한대로 만드는 동시에 다양한 뷰포트 비율에 적응할 수 있도록 하기 위한 것입니다(CSS를 볼 때 이에 대한 자세한 내용).
접근성 트리에서 중복 콘텐츠를 제거하는 aria-hidden="true" 를 사용하여 액세스할 수 있습니다.
또한 이미지는 Unsplash에서 직접 제공됩니다. 다음 리소스가 흥미로울 수 있습니다. URL로 임의 이미지를 생성하는 방법(웹 개발)
대체로 우아하고 단순한 HTML 구조입니다.
이제 CSS를 살펴보자
다음은 CSS(CodePen에서 직접 가져옴)입니다.
다음을 볼 수 있습니다.
- 모든 것이 REM, 변수 및 클램프를 사용하고 있습니다. 즉, 효과가 유동적이며 화면 크기 및 브라우저 설정에 반응합니다.
- 애니메이션은 100% CSS입니다. 이것은
.marquee__group의 "animation: scroll var(--duration) linear infinite;" 라인으로 구현됩니다. 애니메이션은 무한 선형이며 이름이 지정된 스크롤입니다. 루트 기간은--duration변수에 의해 제어되며, HTML 마크업(위에서 언급)에서 특정 그룹의 속도를 제어하기 위해 덮어쓸 수 있습니다. - 스크롤은 X를 번역하는 기본 변환입니다.
- 애니메이션을 반전시키려면
.marquee--reverse .marquee__group클래스에 "animation-direction: reverse;'만 있으면 됩니다. - 우리는 대부분의 공백에 대해 calc 및 --gap을 사용하고 있습니다. 이렇게 하면 상황이 유동적이며 필요에 맞게 Gap을 변경할 수 있습니다.
- 대각선으로 만드는 기울이기(3%) 효과가 있으며 제거하여 100% 수평으로 만들 수 있습니다.
- 선호하는 움직임 감소: 감소가 설정되어 있으면 움직이지 않으므로 접근 가능하고 책임이 있습니다(여기에서 테스트 방법 알아보기).
기본적으로 모든 작업을 정말 잘 수행하며 2022년에 스크롤 선택 윤곽과 같은 효과를 구현하는 가장 좋은 방법입니다.
구현하려면 페이지에 HTML을 추가하고 텍스트/이미지를 교체하고 CSS를 전역 스타일에 추가하기만 하면 됩니다.
변수를 가지고 플레이할 수 있지만 실제로 이것은 꽤 플러그 앤 플레이입니다... 변경할 필요가 많지 않습니다!