체크 상자
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
1. 개요
체크 상자는 웹 폼에서 사용되는 HTML 요소로, 사용자가 선택 여부를 표시하는 데 사용된다. 유니코드에는 다양한 체크 상자 기호가 있으며, 일부 응용 소프트웨어에서는 세 가지 상태를 갖는 체크 상자를 지원하기도 한다. 삼중 상태 체크 상자는 선택됨, 선택 해제됨, 불확정 상태를 가지며, 파일 선택 등에서 유용하게 사용된다. HTML5에서는 자바스크립트를 통해 삼중 상태 체크 상자를 구현할 수 있도록 `indeterminate` 속성을 제공한다.
더 읽어볼만한 페이지
| 체크 상자 | |
|---|---|
| 체크 상자 | |
 | |
| 종류 | 그래픽 사용자 인터페이스 요소 |
| 기능 | |
| 용도 | 사용자가 미리 정의된 선택지 중 하나 또는 여러 개를 선택하거나 선택 해제할 수 있도록 함 |
| 동작 방식 | |
| 상태 | 선택됨 (checked) 선택 해제됨 (unchecked) |
| 시각적 표현 | 작은 사각형 상자로 표현되며, 선택되었을 때 내부가 채워지거나 체크 표시가 나타남 |
| 활용 | |
| 예시 | 설문 조사 설정 옵션 작업 목록 |
2. HTML
HTML 폼에서 HTML 요소인 `
유니코드에서는 다음과 같은 체크 상자를 사용할 수 있다.
일부 응용 소프트웨어에서는 일반적인 체크 상자의 두 가지 상태(선택됨, 선택 해제됨) 외에 세 번째 상태를 사용하는 경우가 있다. 이는 3값 논리에 기반한 것으로, 주로 여러 하위 항목들의 상태가 서로 섞여 있는 혼합 상태를 나타내기 위해 사용된다. 이 세 번째 상태는 보통 체크 상자 안에 작은 사각형이나 대시 등으로 표시되며, 불확정 상태(indeterminate state영어)라고 부른다. 사용자가 직접 이 상태를 선택하기보다는 시스템이 현재 상태를 보여주기 위해 사용하는 경우가 많으며, 클릭 시 동작 방식은 구현에 따라 다를 수 있다. 웹 표준인 HTML5에서도 이를 지원한다.[9]`를 사용하면 체크 상자를 표시할 수 있다.[3] 이는 XHTML에서 `` 형태로 쓰이기도 한다.
3. 유니코드
기호 유니코드 (16진) 유니코드 (10진) JIS X 0213 문자 참조 이름 ☐ U+2610 9744 - ☐ 또는 ☐ BALLOT BOX ☑ U+2611 9745 - ☑ 또는 ☑ BALLOT BOX WITH CHECK ☒ U+2612 9746 - ☒ 또는 ☒ BALLOT BOX WITH X
4. 삼중 상태 체크박스
4. 1. 불확정 상태
일부 응용 소프트웨어는 일반적인 체크 상자가 제공하는 두 가지 상태(선택됨, 선택 해제됨) 외에 제3의 상태, 즉 불확정 상태를 사용하기도 한다. 이는 3값 논리를 적용한 것으로, 체크 상자 안에 작은 사각형이나 대시를 표시하거나, 혹은 체크 상자 자체를 회색으로 비활성화된 것처럼 보이게 하여 표현한다.
이 세 번째 상태는 해당 항목이 선택되지도, 선택 해제되지도 않았음을 나타낸다. 주로 여러 항목의 상태를 나타내는 상위 체크 상자에서 하위 항목들의 상태가 혼합되어 있을 때 사용된다. 예를 들어, FTP 클라이언트에서 전송할 파일을 선택할 때 트리 뷰나 헤더가 있는 리스트 뷰를 사용하는 경우를 생각해 볼 수 있다. 특정 폴더 안의 파일 중 일부만 선택하고 나머지는 선택하지 않았다면, 해당 폴더 옆의 체크 상자는 불확정 상태(작은 사각형이나 대시 표시)가 된다.
일반적으로 사용자는 불확정 상태를 직접 선택할 수 없다. 이 상태는 단순히 현재 하위 항목들의 상태가 혼합되어 있음을 보여주는 시각적 표시일 뿐이다. 불확정 상태의 체크 상자를 클릭하면 대개 다음 두 가지 중 하나로 동작한다.
이후 계속 클릭하면 전체 선택과 전체 선택 해제 상태를 오가게 되며, 다시 불확정 상태로 돌아가지는 않는다.
마이크로소프트 윈도우의 파일 탐색기에서 여러 파일이나 폴더를 선택한 후 속성 창을 열면, 파일 속성(읽기 전용 등)을 설정하는 체크 박스가 불확정 상태로 표시될 수 있는데, 이는 선택된 항목들의 해당 속성값이 서로 다르기 때문이다.
한편, 일부 구현에서는 사용자가 불확정 상태를 포함한 세 가지 상태 사이를 전환할 수 있도록 허용하기도 한다. 이 경우 시스템은 하위 항목들의 원래 선택/비선택 상태를 기억하고 있다가, 사용자가 불확정 상태를 다시 선택하면 이전의 혼합 상태로 복원시켜 주는 실행 취소 기능과 유사하게 작동한다.[8]
웹 기술에서는 HTML5 표준에 `input` 요소의 `indeterminate` 속성이 추가되어, 자바스크립트를 이용해 체크 상자의 불확정 상태를 제어할 수 있게 되었다.[9]
4. 2. 동작 방식
일부 응용 소프트웨어는 일반적인 체크 상자가 제공하는 두 가지 상태(선택됨, 선택 해제됨) 외에 3값 논리를 허용하는 체크 상자를 사용하기도 한다. 이 세 번째 상태는 체크 상자 안에 사각형이나 대시로 표시되며, 해당 상태가 '선택되지도 않았고, 선택 해제되지도 않았음'을 나타낸다. 이는 주로 체크 상자가 여러 항목의 상태를 동시에 나타낼 때, 그 항목들의 상태가 서로 섞여 있을 경우(혼합 상태) 사용된다. 이 불확정 상태(indeterminate state영어)는 일반적으로 사용자가 직접 선택할 수는 없으며, 클릭하면 '선택됨' 상태로 바뀐다.
예를 들어, FTP 클라이언트 등에서 전송할 파일을 선택할 때 트리 뷰나 헤더가 있는 리스트 뷰를 사용하여 폴더 단위로 파일을 선택하는 기능을 제공하는 경우가 있다. 만약 어떤 폴더 안의 파일 중 일부만 선택되었다면, 그 폴더 옆의 체크 상자는 불확정 상태(작은 사각형 또는 대시 표시)가 된다. 이 불확정 상태의 체크 상자를 클릭하면, 일반적으로 다음 중 하나의 상태가 되며, 클릭할 때마다 다른 상태로 바뀐다. 중간 상태는 보통 직접 만들 수 없다.
어떤 응용 소프트웨어에서는 세 번째 상태를 체크 상자 내부가 회색으로 비활성화된 것처럼 표시하기도 한다(grayed out영어, 그레이 아웃). 이는 현재 시스템 상태에서는 해당 체크 상자를 조작할 수 없음을 나타내거나, 위에서 설명한 것처럼 여러 항목의 상태가 섞여 있음을 나타내는 중간 상태(불확정 상태)를 의미한다. 사용자는 일반적으로 그레이 아웃 상태나 중간 상태를 직접 선택할 수는 없다.
마이크로소프트 윈도우의 파일이나 폴더 속성 대화 상자는 삼중 상태 체크 상자의 대표적인 예이다. 윈도우 탐색기에서 여러 파일이나 폴더를 선택하고 속성을 보면, '읽기 전용'과 같은 속성 체크 상자가 선택된 항목들의 상태에 따라 체크되거나, 해제되거나, 불확정 상태로 표시된다.
일부 구현에서는 사용자가 불확정 상태를 포함한 세 가지 상태 사이를 전환할 수 있도록 하여, 이전의 혼합 상태를 시스템이 기억하게 하는 경우도 있다. 이는 일종의 실행 취소 기능처럼 작동한다.[8]
HTML5 표준에서는 `input` 요소의 `indeterminate` 속성을 자바스크립트로 제어하여 웹 페이지에서도 삼중 상태 체크 상자를 구현할 수 있게 되었다.[9]
4. 3. 예시
일부 응용 소프트웨어는 일반 체크 상자가 제공하는 두 가지 상태(선택됨, 선택 해제됨) 외에 3값 논리를 허용하는 체크 상자를 사용한다. 이 세 번째 상태는 체크 상자 안에 작은 사각형이나 대시로 표시되며, 해당 항목이 선택되지도, 선택 해제되지도 않은 불확정 상태(Indeterminate) 또는 중간 상태임을 나타낸다. 이는 체크 상자가 여러 하위 항목들의 상태를 종합적으로 나타낼 때, 예를 들어 폴더 내 파일들의 선택 상태가 혼합되어 있을 때 가장 자주 사용된다.
때로는 체크 상자 내부가 회색으로 표시되는 그레이 아웃 상태도 있는데, 이는 현재 시스템 상태에서 해당 체크 박스를 사용자가 조작할 수 없음을 나타낸다.
일반적으로 불확정 상태는 사용자가 직접 선택할 수 없으며, 클릭하면 '선택됨' 상태로 전환된다. 체크 상자를 계속 클릭하면 '선택됨'(모든 하위 항목 선택)과 '선택 해제됨'(모든 하위 항목 선택 해제) 상태를 번갈아 오간다.
예를 들어, FTP 클라이언트 등에서 전송할 파일을 선택할 때 트리 뷰나 리스트 뷰를 사용하여 폴더 단위로 파일을 선택하는 경우가 있다. 만약 폴더 안의 일부 파일만 선택된 경우, 해당 폴더의 체크 상자는 불확정 상태가 된다. 이 불확정 상태의 체크 상자를 클릭하면, 구현에 따라 다음 중 하나의 상태로 변경되며, 클릭할 때마다 다른 상태로 바뀌고 중간 상태는 되지 않는다.
마이크로소프트 윈도우의 파일 탐색기에서 여러 파일이나 폴더를 선택하고 속성 창을 열면, 파일 속성(읽기 전용 등)을 나타내는 체크 상자가 이러한 삼중 상태를 사용하는 대표적인 예이다.
일부 삼중 상태 체크 상자 구현에서는 사용자가 불확정 상태를 포함한 모든 상태 간을 전환할 수 있도록 하여, 컬렉션 내 항목의 혼합 상태를 기억하고 복원하는 실행 취소 기능처럼 작동하기도 한다.[8]
HTML5에서는, `` 요소의 `indeterminate` 프로퍼티가 표준화되어, 자바스크립트로 제어함으로써 웹 페이지에서도 삼중 상태 체크 상자를 구현할 수 있게 되었다.[9]
4. 4. HTML5
HTML5에서는 'input' 요소의 'indeterminate' 속성이 표준화되어, 자바스크립트로 제어함으로써 3 상태 체크 상자를 구현할 수 있게 되었다.[9]
참조
[1]
웹사이트
Check Boxes
http://msdn.microsof[...]
2010-02-05
[2]
웹사이트
Checkboxes vs. Radio Buttons
http://www.useit.com[...]
2004-09
[3]
웹사이트
" - HTML: HyperText Markup Language {{!}} MDN"
https://developer.mo[...]
Mozilla
2023-06-13
[4]
문서
HTMLの場合は、説明文上でのクリックを有効にするためにはinput要素とlabel要素を明示的に関連付ける必要がある。
[5]
문서
Button Types (Windows)
https://msdn.microso[...]
[6]
문서
トグル スイッチ コントロールのガイドライン - Windows app development
https://msdn.microso[...]
[7]
문서
Windows ユーザーエクスペリエンス ガイドライン > ガイドライン > コントロール > チェック ボックス
https://msdn.microso[...]
[8]
문서
直前の操作を取り消す機能
[9]
문서
3状態チェックボックス（HTML5だけど古いIEでも動く） - Qiita
http://qiita.com/mk_[...]
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com