의사 클래스

의사 클래스 프리픽스를 클래스 앞에 붙여서 상태별 스타일을 적용합니다. 32개의 의사 클래스를 지원합니다.

{의사클래스}-{클래스}

인터랙션

프리픽스	CSS	예시
`hover-`	:hover	`hover-bg333333`
`focus-`	:focus	`focus-bc6366f1`
`focus-within-`	:focus-within	`focus-within-bc6366f1`
`focus-visible-`	:focus-visible	`focus-visible-bc6366f1`
`active-`	:active	`active-bg000000`

폼 상태

프리픽스	CSS
`disabled-`	:disabled
`enabled-`	:enabled
`checked-`	:checked
`indeterminate-`	:indeterminate
`valid-`	:valid
`invalid-`	:invalid
`required-`	:required
`optional-`	:optional
`in-range-`	:in-range
`out-of-range-`	:out-of-range
`read-only-`	:read-only
`placeholder-shown-`	:placeholder-shown
`autofill-`	:autofill
`user-invalid-`	:user-invalid
`user-valid-`	:user-valid

링크 / 기타

프리픽스	CSS
`link-`	:link
`visited-`	:visited
`any-link-`	:any-link
`target-`	:target
`empty-`	:empty
`fullscreen-`	:fullscreen
`playing-`	:playing
`paused-`	:paused
`modal-`	:modal
`picture-in-picture-`	:picture-in-picture
`default-`	:default

사용 예시

<!-- 호버 버튼 -->
<button class="bg6366f1 hover-bg4f46e5 cFFFFFF tall200msease cp">
  버튼
</button>

<!-- 포커스 인풋 -->
<input class="b1pxsolidDDDDDD focus-bc6366f1 p12px br4px tall200msease" />

<!-- disabled 상태 -->
<button class="bg6366f1 disabled-o50 disabled-pen cFFFFFF p12px br8px" disabled>
  비활성
</button>

<!-- 미디어 쿼리와 조합 -->
<div class="hover-bg333333 sm-hover-bg000000">...</div>