CSS Basic User Interface

CSS Basic User Interface 모듈을 사용하면 유저 인터페이스와 관련된 기능의 렌더링과 기능을 정의할 수 있습니다. 이에는 윤곽선 속성, 포인팅 장치와 키보드에 대한 시각적 피드백, 그리고 UI 위젯의 기본 외관을 변경하는 것이 포함됩니다.

기본 사용자 인터페이스 속성은 마우스 커서와 키보드 방향 네비게이션 스타일링, 편집 가능한 요소에 포커스가 있을 때 캐럿 커서 스타일링을 포함하여 상호작용하는 요소에 시각적 단서를 제공함으로써 사용자 경험과 접근성을 향상시키는 데 사용될 수 있습니다. 이 모듈은 요소의 박스모델 차원과 스타일에 영향을 미치지 않고 포커스가 있는 (또는 없는) 요소에 윤곽선을 제공합니다. 이 UI 모듈은 또한 사용자 인터페이스 컨트롤의 스타일링을 가능하게 합니다.

기본 사용자 인터페이스의 실제 적용

기본 사용자 인터페이스 속성이 UI 기능의 모습을 어떻게 변경할 수 있는지 보려면 이 샘플의 요소와 상호작용해 보세요. 이 샘플의 일부 기능은 사용성을 향상시키는 반면, 일부는 사용자 경험을 해칩니다.

CSS의 outlineoutline-offset 속성은 사용자에게 현재 어떤 요소가 포커스를 가지고 있는지 피드백을 제공하는 데 사용되었습니다. accent-color는 모든 폼 컨트롤에 테마 색상을 제공합니다. 텍스트를 편집할 때 나타나는 캐럿은 caret-color 속성 덕분에 같은 색상을 가집니다. 이 모든 것들은 UI 개선으로 간주될 수 있습니다.

일부 기능은 사용성을 해칩니다. cursor 속성은 브라우저 기본값에서 커서를 변경하는 데 사용되어 혼란을 초래합니다. resize 속성은 두 번째 <textarea>가 크기 조정 가능하지 않게 하며, pointer-events 속성은 세 번째 <textarea>가 클릭 이벤트를 받지 못하게 합니다. 그러나 키보드를 사용하여 여전히 포커스를 맞출 수 있습니다.

이 기본 사용자 인터페이스 샘플의 코드를 보려면, Github에서 소스를 확인하세요.

참고서

속성

안내서

form 배우기: 고급 폼 스타일링

appearance가 어떻게 폼 컨트롤 스타일링에 사용될 수 있는지 설명합니다.

관련 개념

명세

Specification
CSS Basic User Interface Module Level 4

참고 자료