컨트롤 상호작용 상태
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
호버 상태 Hover State
포인터가 요소 위에 위치한 상태.
기능 발견·조작 가능성 표현.
하나의 요소에 포커스·선택·오류 등 여러 상태가 동시에 존재할 수 있다. 각 상태의 의미와 시각 우선순위를 분리한다.
포커스 상태 Focus State
키보드 등 입력을 현재 받을 대상으로 지정된 상태.
탭 이동·입력 위치.
선택된 상태와 동일하지 않으며 두 상태가 독립적으로 존재할 수 있다.
눌림 상태 Pressed State
버튼을 누르는 중이거나 토글 버튼이 눌린 상태를 나타낸다.
입력 피드백·토글.
순간 누름과 aria-pressed의 지속 토글 상태를 문맥에 맞게 구분한다.
활성화 상태 Active State
현재 실행·활성 항목을 뜻하는 일반 표현이나 CSS의 작동 중 상태.
탭·메뉴·버튼.
CSS :active는 대체로 활성화하는 동안의 상태이며 선택 탭을 뜻하는 active와 다르다.
선택 상태 Selected State
목록·탭 등에서 현재 선택된 항목인 상태.
탭·옵션·표 선택.
하나의 요소에 포커스·선택·오류 등 여러 상태가 동시에 존재할 수 있다. 각 상태의 의미와 시각 우선순위를 분리한다.
비활성 상태 Disabled State
현재 컨트롤을 사용할 수 없도록 제한된 상태.
조건 미충족·권한 제한.
단순 회색 표시만으로 비활성 동작이 구현되지는 않는다.
읽기 전용 상태 Read-only State
내용을 확인할 수 있으나 변경은 제한되는 상태.
문서·입력값 검토.
비활성과 달리 선택·복사·초점 허용 여부가 다를 수 있다.
포커스 표시 필요 상태 Focus-visible
브라우저 판단 등에 따라 포커스 표시를 보여주는 상태를 다루는 개념.
키보드 중심 초점 링.
CSS :focus-visible은 단순히 모든 마우스 포커스를 숨기는 규칙과 같지 않다.
기본 상태 Default State
특별한 상호작용이나 예외가 없는 기본 표현 상태.
버튼·메뉴·입력 컴포넌트 기준.
하나의 요소에 포커스·선택·오류 등 여러 상태가 동시에 존재할 수 있다. 각 상태의 의미와 시각 우선순위를 분리한다.
체크 상태 Checked State
체크박스·라디오 등 체크 가능한 컨트롤이 선택된 상태.
선택·설정 항목.
하나의 요소에 포커스·선택·오류 등 여러 상태가 동시에 존재할 수 있다. 각 상태의 의미와 시각 우선순위를 분리한다.
미체크 상태 Unchecked State
체크 가능한 컨트롤이 체크되지 않은 상태.
선택 해제·옵션 기본값.
하나의 요소에 포커스·선택·오류 등 여러 상태가 동시에 존재할 수 있다. 각 상태의 의미와 시각 우선순위를 분리한다.
혼합 선택 상태 Mixed State
묶인 하위 항목이 일부만 선택된 상태.
전체 선택 체크박스.
하나의 요소에 포커스·선택·오류 등 여러 상태가 동시에 존재할 수 있다. 각 상태의 의미와 시각 우선순위를 분리한다.
처리 중 상태 Busy State
현재 업데이트나 작업을 처리하고 있는 상태.
데이터 영역·저장 버튼.
하나의 요소에 포커스·선택·오류 등 여러 상태가 동시에 존재할 수 있다. 각 상태의 의미와 시각 우선순위를 분리한다.
펼침 상태 Expanded State
연결된 하위 내용이나 패널이 열려 있는 상태.
아코디언·메뉴·트리.
하나의 요소에 포커스·선택·오류 등 여러 상태가 동시에 존재할 수 있다. 각 상태의 의미와 시각 우선순위를 분리한다.
접힘 상태 Collapsed State
하위 내용이 접혀 있거나 닫힌 상태.
트리·상세 패널.
하나의 요소에 포커스·선택·오류 등 여러 상태가 동시에 존재할 수 있다. 각 상태의 의미와 시각 우선순위를 분리한다.
드래그 중 상태 Dragging State
대상을 끌어 이동·재정렬하는 상호작용이 진행 중인 상태.
카드·파일·캔버스 객체.
하나의 요소에 포커스·선택·오류 등 여러 상태가 동시에 존재할 수 있다. 각 상태의 의미와 시각 우선순위를 분리한다.
놓기 대상 상태 Drop Target State
끌고 있는 항목을 받을 영역으로 활성화된 상태.
업로드·보드·편집기 배치.
하나의 요소에 포커스·선택·오류 등 여러 상태가 동시에 존재할 수 있다. 각 상태의 의미와 시각 우선순위를 분리한다.
유효하지 않은 상태 Invalid State
입력값이 적용된 검증 규칙을 충족하지 못한 상태.
폼 검증.
오류 이유와 수정 방법을 함께 제공한다.
유효 상태 Valid State
입력값이 지정한 검증 범위를 통과한 상태.
입력 검증 피드백.
클라이언트 형식 검증이 서버 저장 성공까지 보증하지는 않는다.
방문 상태 Visited State
사용자가 이전에 방문한 링크에 적용되는 상태.
링크 내비게이션.
브라우저 개인정보 보호로 사용 가능한 스타일·조회 동작이 제한될 수 있다.
Control Interaction States
Open an entry for its visual reference, comparisons and source-language text.
Hover State 호버 상태
The state in which the pointer is positioned over an element.
Feature discovery and communicating interactivity.
An element can have focus, selection, error, and other states simultaneously. Separate their meanings and visual priorities.
Focus State 포커스 상태
The state identifying the element currently designated to receive keyboard or other input.
Tab navigation and input location.
Focus is not the same as selection; the two states can exist independently.
Pressed State 눌림 상태
The state of a button while being pressed, or the retained pressed state of a toggle button.
Input feedback and toggles.
Distinguish a momentary press from the persistent toggle state expressed by aria-pressed.
Active State 활성화 상태
A general term for the currently active item, or the CSS state during activation.
Tabs, menus, and buttons.
CSS :active generally describes activation in progress, not an active tab's selected state.
Selected State 선택 상태
The state identifying the currently selected list item, tab, or other option.
Tab, option, and table selection.
An element can have focus, selection, error, and other states simultaneously. Separate their meanings and visual priorities.
Disabled State 비활성 상태
A state in which a control is currently unavailable for use.
Unmet conditions and permission restrictions.
Making a control gray does not by itself implement disabled behavior.
Read-only State 읽기 전용 상태
A state allowing content to be viewed but not modified.
Reviewing documents and input values.
Unlike disabled controls, read-only controls may still allow selection, copying, or focus.
Focus-visible 포커스 표시 필요 상태
A focus state used when the browser determines that a visible focus indicator is appropriate.
Keyboard-focused focus rings.
CSS :focus-visible is not simply a rule that hides all mouse-triggered focus.
Default State 기본 상태
The baseline presentation state without a special interaction or exception.
Baseline states for buttons, menus, and input components.
An element can have focus, selection, error, and other states simultaneously. Separate their meanings and visual priorities.
Checked State 체크 상태
The selected state of a checkable control, such as a checkbox or radio button.
Selection and settings items.
An element can have focus, selection, error, and other states simultaneously. Separate their meanings and visual priorities.
Unchecked State 미체크 상태
The unselected state of a checkable control.
Deselection and default option values.
An element can have focus, selection, error, and other states simultaneously. Separate their meanings and visual priorities.
Mixed State 혼합 선택 상태
The state in which only some associated child items are selected.
Select-all checkboxes.
An element can have focus, selection, error, and other states simultaneously. Separate their meanings and visual priorities.
Busy State 처리 중 상태
The state of currently processing an update or operation.
Data regions and save buttons.
An element can have focus, selection, error, and other states simultaneously. Separate their meanings and visual priorities.
Expanded State 펼침 상태
The state in which associated child content or a panel is open.
Accordions, menus, and trees.
An element can have focus, selection, error, and other states simultaneously. Separate their meanings and visual priorities.
Collapsed State 접힘 상태
The state in which child content is folded away or closed.
Trees and detail panels.
An element can have focus, selection, error, and other states simultaneously. Separate their meanings and visual priorities.
Dragging State 드래그 중 상태
The state during an interaction that drags an item to move or reorder it.
Cards, files, and canvas objects.
An element can have focus, selection, error, and other states simultaneously. Separate their meanings and visual priorities.
Drop Target State 놓기 대상 상태
The active state of a region that can receive the item being dragged.
Uploads, boards, and editor placement.
An element can have focus, selection, error, and other states simultaneously. Separate their meanings and visual priorities.
Invalid State 유효하지 않은 상태
The state in which an input fails its applicable validation rules.
Form validation.
Provide both the reason for an error and how to correct it.
Valid State 유효 상태
The state in which an input passes the specified validation scope.
Input validation feedback.
Client-side format validation does not guarantee successful server storage.
Visited State 방문 상태
The state applied to a link that the user has visited previously.
Link navigation.
Browser privacy protections may restrict available styling and inspection behavior.