CSS Basic User Interface

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

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

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

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

• accent-color
• appearance
• caret, 다음을 요약한 것:
  • caret-color
  • caret-shape
• cursor
• nav-down Experimental
• nav-left Experimental
• nav-right Experimental
• nav-up Experimental
• outline, 다음을 요약한 것:
  • outline-color
  • outline-style
  • outline-width
• outline-offset
• pointer-events
• resize
• user-select

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

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

• CSS cursor 속성
• SVG cursor 속성
• CSS :focus, :focus-within, 그리고 :focus-visible 의사클래스
• CaretPosition 인터페이스

• 유용하고 사용 가능한 포커스 인디케이터 디자인을 위한 팁 (2016)