이 페이지는 Cloud Translation API를 통해 번역되었습니다.

설정 구성요소 빌드

슬라이더 및 체크박스의 설정 구성요소를 빌드하는 방법에 관한 기본적인 개요입니다.

Adam Argyle

이 게시물에서는 설정 구성요소를 빌드하는 것에 관한 생각을 공유하고자 합니다. 웹 기반이며, 다양한 기기 입력을 지원하며 있습니다. 데모 사용해 보기

</ph>

</ph> 데모

동영상을 원하거나 우리가 빌드 중인 UI/UX 미리보기를 원하는 경우 YouTube 동영상 둘러보기:

개요

이 구성요소는 다음과 같은 섹션으로 구분됩니다.

레이아웃
색상
커스텀 범위 입력
맞춤 체크박스 입력
접근성 고려사항
자바스크립트

를 통해 개인정보처리방침을 정의할 수 있습니다.

레이아웃

모든 CSS 그리드가 되는 첫 번째 GUI 챌린지 데모입니다. 각 그리드는 다음과 같습니다. 그리드용 Chrome DevTools로 강조 표시됩니다.

설정 레이아웃을 구성하는 모든 상자를 표시하는 데 도움이 되는 다채로운 윤곽선과 간격 간격 오버레이

참고: 그리드 레이아웃을 강조 표시하려면 다음 단계를 따르세요. 1. cmd+opt+i 또는 ctrl+alt+i로 Chrome DevTools를 엽니다. 1. 스타일 탭 옆에 있는 레이아웃 탭을 선택합니다. 1. 그리드 레이아웃 섹션에서 모든 레이아웃을 확인합니다. 1. 모든 레이아웃의 색상을 변경합니다.

틈새를 공략하기 위한 용도

가장 일반적인 레이아웃은 다음과 같습니다.

foo {
  display: grid;
  gap: var(--something);
}

이 레이아웃을 '간격 전용'이라고 부릅니다. 그리드를 사용하여 블록 사이에 간격을 추가하기 때문입니다.

이 전략을 사용하는 5개의 레이아웃은 다음과 같습니다.

윤곽선으로 강조 표시되고 공백이 채워진 세로 그리드 레이아웃

각 입력 그룹 (.fieldset-item)이 포함된 fieldset 요소는 gap: 1px를 사용하여 요소 사이에 가는 선 테두리를 만듭니다. 까다로운 테두리 해결책은 없습니다.

빈칸 채우기

.grid {
  display: grid;
  gap: 1px;
  background: var(--bg-surface-1);

  & > .fieldset-item {
    background: var(--bg-surface-2);
  }
}

테두리 트릭

.grid {
  display: grid;

  & > .fieldset-item {
    background: var(--bg-surface-2);

    &:not(:last-child) {
      border-bottom: 1px solid var(--bg-surface-1);
    }
  }
}

자연 격자 래핑

결국 가장 복잡한 레이아웃은 매크로 레이아웃, 즉 논리 레이아웃과 <main>에서 <form> 사이의 시스템입니다.

콘텐츠 중앙에 배치

Flexbox와 그리드 모두 align-items 또는 align-content, 래핑 요소를 처리하는 경우 content 레이아웃 하위 요소에 그룹으로 공간을 분배합니다.

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
}

기본 요소는 place-content: center 정렬을 사용합니다. 이렇게 하면 1열과 2열 레이아웃 모두에서 하위 요소가 세로와 가로 가운데 중앙에 위치합니다.

위의 동영상에서 '콘텐츠'가 줄바꿈이 있더라도 중앙에 배치되어 있습니다.

자동 맞춤 최솟값 반복

<form>는 각 섹션에 적응형 그리드 레이아웃을 사용합니다. 이 레이아웃은 사용 가능한 공간에 따라 1열에서 2열로 전환됩니다.

form {
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  grid-template-columns: repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
  align-items: flex-start;
  max-width: 89vw;
}

이 그리드의 row-gap (--space-xl) 값은 column-gap (--space-xxl)와 다릅니다. 반응형 레이아웃에 맞춤 터치를 넣을 수 있습니다. 열이 쌓이면 큰 간격을 원하지만 넓은 화면에서 보는 것만큼 크지 않습니다.

grid-template-columns 속성은 세 가지 CSS 함수(repeat(), minmax(), min()입니다. Una Kravets는 멋진 레이아웃 블로그를 운영하고 있습니다. 게시물을 작성해서 RAM.

Una의 레이아웃과 비교해 보면, 레이아웃에 특별히 추가된 3가지 사항이 있습니다.

추가 min() 함수를 전달합니다.
align-items: flex-start를 지정합니다.
max-width: 89vw 스타일이 있습니다.

추가 min() 함수는 Evan Minto가 자신의 블로그 post minmax() 및 min()을 포함합니다. 읽어 보시는 것을 추천합니다. flex-start 정렬 보정은 다음과 같습니다. 기본 확장 효과를 삭제하여 이 레이아웃의 하위 요소가 더 이상 동일한 높이를 가져야 한다면 자연스럽고 고유한 높이를 가질 수 있습니다. 이 YouTube 동영상에서는 이러한 정렬 추가에 대한 간단한 분석을 제공합니다.

이 게시물에서 max-width: 89vw에 대해 자세히 살펴볼 가치가 있습니다. 스타일이 적용된 레이아웃과 적용되지 않은 레이아웃을 보여드리겠습니다.

어떤 상황인가요? max-width를 지정하면 컨텍스트를 제공합니다. 명시적인 크기 또는 확정된 auto-fit의 크기 조정 레이아웃 알고리즘에서 많은 반복을 할 수 있습니다. 이 부분이 공백은 CSS 그리드 사양에 따라 '전체 너비'입니다. 명확한 크기 또는 최대 크기는 제공됩니다 최대 크기를 제공했습니다.

왜 89vw일까요? "정말 효과가 있었다" 생각해 봅시다. 저와 몇 명의 Chrome 담당자가 예를 들어 100vw로는 충분하지 않으며 이것이 실제로 버그인지 여부입니다.

간격

이 레이아웃의 조화는 대부분 제한된 간격 팔레트에서 발생합니다. 7 있습니다.

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

그리드, CSS @nest, 레벨 5 구문에서 이러한 흐름을 원활하게 사용할 수 있습니다. @media라고 합니다. 다음은 완전한 <main> 레이아웃 스타일의 예입니다.

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
  padding: var(--space-sm);

  @media (width >= 540px) {
    & {
      padding: var(--space-lg);
    }
  }

  @media (width >= 800px) {
    & {
      padding: var(--space-xl);
    }
  }
}

중앙에 콘텐츠가 있는 그리드로, 기본적으로 적당히 패딩됩니다 (예: 모바일). 하지만 사용 가능한 표시 영역 공간이 많아지면 패딩을 늘려서 퍼져나갑니다. 2021년 CSS는 꽤 좋아 보입니다.

이전 레이아웃인 '간격을 위한'을 기억하시나요? 다음은 이 구성요소에서 다음과 같이 표시됩니다.

header {
  display: grid;
  gap: var(--space-xxs);
}

section {
  display: grid;
  gap: var(--space-md);
}

색상

색상을 잘 사용하여 이 디자인이 시선을 사로잡는 데 도움이 되었습니다. 있습니다. 방법은 다음과 같습니다.

:root {
  --surface1: lch(10 0 0);
  --surface2: lch(15 0 0);
  --surface3: lch(20 0 0);
  --surface4: lch(25 0 0);

  --text1: lch(95 0 0);
  --text2: lch(75 0 0);
}

드림

핵심 용어: PostCSS lab() 및 lch() 플러그인은 PostCSS 사전 설정 환경의 일부이며 rgb() 색상을 출력합니다.

저는 표면과 텍스트 색상에 surface-dark 및 surface-darker입니다. 미디어 쿼리에서 빛과 어두움은 의미가 없을 것입니다

기본 설정 미디어 쿼리에서 다음과 같이 뒤집습니다.

:root {
  ...

  @media (prefers-color-scheme: light) {
    & {
      --surface1: lch(90 0 0);
      --surface2: lch(100 0 0);
      --surface3: lch(98 0 0);
      --surface4: lch(85 0 0);

      --text1: lch(20 0 0);
      --text2: lch(40 0 0);
    }
  }
}

드림

시작하기 전에 전반적인 상황과 전략을 간단히 파악하는 것이 중요합니다. 색상 문법 세부 사항에 대해 자세히 알아봅니다. 하지만 제가 조금 앞서 나가서 다시 말씀드리겠습니다.

LCH는 어떤가요?

색 이론에 너무 깊이 파고들지 않고 LCH는 인간 지향 문법입니다. 인코더-디코더는 수학을 통해 색을 측정하는 방식이 아니라 (예: 255). 이것은 인간이 더 쉽게 쓸 수 있고 다른 사람들이 더 쉽게 쓸 수 있다는 점에서 인간은 이러한 조정에 적응할 것입니다.

색상 2: Perception 에피소드가 표시된 pod.link/csspodcast 웹페이지 스크린샷 — </ph> CSS 팟캐스트에서 인지 색상 등에 관해 자세히 알아보세요.

오늘은 이 데모에서 구문과 값을 뒤집는 것에 집중해 보겠습니다. 빛과 어둠을 만듭니다 표면 1개와 텍스트 색상 1개를 살펴보겠습니다.

:root {
  --surface1: lch(10 0 0);
  --text1:    lch(95 0 0);

  @media (prefers-color-scheme: light) {
    & {
      --surface1: lch(90 0 0);
      --text1:    lch(40 0 0);
    }
  }
}

--surface1: lch(10 0 0)는 10% 밝기, 0 크로마, 0 색조로 변환됩니다. 매우 진한 무색 회색입니다. 그런 다음 밝은 모드의 미디어 쿼리에서 밝기가 --surface1: lch(90 0 0);가 있는 90%로 전환됩니다. 이것이 Google 뉴스 이니셔티브의 전략입니다. 두 테마 간에 밝기만 변경하고 디자인에서 요구하거나 접근성을 유지할 수 있는 대비율입니다.

여기서 lch()의 장점은 밝기가 인간 중심이며 %의 변화는 긍정적으로 인식되고 일관성 있게 다른 %입니다. 예를 들어 hsl()는 다음과 같지 않습니다. 제공합니다.

자세히 알아보기 원하는 경우 색상 공간, lch()를 살펴보세요. 곧 출시될 예정입니다.

현재 CSS는 이러한 색상에 전혀 액세스할 수 없습니다. 다시 한 번 말씀드리자면, 현대적인 색감의 3분의 1은 사용할 수 없습니다. 모니터링할 수 있습니다 이 색상은 단순한 색상이 아닌 가장 선명한 색상입니다. 표시할 수 있습니다. 모니터 하드웨어의 발달로 인해 저희 웹사이트는 사라지고 있습니다. 훨씬 빠릅니다.
레아 버루

색상 구성표가 있는 적응형 양식 컨트롤

현재 Safari나 Chromium과 같은 어두운 테마 컨트롤을 제공하는 브라우저들이 많지만 CSS 또는 HTML에서 디자인에 이를 사용하도록 지정해야 합니다.

위의 코드는 DevTools를 사용할 수 있습니다. 데모는 HTML 태그를 사용하는데, 제 생각에는 더 나은 위치:

<meta name="color-scheme" content="dark light">

color-scheme에서 자세히 알아보세요. 기사 작성자: Thomas 스테이너가 있습니다. 얻을 수 있는 것이 많기 때문에 더 효율적입니다.

CSS `accent-color`

최근에는 주변 활동 양식 요소에서는 accent-color이며, 단일 CSS 스타일로 브라우저 입력 요소에 사용되는 색조 색상입니다. 자세한 내용은 여기 GitHub를 참고하세요. 다음을 지정할 수 있습니다. 브라우저에서 지원되므로 체크박스는 분홍빛과 보라색으로 톡톡 튀는 테마를 만들 수 있습니다.

input[type="checkbox"] {
  accent-color: var(--brand);
}

Linux용 Chromium의 분홍색 체크박스 스크린샷

고정된 그라데이션과 포커스 내에서 컬러 팝

컬러는 드물게 사용할 때 가장 돋보이며 제가 원하는 방식 중 하나입니다. 여러 가지 방법이 있습니다.

위 동영상에는 UI 피드백 및 상호작용의 여러 레이어가 있으며, 이를 통해 다음과 같이 상호작용에 개성을 더할 수 있습니다.

맥락 강조
'얼마나 가득 차 있는지'에 대한 UI 피드백 제공 값이 범위 내에 있습니다.
필드에서 입력을 수락한다는 UI 피드백 제공

요소와 상호작용 중일 때 피드백을 제공하기 위해 CSS는 :focus-within 드림 의사 클래스를 사용하여 다양한 요소의 모양을 .fieldset-item, 아주 흥미롭습니다.

.fieldset-item {
  ...

  &:focus-within {
    background: var(--surface2);

    & svg {
      fill: white;
    }

    & picture {
      clip-path: circle(50%);
      background: var(--brand-bg-gradient) fixed;
    }
  }
}

이 요소의 하위 요소 중 하나에 포커스가 있는 경우:

.fieldset-item 배경에는 대비가 높은 표면 색상이 할당됩니다.
중첩된 svg는 대비를 높이기 위해 흰색으로 채워집니다.
중첩된 <picture> clip-path는 완전한 원으로 확장되고 밝은 고정 그라데이션으로 배경이 채워져 있습니다.

기간 설정

다음 HTML 입력 요소를 사용하여 디자인:

<input type="range">

이 요소에는 맞춤설정해야 하는 세 가지 부분이 있습니다.

범위 요소 / 컨테이너
추적
썸

범위 요소 스타일

input[type="range"] {
  /* style setting variables */
  --track-height: .5ex;
  --track-fill: 0%;
  --thumb-size: 3ex;
  --thumb-offset: -1.25ex;
  --thumb-highlight-size: 0px;

  appearance: none;         /* clear styles, make way for mine */
  display: block;
  inline-size: 100%;        /* fill container */
  margin: 1ex 0;            /* ensure thumb isn't colliding with sibling content */
  background: transparent;  /* bg is in the track */
  outline-offset: 5px;      /* focus styles have space */
}

CSS의 처음 몇 줄은 스타일의 맞춤 부분입니다. 명확하게 라벨을 지정하는 데 도움이 됩니다. 나머지 스타일은 대부분 구성요소의 까다로운 부분을 빌드하기 위한 일관성 있는 기반을 제공합니다.

트랙 스타일

input[type="range"]::-webkit-slider-runnable-track {
  appearance: none; /* clear styles, make way for mine */
  block-size: var(--track-height);
  border-radius: 5ex;
  background:
    /* hard stop gradient:
        - half transparent (where colorful fill we be)
        - half dark track fill
        - 1st background image is on top
    */
    linear-gradient(
      to right,
      transparent var(--track-fill),
      var(--surface1) 0%
    ),
    /* colorful fill effect, behind track surface fill */
    var(--brand-bg-gradient) fixed;
}

이를 위한 요령은 생동감 있는 채우기 색상을 사용할 수 있습니다. 이 작업은 위에 하드스톱 그라데이션이 있습니다. 그래디언트는 채우기 비율까지는 투명하며, 를 사용합니다. 채워지지 않은 표면 뒤에는 전체 너비 색상이며, 투명도로 표시될 때까지 기다립니다.

트랙 채우기 스타일

내 디자인에서는 채우기 스타일을 유지하기 위해 JavaScript가 필요합니다. 거기 CSS 전용 전략이지만 thumb 요소의 높이가 같아야 합니다. 이 한계 내에서 하모니를 찾을 수 없었습니다.

/* grab sliders on page */
const sliders = document.querySelectorAll('input[type="range"]')

/* take a slider element, return a percentage string for use in CSS */
const rangeToPercent = slider => {
  const max = slider.getAttribute('max') || 10;
  const percent = slider.value / max * 100;

  return `${parseInt(percent)}%`;
};

/* on page load, set the fill amount */
sliders.forEach(slider => {
  slider.style.setProperty('--track-fill', rangeToPercent(slider));

  /* when a slider changes, update the fill prop */
  slider.addEventListener('input', e => {
    e.target.style.setProperty('--track-fill', rangeToPercent(e.target));
  })
})

이를 통해 시각적으로도 멋진 업그레이드를 만들어낼 수 있을 것 같습니다. 슬라이더는 JavaScript에서는 --track-fill 속성이 필요하지 않으므로 채우기 스타일(없는 경우) JavaScript를 사용할 수 있는 경우 맞춤 사용자 변경사항을 관찰하면서 맞춤 속성을 반환합니다.

좋은 생각이네요 게시 CSS-Tricks 작성자: Ana Tudor를 학습시키고 트랙 채우기 다음 항목도 찾았습니다. range 요소가 매우 재미있습니다.

엄지 손가락 스타일

input[type="range"]::-webkit-slider-thumb {
  appearance: none; /* clear styles, make way for mine */
  cursor: ew-resize; /* cursor style to support drag direction */
  border: 3px solid var(--surface3);
  block-size: var(--thumb-size);
  inline-size: var(--thumb-size);
  margin-top: var(--thumb-offset);
  border-radius: 50%;
  background: var(--brand-bg-gradient) fixed;
}

이러한 스타일의 대부분은 멋진 원을 만드는 것입니다. 이때에도 이미지를 통일하는 고정된 배경 그라데이션이 thumbs, 트랙 및 관련 SVG 요소의 동적 색상. box-shadow를 분리할 수 있도록 상호작용 스타일을 분리했습니다. 기법은 다음과 같습니다.

@custom-media --motionOK (prefers-reduced-motion: no-preference);

::-webkit-slider-thumb {
  …

  /* shadow spread is initally 0 */
  box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);

  /* if motion is OK, transition the box-shadow change */
  @media (--motionOK) {
    & {
      transition: box-shadow .1s ease;
    }
  }

  /* on hover/active state of parent, increase size prop */
  @nest input[type="range"]:is(:hover,:active) & {
    --thumb-highlight-size: 10px;
  }
}

드림

목표는 관리가 용이하고 사용자 피드백을 위한 애니메이션 하이라이트를 제공하는 것이었습니다. 상자 그림자를 사용하면 트리거나 레이아웃을 만듭니다. 내가 하기 흐리지 않고 테두리의 원형과 일치하는 그림자를 만들어 보겠습니다. thumb 요소 그런 다음 마우스 오버 시 펼치기 크기를 변경하고 전환합니다.

체크박스의 강조표시 효과만이 이렇게 간단하다면...

교차 브라우저 선택기

교차 브라우저를 달성하려면 이러한 -webkit- 및 -moz- 선택기가 필요했습니다 일관성:

input[type="range"] {
  &::-webkit-slider-runnable-track {}
  &::-moz-range-track {}
  &::-webkit-slider-thumb {}
  &::-moz-range-thumb {}
}

드림

커스텀 체크박스

다음 HTML 입력 요소를 사용하여 디자인:

<input type="checkbox">

이 요소에는 맞춤설정해야 하는 세 가지 부분이 있습니다.

체크박스 요소
관련 라벨
하이라이트 효과

체크박스 요소

input[type="checkbox"] {
  inline-size: var(--space-sm);   /* increase width */
  block-size: var(--space-sm);    /* increase height */
  outline-offset: 5px;            /* focus style enhancement */
  accent-color: var(--brand);     /* tint the input */
  position: relative;             /* prepare for an absolute pseudo element */
  transform-style: preserve-3d;   /* create a 3d z-space stacking context */
  margin: 0;
  cursor: pointer;
}

transform-style 및 position 스타일은 나중에 소개할 의사 요소를 준비합니다. 강조표시의 스타일을 지정합니다 그 외에는 대부분 사소하고 독단적인 스타일의 것들에 대해 이야기했습니다. 커서를 포인터로 만들고 윤곽선 오프셋, 기본 체크박스가 너무 작음, accent-color가 지원됨 브랜드 색 구성표의 체크박스를 선택합니다.

체크박스 라벨

체크박스에 라벨을 제공하는 것이 중요한 이유는 두 가지입니다. 첫 번째는 'on 또는 off'라는 질문에 답하기 위해 체크박스 값의 용도를 나타냅니다. 두 번째는 UX로, 웹 사용자는 웹 및 모바일 앱의 체크박스를 선택합니다.

입력

<input
  type="checkbox"
  id="text-notifications"
  name="text-notifications"
>

라벨

<label for="text-notifications">
  <h3>Text Messages</h3>
  <small>Get notified about all text messages sent to your device</small>
</label>

라벨에 ID로 체크박스를 가리키는 for 속성(<label for="text-notifications">)을 배치합니다. 체크박스에서 이름과 ID를 두 배로 표시하여 마우스나 스크린 리더와 같은 다양한 도구와 기술을 사용하여 찾을 수 있도록 합니다. <input type="checkbox" id="text-notifications" name="text-notifications"> :hover, :active 등이 연결 시 무료로 제공되므로 양식과 상호작용할 수 있는 방법을 알아봅니다.

체크박스 강조표시

인터페이스를 일관되게 유지하고 싶습니다. 슬라이더 요소에는 체크박스와 함께 사용할 썸네일 하이라이트를 선택합니다. 썸네일 이미지: box-shadow 및 spread 속성을 사용하여 섀도우 업을 확장하고 감소합니다. 하지만 여기에서는 작동하지 않습니다. 왜냐하면 확인란이 그리고 be, 정사각형입니다.

유사 요소를 사용하여 동일한 시각 효과를 얻을 수 있었고 까다로운 CSS가 많아서

@custom-media --motionOK (prefers-reduced-motion: no-preference);

input[type="checkbox"]::before {
  --thumb-scale: .01;                        /* initial scale of highlight */
  --thumb-highlight-size: var(--space-xl);

  content: "";
  inline-size: var(--thumb-highlight-size);
  block-size: var(--thumb-highlight-size);
  clip-path: circle(50%);                     /* circle shape */
  position: absolute;                         /* this is why position relative on parent */
  top: 50%;                                   /* pop and plop technique (https://web.dev/centering-in-css#5-pop-and-plop) */
  left: 50%;
  background: var(--thumb-highlight-color);
  transform-origin: center center;            /* goal is a centered scaling circle */
  transform:                                  /* order here matters!! */
    translateX(-50%)                          /* counter balances left: 50% */
    translateY(-50%)                          /* counter balances top: 50% */
    translateZ(-1px)                          /* PUTS IT BEHIND THE CHECKBOX */
    scale(var(--thumb-scale))                 /* value we toggle for animation */
  ;
  will-change: transform;

  @media (--motionOK) {                       /* transition only if motion is OK */
    & {
      transition: transform .2s ease;
    }
  }
}

/* on hover, set scale custom property to "in" state */
input[type="checkbox"]:hover::before {
  --thumb-scale: 1;
}

원 유사 요소를 만드는 것은 간단한 작업이지만 이 요소를 너무 어려웠습니다. 여기는 전과 문제를 해결한 후 다음과 같이 표시됩니다.

마이크로 상호작용은 물론이고 시각적인 요소를 일관성 애니메이션 크기 조정 기술은 다른 곳에서 확인할 수 있습니다. 맞춤 속성을 새 값으로 설정하고 CSS가 이 값을 전환하도록 합니다. 자동 조정됩니다. 여기서 핵심 기능은 translateZ(-1px)입니다. 이 3D 공간을 만들었고 이 가상 요소 하위 요소는 3D 공간을 사용하여 3D 공간을 z 공간에 조금씩 다시 배치하면 됩니다.

접근성

YouTube 동영상은 마우스, 키보드 및 키보드의 작동 방식을 스크린 리더와 상호작용합니다. 제가 사용할 수 있는 확인하시기 바랍니다.

HTML 요소 선택

<form>
<header>
<fieldset>
<picture>
<label>
<input>

각각에는 사용자 탐색 도구에 대한 힌트와 팁이 포함되어 있습니다. 일부 요소 일부는 상호작용 힌트를 제공하고, 일부는 상호작용을 연결하고, 또 일부는 아이디어를 형성하는 데 도움을 줍니다. 접근성 트리를 보여줍니다.

HTML 속성

스크린 리더에 필요하지 않은 요소를 숨길 수 있고, 이 경우 슬라이더 옆의 아이콘을 클릭합니다.

<picture aria-hidden="true">

위 동영상은 Mac OS의 스크린리더 흐름을 보여줍니다. 입력 데이터가 포커스는 한 슬라이더에서 다음 슬라이더로 똑바로 이동합니다. 이는 우리가 다음 슬라이더로 이동 중 멈췄을 수도 있는 아이콘입니다. 이 방법이 없으면 속성이 있는 경우, 사용자는 잠시 멈추고 음악을 듣고 사진을 볼 수 없습니다.

브라우저 간 스크린리더 상호작용을 테스트해야 합니다. 원래 데모에서는 aria-hidden="true"가 있는 요소 목록에 <label>를 포함했지만, 트위터 대화에서 브라우저 간 차이점이 드러난 후 삭제되었습니다.

SVG는 복잡한 계산입니다. 마우스를 자유롭게 가져가기 위해 <title> 요소를 추가해 보겠습니다. 제목 및 사람이 읽을 수 있는 코멘트를 사용하여 수학이 생성하는 항목에 대한 인간이 읽을 수 있는 주석을 추가할 수 있습니다.

<svg viewBox="0 0 24 24">
  <title>A note icon</title>
  <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
</svg>

그 외에는 명확하게 표시된 HTML을 충분히 사용하여 양식에서 마우스, 키보드, 비디오 게임 컨트롤러 및 스크린리더에 아주 잘 맞습니다.

자바스크립트

JavaScript에서 트랙 채우기 색상을 관리하는 방법은 이미 다루었습니다. 이제 <form> 관련 JavaScript를 살펴보겠습니다.

const form = document.querySelector('form');

form.addEventListener('input', event => {
  const formData = Object.fromEntries(new FormData(form));
  console.table(formData);
})

양식이 상호작용하고 변경될 때마다 콘솔에 양식이 다음과 같이 기록됩니다. 서버에 제출하기 전에 쉽게 검토할 수 있도록 객체를 테이블에 포함시킵니다.

양식 데이터가 표에 표시된 console.table() 결과의 스크린샷

결론

이제 내가 어떻게 했는지 알았으니 어떻게 하면 어떨까?! 재미를 더하는 게임 구성요소 아키텍처를 보여줍니다. 누가 첫 번째 버전을 만들며 선호하는 프레임워크는 무엇인가요? 🙂

접근방식을 다각화하고 웹에서 빌드하는 방법을 모두 알아보겠습니다. 데모를 만들고 링크를 트윗하여 추가하면 됩니다. 아래의 커뮤니티 리믹스 섹션으로 이동하세요.

커뮤니티 리믹스

@tomayac이 마우스 오버 영역을 추가할 수 있습니다. 이 버전은 버전 사이에 마우스 오버 간격이 없습니다. 요소: demo 및 출처.

설정 구성요소 빌드

개요

레이아웃

틈새를 공략하기 위한 용도

자연 격자 래핑

콘텐츠 중앙에 배치

자동 맞춤 최솟값 반복

간격

색상

LCH는 어떤가요?

색상 구성표가 있는 적응형 양식 컨트롤

CSS accent-color

고정된 그라데이션과 포커스 내에서 컬러 팝

기간 설정

범위 요소 스타일

트랙 스타일

트랙 채우기 스타일

엄지 손가락 스타일

교차 브라우저 선택기

커스텀 체크박스

체크박스 요소

체크박스 라벨

체크박스 강조표시

접근성

HTML 요소 선택

HTML 속성

자바스크립트

결론

커뮤니티 리믹스

CSS `accent-color`