HowTo 구성요소
'HowTo: 구성요소'는 일반적인 UI 패턴을 구현하는 웹 구성요소 모음입니다. 이러한 구현의 목적은 교육 리소스 역할을 하는 것입니다. 다양한 구성요소의 빽빽한 주석이 달린 구현을 읽고 이를 통해 학습할 수 있습니다. 이는 UI 라이브러리가 아님을 명시적으로 나타내며 프로덕션에서는 사용하면 안 됩니다.
구성요소
<howto-checkbox>: 양식의 불리언 옵션을 나타냅니다. 가장 일반적인 체크박스 유형은 사용자가 선택과 선택 해제의 두 가지 옵션 간에 전환할 수 있는 이중 유형입니다.<howto-tabs>: 표시되는 콘텐츠를 여러 패널로 구분하여 제한합니다.<howto-tooltip>: 요소가 키보드 포커스를 받거나 마우스가 요소 위로 마우스를 가져갈 때 요소와 관련된 정보를 표시하는 팝업입니다.
목표
이 페이지의 목표는 접근성이 뛰어나고 성능이 우수하며 유지관리가 쉽고 스타일 지정이 간편한 견고한 구성요소를 작성하기 위한 권장사항을 보여주는 것입니다. 각 구성요소는 완전히 독립적이므로 참조 구현으로 사용할 수 있습니다.
접근성
구성요소는 접근성 향상된 리치 인터넷 애플리케이션 표준인 ARIA를 설명하고 보여주는 가이드인 WAI ARIA 작성 관행을 밀접하게 따릅니다. ARIA에 익숙하지 않다면 WebFundamentals의 소개를 확인하세요. 각 구성요소는 제작 관행의 관련 섹션으로 연결됩니다. 필수는 아니지만 코드를 살펴보기 전에 제작 관행 섹션을 읽어보는 것이 좋습니다.
성능
웹 개발에서 '성능'이라는 용어는 다양한 항목에 적용될 수 있습니다. <howto>의 맥락에서 성능은 주로 휴대기기에서도 60fps로 일관되게 실행되는 애니메이션을 의미합니다.
시각적 유연성
레이아웃을 제외하거나 선택되었거나 활성 상태임을 나타내는 경우를 제외하고는 구성요소에 스타일을 지정하지 않는 것이 좋습니다. 이는 구현을 시각적으로 유연하고 집중적으로 유지하기 위함입니다. 장식에 시간을 들이지 않으므로 구성요소가 작동하는 데 절대적으로 필요한 코드로만 제한됩니다. 구성요소가 작동하는 데 스타일이 필요한 경우 스타일에 그 이유를 설명하는 주석이 표시됩니다.
유지관리 가능한 코드
HowTo: Components는 참조 구현이므로 읽기 쉽고 쉽게 이해할 수 있는 코드를 작성하는 데 많은 시간을 할애하여 주석을 빽빽하게 달았습니다.
비목표
라이브러리 / 프레임워크 / 도구 키트임
<howto> 구성요소는 프로덕션에서 사용하도록 설계되지 않았으므로 npm, bower 또는 기타 플랫폼에 게시되지 않습니다. 간결하고 읽기 쉬운 코드를 위해 최신 JavaScript API를 사용하고 웹 구성요소 표준을 구현하는 최신 브라우저를 지원합니다. 이러한 구현을 읽은 후 필요에 맞게 코드를 조정할 수 있습니다.
이전 버전과의 호환성 유지
이 코드는 직접 사용해서는 안 됩니다. 더 나은 구현이 발견되면 요소의 구현과 API를 대폭 변경할 수 있으며 변경할 가능성이 매우 높습니다. 이 리소스는 웹 UI 빌드 권장사항을 공유, 탐색, 토론할 수 있는 살아 있는 리소스입니다.
완료 상태여야 합니다.
현재 Google은 WAI ARIA 작성 관행에서 찾을 수 있는 *모든 *구성요소를 구현하지 않고 있으며 앞으로도 구현하지 않을 가능성이 높습니다. 그러나 다른 <howto> 구성요소에서 사용된 원칙을 재사용하면 독자가 누락된 구성요소를 구현할 수 있습니다.