CSS 기본 사용자 인터페이스 모듈 3 (CSS3 UI)

1. 소개

이 모듈은 사용자 인터페이스와 관련된 속성과 값을 스타일링할 수 있도록 하는 CSS 속성을 설명합니다.

CSS1의 섹션 2.1 [CSS1] 및 CSS2의 챕터 18 [CSS2]가 사용자 인터페이스와 관련된 몇 가지 속성과 값을 도입했습니다. CSS3 사용자 인터페이스 (2000년 2월 16일)은 새로운 사용자 인터페이스 관련 기능을 추가로 도입했습니다.

이 작업 초안은 이를 통합하고 확장하며 대체합니다.

1.1. 목적

이 명세의 목적은 다음 목표를 달성하는 것입니다:

• CSS2.1의 사용자 인터페이스 기능을 확장합니다.
• HTML에서 다른 동적 표현 관련 기능을 보완하거나 대체할 수 있는 추가 CSS 메커니즘을 제공합니다.

2. 모듈 상호작용

이 문서는 이전 명세에 없던 새로운 기능을 정의합니다. 추가적으로, 다음 내용을 대체하고 대체합니다:

• 섹션 18.1, 섹션 18.4, 및 부록 E에 정의된 외곽선의 스태킹 정보, Cascading Style Sheets 레벨 2, 개정판 [CSS2]
• CSS3 사용자 인터페이스 (2000년 2월 16일)

참고: 속성 정의 테이블의 의미론은 처음으로 Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification §property-defs에서 도입되었습니다. 더 최신 정의는 [css-transitions-1], [css-values-3], 및 [css-cascade-4]에서 확인할 수 있습니다. 독자의 편의를 위해, 이 명세는 관련된 경우 이러한 용어로 직접 링크합니다.

3. 박스 모델 추가

3.1. 박스 모델 변경: box-sizing 속성

content-box

이것은 CSS2.1에서 지정된 width와 height의 동작입니다. 지정된 width와 height(및 각각의 min/max 속성)는 요소의 content box의 width와 height에 각각 적용됩니다. 요소의 padding과 border는 지정된 width와 height의 외부에 배치되고 그려집니다.

border-box

이 요소의 width와 height(및 각각의 min/max 속성)에 대한 길이와 백분율 값은 요소의 border box를 결정합니다. 즉, 요소에 지정된 padding 또는 border는 지정된 width와 height 내부에 배치되고 그려집니다. content의 width와 height는 각각의 측면에 대한 border와 padding의 너비를 지정된 width 및 height 속성에서 빼서 계산됩니다. content의 width와 height는 음수가 될 수 없습니다 ([CSS2], section 10.2), 이 계산은 0으로 내림 처리됩니다. getComputedStyle() 등으로 노출된 사용 값 역시 border box를 참조합니다.

참고: 이것은 교체 요소와 input 요소에 대해 레거시 HTML user agent가 일반적으로 구현한 width와 height의 동작입니다.

참고: 길이 및 백분율 값과 달리 auto 값은 width 및 height 속성 (추후 사양에서 도입된 다른 키워드 값도, 별도 명시 없으면) box-sizing 속성에 영향을 받지 않으며, 항상 content box의 크기로 설정됩니다.

아래 용어들은 box-sizing의 계산된 값에 따라 정의가 달라집니다:

시각적 포맷팅 모델 세부사항의 [CSS2]는 box-sizing: content-box를 가정하고 작성되었습니다. 아래는 box-sizing의 모든 값에 대한 동작을 명확히 하기 위한 구분입니다:

1. 10.3.3에서는 아래 문구의 두 번째 width가 content width로 해석됩니다: 만약 width가 auto가 아니고 border-left-width + padding-left + width + [...]
2. 10.3.7에서는 width가 다음 식에서 content width로 해석됩니다: left + margin-left + border-left-width + padding-left + width + [...]
3. 10.4에서는 width, height, min-width, max-width, min-height, max-height는 각각 아래 문구에서 content width, content height, min inner width, max inner width, min inner height, max inner height로 해석됩니다:
   1. 임시 사용 width가 계산된다 [...]
   2. 임시 사용 width가 max-width보다 크면, 위 규칙을 다시 적용하되 이번에는 max-width의 계산값을 width의 계산값으로 사용한다.
   3. 결과 width가 min-width보다 작으면, 위 규칙을 다시 적용하되 이번에는 min-width 값을 width의 계산값으로 사용한다.
   4. 적절한 제약 조건 위반에 대해 테이블에서 해결된 height와 width 값을 선택한다. max-width와 max-height는 max(min, max)로 하여 min ≤ max가 성립하도록 한다. 이 테이블에서 w와 h는 width와 height 계산 결과를 나타낸다 [...]
   5. 이 단어들의 모든 테이블 내 인스턴스
   6. 그 다음 "width와 margin 계산" 규칙을 위에서 width가 이 값으로 계산된 것처럼 적용한다.
4. 10.6.4에서는 height가 아래 식에서 content height로 해석됩니다: top + margin-top + border-top-width + padding-top + height + [...]
5. 10.7에서는 width, height, min-height, max-height는 각각 아래 문구에서 content width, content height, min inner height, max inner height로 해석됩니다:
   1. 임시 사용 height가 계산된다 [...]
   2. 임시 height가 max-height보다 크면, 위 규칙을 다시 적용하되 이번에는 max-height 값을 height의 계산값으로 사용한다.
   3. 결과 height가 min-height보다 작으면, 위 규칙을 다시 적용하되 이번에는 min-height 값을 height의 계산값으로 사용한다.
   4. [...] 위의 최소/최대 너비 알고리즘을 사용하여 사용 width와 height를 구한다. 그 후 결과 width와 height를 계산값인 것처럼 "height와 margin 계산" 규칙을 적용한다.

div.container {
  width:38em;
  border:1em solid black;
}

div.split {
  box-sizing:border-box;
  width:50%;
  border:1em silver ridge;
  float:left;
}

<div class="container">
<div class="split">이 div는 왼쪽 절반을 차지합니다.</div>
<div class="split">이 div는 오른쪽 절반을 차지합니다.</div>
</div>

4. 아웃라인 속성

스타일 시트 작성자는 때때로 버튼, 활성 폼 필드, 이미지 맵 등과 같은 시각적 오브젝트 주변에 아웃라인을 만들어 강조하고자 할 수 있습니다. 아웃라인은 아래와 같이 테두리와 다릅니다:

1. 아웃라인은 공간을 차지하지 않습니다.
2. 아웃라인은 비직사각형일 수 있습니다.
3. 사용자 에이전트(UAs)는 종종 :focus 상태의 요소에 아웃라인을 렌더링합니다.

아웃라인 속성은 이러한 동적 아웃라인의 스타일을 제어합니다.

아웃라인의 렌더링 순서는 각 플랫폼에 따라 더 나은 사용자 경험을 제공할 수 있도록 구현체에 명시적으로 맡깁니다. 이는 CSS 2.1 부록 E [CSS2]에 정의된 아웃라인의 렌더링 순서를 대체합니다.

키보드 사용자, 특히 장애로 인해 페이지와 다른 방식으로 상호작용할 수 없는 사람들은 :focus 상태의 요소에 아웃라인이 보이는 것에 의존합니다. 따라서 작성자는 반드시 대체 강조 표시 메커니즘을 제공하지 않는 한 해당 요소의 아웃라인을 보이지 않게 하면 안 됩니다.

아웃라인에 변환(transform)을 적용한 렌더링은 CSS3-UI에서 명확하게 정의하지 않았습니다.

4.1. 아웃라인 단축 속성: outline 속성

4.2. 아웃라인 두께: outline-width 속성

4.3. 아웃라인 패턴: outline-style 속성

4.4. 아웃라인 색상: outline-color 속성

아웃라인 속성으로 생성된 아웃라인은 박스 "위"에 그려집니다. 즉, 아웃라인은 항상 최상위에 그려지며, 박스의 위치나 크기, 다른 박스에 영향을 주지 않습니다. 따라서 아웃라인을 표시하거나 숨겨도 리플로우가 발생하지 않습니다.

아웃라인은 비직사각형일 수 있습니다. 예를 들어, 요소가 여러 줄에 걸쳐 분리된다면, 아웃라인은 해당 요소의 모든 박스를 감싸는 최소 집합 형태여야 합니다.

아웃라인의 각 부분은 일부 면이 열려 있는(인라인 요소의 테두리가 줄 바꿈될 때처럼) 것이 아니라 완전히 연결되어 있어야 합니다.

아웃라인의 부분은 직사각형일 필요가 없습니다. 아웃라인이 border edge를 따르는 경우, border-radius 곡선을 따라야 합니다.

아웃라인의 위치는 자식 박스에 의해 영향을 받을 수 있습니다.

사용자 에이전트는 포커스 개념을 사용자에게 전달하기에 적합한 영역을 감싸는 아웃라인을 결정하는 알고리즘을 사용해야 합니다.

참고: 이 명세는 아웃라인의 정확한 위치나 형태를 정의하지 않지만, 일반적으로 아웃라인은 테두리 박스 바로 바깥에 그려집니다.

outline-width 속성은 border-width와 동일한 값을 허용합니다 (CSS Backgrounds 3 §4.3 선 두께: border-width 속성).

outline-style 속성은 border-style과 같은 값을 허용합니다 (CSS Backgrounds 3 §4.2 선 패턴: border-style 속성), 단 hidden은 outline 스타일로 사용할 수 없습니다. 또한 CSS3에서는 outline-style에 auto 값을 사용할 수 있습니다. auto 값은 사용자 에이전트가 사용자 인터페이스의 플랫폼 기본값이나 CSS에서 세부적으로 설명할 수 없는 더 풍부한 스타일(예: 반투명 외곽 픽셀로 빛나는 둥근 외곽선)을 커스텀 렌더링하도록 허용합니다. 따라서 이 명세는 outline-color가 auto 스타일 아웃라인을 렌더링할 때 어떻게 사용되는지(또는 사용되지 않는지) 정의하지 않습니다. 사용자 에이전트는 auto를 solid로 처리할 수 있습니다.

outline-color 속성은 모든 색상과 invert 키워드를 허용합니다. Invert는 화면의 픽셀에 색상 반전을 수행하는 것으로 예상됩니다. 이는 포커스 테두리가 어떤 배경색에서도 보이도록 하는 일반적인 방법입니다.

호환되는 UA는 화면 픽셀의 색상 반전을 지원하지 않는 플랫폼에서 invert 값을 무시할 수 있습니다.

UA가 invert 값을 지원하지 않는 경우, 해당 값을 파싱 시점에 거부해야 하며, outline-color 속성의 초기값은 currentColor 키워드가 됩니다.

outline 속성은 단축 속성이며, outline-style, outline-width, outline-color 세 가지 모두를 설정합니다.

참고: 아웃라인은 모든 면에서 동일합니다. 테두리와 달리 outline-top 또는 outline-left와 같은 속성은 없습니다.

이 명세는 여러 아웃라인이 겹쳐 그려지는 방식이나, 일부가 다른 요소 뒤에 가려진 박스의 아웃라인이 어떻게 그려지는지에 대해 정의하지 않습니다.

button { outline: thick solid }

그래픽 사용자 인터페이스는 페이지의 어떤 요소가 포커스를 갖는지 사용자에게 알리기 위해 아웃라인을 사용할 수 있습니다. 이러한 아웃라인은 테두리와 별도로 적용되며, 아웃라인을 켜거나 끄더라도 문서의 리플로우를 일으키지 않습니다. 포커스는 문서 내에서 사용자 상호작용의 대상(예: 텍스트 입력, 버튼 선택 등)입니다.

:focus  { outline: thick solid black }
:active { outline: thick solid red }

참고: 아웃라인은 레이아웃에 영향을 주지 않으므로 (즉, 박스 모델에 공간이 남지 않으므로), 페이지의 다른 요소와 겹칠 수 있습니다.

4.5. 아웃라인 오프셋: outline-offset 속성

기본적으로 아웃라인은 border edge 바로 바깥에서 시작해 그려집니다. 그러나 outline을 오프셋하여 border edge 바깥으로 그릴 수도 있습니다.

outline-offset의 계산된 값이 0이 아니면, 아웃라인은 border edge에서 해당 값만큼 바깥쪽으로 그려집니다.

:focus,:active  { outline-offset: 2px }

음수 값은 아웃라인이 border box 내부로 줄어들게 해야 합니다. 아웃라인이 그리는 도형의 외부 높이와 너비는 outline-width 속성의 계산값의 두 배보다 작아지면 안 됩니다. 이렇게 하면 매우 큰 음수 값에도 아웃라인이 렌더링될 수 있습니다. 사용자 에이전트는 이 제약을 각 차원마다 독립적으로 적용해야 합니다. 만약 아웃라인이 여러 개의 연결되지 않은 도형으로 그려진다면, 이 제약은 각 도형에 개별적으로 적용됩니다.

5. 크기 조정 & 오버플로우

CSS2.1은 블록 컨테이너 요소에서 스크롤 메커니즘(예: 스크롤바)의 표시를 제어할 수 있는 기능을 제공합니다. 이 명세에서는 여기에 사용자가 요소의 크기를 조정할 수 있도록 하는 기능과 텍스트 오버플로우 동작을 지정하는 기능을 추가합니다.

5.1. 박스 크기 조정: resize 속성

resize 속성을 통해 작성자는 요소가 사용자가 크기 조정 가능한지 여부와, 가능하다면 어느 축/축들로 조정 가능한지를 지정할 수 있습니다.

none

사용자 에이전트는 요소에 크기 조정 메커니즘을 제공하지 않으며, 사용자는 요소의 크기를 직접 조정할 수 있는 방법을 제공받지 않습니다.

both

사용자 에이전트는 높이와 너비 모두를 사용자가 조정할 수 있도록 양방향 크기 조정 메커니즘을 제공합니다.

horizontal

사용자 에이전트는 너비만 조정할 수 있도록 수평 단방향 크기 조정 메커니즘을 제공합니다.

vertical

사용자 에이전트는 높이만 조정할 수 있도록 수직 단방향 크기 조정 메커니즘을 제공합니다.

현재 요소의 스크롤 메커니즘(있는 경우)은 overflow 속성을 통해 제어할 수 있습니다 (예: overflow: scroll, overflow: hidden 등). resize 속성의 목적은 요소에 크기 조정 박스나 위젯 등 크기 조정 메커니즘의 표시와 동작을 제어할 수 있게 하는 것입니다.

참고: 크기 조정 메커니즘은 스크롤 메커니즘과 동일하지 않으며, 사용자 에이전트의 확대/축소 기능과도 관련이 없습니다. 스크롤 메커니즘은 사용자가 요소의 내용 중 어느 부분을 볼지 결정할 수 있게 합니다. 크기 조정 메커니즘은 사용자가 요소의 크기를 결정할 수 있게 합니다.

resize 속성은 계산된 overflow 값이 visible이 아닌 요소에 적용됩니다. 사용자 에이전트는 아래와 같은 요소에도 overflow 값과 무관하게 적용할 수 있습니다:

• 이미지 또는 비디오 같은 교체 요소( img, video, picture, svg, object, canvas)
• iframe 요소

resize 속성이 생성된 콘텐츠에 미치는 효과는 정의되어 있지 않습니다. 구현체는 생성된 콘텐츠에 resize 속성을 적용하지 않아야 합니다.

참고: resize 속성은 추후 CSSPseudoElement 인터페이스 구현 시 생성된 콘텐츠에 적용될 수 있습니다 ([css-pseudo-4] 참고).

요소가 사용자가 크기 조정한 경우, 사용자 에이전트는 width 및 height 속성을 사용자가 지정한 크기의 px 단위 길이 값으로 해당 요소의 style attribute DOM에 설정하며, 기존 속성 선언이 있다면 이를 대체합니다. !important가 있다면 적용하지 않습니다.

요소가 한 방향만 크기 조정된 경우, 해당 속성만 설정되며 둘 다 설정하지 않습니다.

크기 조정의 정확한 방향(예: 요소의 왼쪽 위를 변경하는지, 오른쪽 아래를 변경하는지)은 CSS 레이아웃 요소들(절대 위치 지정 여부, right 및 bottom 속성 사용 여부, 요소의 언어가 RTL인지 등)에 따라 달라질 수 있습니다. 사용자 에이전트는 CSS 레이아웃에 의해 결정된 크기 조정 방향과 플랫폼의 관례 및 제약을 고려하여 사용자에게 크기 조정 메커니즘을 어떻게 전달할지 결정해야 합니다.

사용자 에이전트는 min-width, max-width, min-height, max-height가 부여하는 제약을 제외하고 사용자가 요소의 크기를 자유롭게 조정할 수 있도록 해야 합니다.

참고: 사용자가 요소의 크기를 조정하려 할 때 !important가 적용된 속성이 해당 요소의 style attribute의 width 및 height 속성보다 우선하여 무시될 수 있습니다.

요소의 resize 속성의 계산된 값이 변경되어도 사용자가 해당 요소를 크기 조정하여 style attribute에 적용된 변경 사항은 초기화되지 않습니다.

iframe,object[type^="text/"],
object[type$="+xml"],object[type="application/xml"]
{
  overflow:auto;
  resize:both;
}

5.2. 오버플로우 생략 부호: text-overflow 속성

이 속성은 인라인 콘텐츠가 블록 컨테이너 요소("블록")의 인라인 진행 방향에서 끝 라인 박스 엣지를 넘쳐 흐를 때의 렌더링 방식을 지정합니다. 이때 overflow 속성이 visible이 아닌 경우에 동작합니다.

텍스트가 오버플로우되는 예로는 줄 바꿈이 제한되었거나(예: white-space: nowrap) 단어가 너무 길어서 들어가지 못하는 경우 등이 있습니다. 각 값의 의미는 다음과 같습니다:

clip

오버플로우된 인라인 콘텐츠를 블록 컨테이너에서 잘라냅니다. 문자는 부분적으로만 렌더링될 수 있습니다.

ellipsis

잘려진 인라인 콘텐츠를 나타내기 위해 생략 부호(U+2026)를 렌더링합니다. 구현체는 더 적합한 언어, 스크립트, 쓰기 방향의 생략 부호 문자나, 생략 부호 문자가 없을 경우 "..." 세 점으로 대체할 수 있습니다.

이 속성 정의에서 "문자"라는 용어는 가독성을 위해 사용되며, 실제 구현에서는 "grapheme cluster" [UAX29]를 의미합니다.

ellipsis 값의 경우 구현체는 라인 끝에서 생략 부호가 들어갈 공간을 확보하기 위해 문자를 숨기고 atomic inline-level 요소도 숨겨야 하며, 생략 부호를 남은 인라인 콘텐츠의 끝 엣지에 바로 붙여서 표시해야 합니다. 라인의 첫 번째 문자나 atomic inline-level 요소는 ellipsis가 아닌 잘림 처리해야 합니다.

div {
  font-family: monospace;
  white-space: pre;
  overflow: hidden;
  width: 9ch;
  text-overflow: ellipsis;
}

생략 부호 상세

• 생략 부호는 렌더링에만 영향을 주며 레이아웃이나 포인터 이벤트 디스패치에는 영향을 주면 안 됩니다: UA는 생략 부호 위의 포인터 이벤트를 숨겨진 요소로 전달해야 하며, text-overflow가 none이었던 것처럼 처리해야 합니다.
• 생략 부호는 블록에 따라 스타일링되고 베이스라인 정렬됩니다.
• 생략은 상대 위치 지정 및 기타 그래픽 변환 이후에 발생합니다.
• 생략 부호를 위한 공간이 충분하지 않으면, 생략 부호 자체의 렌더링을 잘라냅니다 (해당 라인의 중립 문자들이 text-overflow:clip 값으로 잘렸을 쪽에서).

생략 부호와 사용자 상호작용

• 사용자가 콘텐츠와 상호작용(편집, 선택, 스크롤 등) 중일 때, UA는 text-overflow: ellipsis를 text-overflow: clip로 처리할 수 있습니다.
• 생략 부호를 선택하면 숨겨진 텍스트도 선택해야 하며, 숨겨진 텍스트 전체가 선택되면 UA는 생략 부호의 선택도 보여야 합니다. 일부만 선택된 경우의 동작은 UA에 따릅니다.

div {  font-family:Helvetica,sans-serif; line-height:1.1;
  width:3.1em; padding:.2em; border:solid .1em black; margin:1em 0;
}

<div>
CSS IS AWESOME, YES
</div>

<div style="text-overflow:clip; overflow:hidden">
CSS IS AWESOME, YES
</div>

<div style="text-overflow:ellipsis; overflow:hidden">
CSS IS AWESOME, YES
</div>

<div style="text-overflow:ellipsis; overflow:hidden">
NESTED
 <p>PARAGRAPH</p>
WON’T ELLIPSE.
</div>

참고: 생략 부호가 위치하는 쪽은 블록의 direction에 따라 달라집니다. 예를 들어, 오른쪽에서 왼쪽(direction: rtl) 블록에서 overflow hidden은 인라인 콘텐츠를 왼쪽에서 잘라내며, 잘린 콘텐츠를 나타내기 위해 생략 부호는 왼쪽에 위치하게 됩니다.

스크롤 인터페이스와의 ellipsis 상호작용

이 섹션은 text-overflow:clip이 아닌 text-overflow(clip 이외의 text-overflow)와 overflow:scroll을 가진 요소에 적용됩니다.

인라인 진행 방향에서 overflow가 scroll인 요소에 clip이 아닌 text-overflow가 적용되어 있고, 브라우저가 스크롤 메커니즘(예: 요소에 스크롤바가 있거나, 터치 인터페이스에서 스와이프-스크롤 등)을 제공하는 경우, 더 나은 사용자 경험을 위한 추가 구현 세부 사항이 있습니다:

요소가 스크롤될 때(예: 사용자 또는 DOM 조작에 의해), 요소의 더 많은 콘텐츠가 표시됩니다. text-overflow의 값은 더 많은 콘텐츠가 표시되는지 여부에 영향을 주면 안 됩니다. clip이 아닌 text-overflow가 설정된 경우, 더 많은 콘텐츠가 뷰에 스크롤되어 들어오면, 구현체는 추가로 들어온 콘텐츠를 가능한 한 표시해야 하며, 원래 잘려야 했던 내용(또는 ellipsis/문자열을 넣기 위해 필요한 내용)만 잘라냅니다. 요소가 충분히 스크롤되어 콘텐츠의 가장자리가 보일 때에는 ellipsis/문자열 대신 그 내용을 표시해야 합니다.

div.crawlbar {
  text-overflow: ellipsis;
  height: 2em;
  overflow: scroll;
  white-space: nowrap;
  width: 15em;
  border:1em solid black;
}

<div class="crawlbar">
CSS is awesome, especially when you can scroll
to see extra text instead of just
having it overlap other text by default.
</div>

콘텐츠가 스크롤되는 동안, 구현체는 ellipsis의 렌더링을 조정할 수 있습니다(예: 박스 가장자리에 정렬하고 줄의 가장자리가 아닌 곳에).

6. 포인팅 장치와 키보드

6.1. 포인터 상호작용

6.1.1. 커서 스타일링: cursor 속성

이 속성은 포인팅 장치의 커서 핫스팟이 요소의 border edge 안에 있을 때 표시할 커서 종류를 지정합니다.

참고: CSS Backgrounds 3 §5.1 Curve Radii: border-radius 속성에 따라, border edge는 border-radius의 영향을 받습니다.

요소가 겹칠 경우, 어떤 요소가 커서 종류를 결정하는지는 히트테스트에 따라 결정됩니다: 커서를 결정하는 요소는 해당 위치에서 클릭이 발생했을 때 이벤트를 받을 요소입니다.

참고: 히트테스트의 세부 내용은 이 명세의 범위 밖입니다. 히트테스트는 향후 CSS 또는 HTML의 개정판에서 정의될 예정입니다.

사용자 에이전트는 스크롤바, 리사이저 또는 기타 네이티브 UI 위젯 등 네이티브 컨트롤 위에서는 cursor 속성을 무시할 수 있습니다. 또한 사용자 에이전트는 페이지가 응답하지 않을 때 busy 커서, 텍스트 선택 중일 때 텍스트 커서 등 UA의 UI 상태를 나타내기 위해 원하는 커서를 표시할 수 있습니다.

참고: [HTML]은 이미지 맵의 특수 처리를 cursor 속성에 대해 정의합니다.

값의 의미는 다음과 같습니다:

이미지 커서

<url>

사용자 에이전트는 URI로 지정된 리소스에서 커서를 가져옵니다. 목록의 첫 번째 커서를 처리할 수 없으면 두 번째, 그 다음 값을 시도해야 합니다. 모든 사용자 정의 커서를 처리할 수 없으면, 리스트 끝의 커서 키워드를 사용해야 합니다. 호환되는 UA는 <url> 대신 <image> (상위 집합)를 지원할 수 있습니다.

UA는 다음 이미지 파일 포맷을 반드시 지원해야 합니다:

• PNG ([PNG] 참조)
• SVG ([SVG11])의 secure static mode [SVG2]에서, 고유 크기가 있는 경우
• 그 외 UA가 다른 속성의 <image>로 지원하는 모든 비애니메이션 이미지 파일 포맷 (예: background-image 속성)

또한 UA는 다음 이미지 파일 포맷을 지원해야 합니다:

• SVG ([SVG11])의 secure animated mode [SVG2]에서, 고유 크기가 있는 경우
• UA가 다른 속성의 <image>로 지원하는 모든 애니메이션 이미지 파일 포맷 (예: background-image 속성)

UA는 필요하다면 SVG([SVG11])도 지원할 수 있습니다. (secure static/animated mode [SVG2], 고유 크기 없어도 가능)

참고: CSS 워킹그룹은 모든 SVG(고유 크기 여부와 상관없이)를 필수 지원하려 했으나, 고유 크기 없는 SVG에 대한 구현이 부족하여 필수에서 선택적으로 하향 조정되었습니다.

참고: 이 명세 작성 시점(2015년 봄), 데스크탑 브라우저에서 커서로 지원되는 파일 포맷은 .ico 및 .cur(Microsoft 설계)뿐입니다. 레거시 콘텐츠 호환을 위해 UA는 이를 지원하는 것이 권장되나, 공개 명세가 없어 규범적 요구 사항으로 지정할 수 없습니다. 관련 정보는 위키피디아에서 확인할 수 있습니다.

커서 이미지의 기본 오브젝트 크기는 UA OS의 일반적인 커서 크기를 기준으로 UA가 정합니다.

실제 오브젝트 크기는 기본 사이즈 알고리즘으로 결정됩니다. OS가 특정 크기 이상의 커서를 렌더링할 수 없다면, 해당 크기 초과 커서는 OS 지원 범위 내 크기로 크기 조정해야 하며, 비율을 유지해야 합니다.

옵션 <x> 및 <y> 좌표는 이미지 내 커서 위치(핫스팟)를 지정합니다.

<x>

<y>

각각 <number>입니다. 커서 좌표계(좌측/상단 기준)에서 지정 위치를 나타냅니다.

참고: 다양한 <image>의 좌표계 정의는 이 명세에서 다루지 않으며 [CSS4-IMAGES]에 위임합니다.

값이 지정되지 않은 경우, 이미지 리소스 내부에 정의된 기본 핫스팟을 사용합니다. 둘 다 지정되지 않고 참조 커서에 정의된 핫스팟이 없으면 "0 0"으로 간주합니다.

핫스팟 좌표가 이미지 영역을 벗어나면 각 축별로 클램핑해야 합니다.

일반 목적 커서

auto

UA가 현재 컨텍스트에 따라 표시할 커서를 결정합니다: auto는 선택 가능한 텍스트나 편집 가능한 요소 위에서는 text, 그 외에는 default로 동작합니다.

default

플랫폼 기본 커서. 보통 화살표로 표시됩니다.

none

요소에 커서를 표시하지 않습니다.

링크 및 상태 커서

context-menu

커서 아래 객체에 컨텍스트 메뉴가 있습니다. 종종 화살표 옆에 작은 메뉴 그래픽으로 표시됩니다.

help

커서 아래 객체에 도움말이 있습니다. 종종 물음표 또는 말풍선 형태로 표시됩니다.

pointer

링크임을 나타내는 포인터 커서입니다.

progress

진행 표시. 프로그램이 작업 중이지만 wait과 달리 사용자 상호작용이 가능합니다. 종종 회전하는 원, 또는 화살표+시계/모래시계로 표시됩니다.

wait

프로그램이 바쁘므로 기다려야 함을 나타냅니다. 종종 시계나 모래시계로 표시됩니다.

선택 커서

cell

셀 또는 셀 집합 선택 가능을 나타냅니다. 두꺼운 십자(가운데 점)로 표시됩니다.

crosshair

간단한 십자 커서(예: "+" 모양). 2차원 비트맵 선택 모드 등에 사용됩니다.

text

선택 가능한 텍스트임을 나타냅니다. 보통 세로 I-빔으로 표시됩니다. UA는 수직 텍스트에는 수평 I-빔/커서를 자동으로 표시할 수 있습니다(예: vertical-text 키워드와 동일). 특정 각도 텍스트에는 해당 각도의 I-빔/커서를 표시할 수 있습니다.

vertical-text

선택 가능한 수직 텍스트임을 나타냅니다. 보통 수평 I-빔으로 표시됩니다.

드래그 앤 드롭 커서

alias

무언가의 alias/바로가기를 생성함을 나타냅니다. 화살표 옆에 작은 곡선 화살표로 표시됩니다.

copy

복사함을 나타냅니다. 화살표 옆에 작은 플러스 기호로 표시됩니다.

move

이동함을 나타냅니다.

no-drop

드래그한 항목을 현재 위치에 놓을 수 없음을 나타냅니다. 손 또는 포인터 옆에 금지 표시로 렌더링됩니다.

not-allowed

요청된 작업이 실행되지 않을 것임을 나타냅니다. 금지 표시 원으로 렌더링됩니다.

grab

무언가를 잡아서(드래그하여) 이동할 수 있음을 나타냅니다. 손바닥 커서 등으로 렌더링됩니다.

grabbing

무언가를 잡고(드래그하여) 이동 중임을 나타냅니다. 손가락이 닫혀 있는 손바닥 뒷면 등으로 렌더링됩니다.

크기 조정 및 스크롤 커서

e-resize, n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-resize, w-resize

박스의 특정 모서리를 움직일 수 있음을 나타냅니다. 예를 들어, se-resize 커서는 박스의 남동쪽 모서리를 움직일 때 사용됩니다.

ew-resize, ns-resize, nesw-resize, nwse-resize

양방향 크기 조정 커서를 나타냅니다.

col-resize

항목/열을 수평으로 크기 조정할 수 있음을 나타냅니다. 좌우 화살표와 세로 막대가 있는 커서로 렌더링됩니다.

row-resize

항목/행을 수직으로 크기 조정할 수 있음을 나타냅니다. 상하 화살표와 가로 막대가 있는 커서로 렌더링됩니다.

all-scroll

모든 방향으로 스크롤할 수 있음을 나타냅니다. 상하좌우 화살표와 가운데 점으로 렌더링됩니다.

확대/축소 커서

zoom-in, zoom-out

확대나 축소가 가능함을 나타냅니다. 각각 확대/축소 커서는 중앙에 "+" 또는 "-"가 있는 돋보기로 렌더링됩니다 (zoom-in, zoom-out).

:link,:visited {
    cursor: url(example.svg#linkcursor),
            url(hyper.cur),
            url(hyper.png) 2 3,
            pointer
}

6.1.1.1. 캔버스의 커서

문서 canvas는 문서가 렌더링되는 무한 표면입니다 [CSS2]. 어떤 요소도 캔버스에 대응하지 않으므로, 요소 위가 아닐 때 커서를 스타일링하려면 캔버스 커서는 루트 요소의 커서를 재사용합니다. 하지만 루트 요소에 박스가 생성되지 않으면(예: display: none인 경우), 캔버스 커서는 플랫폼 기본 커서가 됩니다.

참고: 요소가 보이지 않아도 박스는 생성될 수 있습니다. 예를 들어, 요소가 visibility: hidden이지만 display: none이 아니라면, 박스가 생성되고 해당 커서가 캔버스에 사용됩니다.

6.2. 삽입 캐럿

6.2.1. 삽입 캐럿 색상 지정: caret-color 속성

auto

사용자 에이전트는 currentColor를 사용해야 합니다. 사용자 에이전트는 캐럿이 주변 콘텐츠와 뚜렷하게 대비되어 잘 보이도록 currentColor, 배경, 그림자 등을 참고해 색상을 자동으로 조정할 수 있습니다.

<color>

삽입 캐럿은 지정된 색상으로 표시됩니다.

캐럿은 사용자가 요소 내에 텍스트(또는 기타 콘텐츠)를 삽입할 위치를 나타내는 시각적 표시입니다. 이 속성은 그 표시의 색상을 제어합니다.

참고: 캐럿의 모양과 깜빡임은 이 기능의 범위 밖이며 명세에 정의되어 있지 않습니다.

참고: UA마다 “캐럿”으로 간주하는 것이 추가로 있을 수 있습니다. 예를 들어, 일부 UA는 “내비게이션 캐럿”을 표시할 수 있는데, 삽입 캐럿과 유사하지만 편집 불가능한 텍스트에서도 이동할 수 있으며 기능적으로는 캐럿입니다. 반면 cursor 속성이 auto일 때나, cursor 속성이 text 또는 vertical-text인 요소 위에서 표시되는 커서 이미지는, 비록 캐럿과 유사하게 생겼더라도 캐럿이 아니라 커서입니다.

6.3. 키보드 제어

6.3.1. 폐지됨: ime-mode 속성

"ime-mode"는 일부 브라우저에 부분적으로 구현된 속성이지만, 문제적이며 본 명세에 의해 공식적으로 폐지되었습니다.

이들 구현의 비호환성에 대한 문서가 있습니다.

사용자 에이전트는 ime-mode 속성을 지원해서는 안 됩니다.

작성자는 ime-mode 속성을 사용해서는 안 됩니다.

사용자는 나쁜 사이트나 레거시 구현을 우회해야 하는 경우 등 복구 목적에 한해 ime-mode 속성을 사용할 수 있습니다. 예를 들어 아래와 같은 사용자 스타일시트 규칙이 있습니다:

input[type=password] {    ime-mode: auto !important;
}

이 CSS 예시는 사용자 스타일시트 파일에 넣어 패스워드 입력 필드가 기본 방식으로 동작하게 강제할 수 있습니다.

이 명세는 레거시 ime-mode 구현의 기능이나 구체적인 지원 내용을 일부러 문서화하지 않았습니다. 그런 경로를 추구하거나 권장하는 것이 의미 없기 때문입니다.

부록 A. 감사의 글

이 부록은 참고용입니다.

이 명세는 대부분 1999년부터 현재까지 Tantek Çelik이 집필·편집하였으며, 처음에는 Microsoft를 대표해, 그다음에는 초청 전문가로, 최근에는 Mozilla를 대표해 작성되었습니다.

최근 Bloomberg를 대표해 이 명세 작업을 진행한 Florian Rivoal에게 감사드립니다. www-style 이메일의 이슈 문서화, 해결·변경 제안, 특히 box-sizing 속성에 대한 세부 사항을 크게 개선해 연구·집필해주신 점에 감사드립니다.

아래 분들의 피드백과 기여에도 감사드립니다: Rossen Atanassov, Tab Atkins, L. David Baron, Bert Bos, Matthew Brealey, Rick Byers, Ada Chan, James Craig, Michael Cooper, Axel Dahmen, Michael Day, Micah Dubinko, Elika E., Steve Falkenburg, Andrew Fedoniouk, Al Gilman, Ian Hickson, Bjoern Hoehrmann, Alan Hogan, David Hyatt, Richard Ishida, Sho Kuwamoto, Yves Lafon, Stuart Langridge, Susan Lesch, Peter Linss, Kang-Hao Lu, Masayuki Nakano, Mats Palmgren, Brad Pettit, Chris Rebert, François Remy, Andrey Rybka, Simon Sapin, Alexander Savenkov, Sebastian Schnitzenbaumer, Lea Verou, Etan Wexler, David Woolley, Frank Yan, Boris Zbarsky, 그리고 Domel.

부록 B. 변경사항

이 부록은 참고용입니다.

제안 권고(Recommended) 이후 변경사항

이 부록 부분은 2017년 12월 14일 제안 권고(PR) 이후의 변경사항을 설명합니다.

• 최신 버전으로 참조 업데이트
• W3C 권고용 날짜 및 서식 변경
• 에라타 문서 링크 추가
• 이 변경사항 섹션 업데이트

후보 권고(Candidate Recommendation) 이후 변경사항

이 부록 부분은 2017년 3월 2일 후보 권고(CR) 이후의 변경사항을 설명합니다.

• 최신 버전으로 참조 업데이트
• resize 속성 관련 편집상 명확화
• 위험 요소 directional focus navigation 속성 레벨 3에서 4로 이동
• 이미지맵 위 cursor 특수 처리에 대한 HTML 안내 링크 추가
• 포인터 이벤트에 대한 text-overflow 영향에 대해 명확화(구현자 합의 반영, 관련 테스트).
• UA UI 상태 반영 위해 cursor 속성 무시 가능하도록 명확화
• 고유 크기 없는 SVG 이미지를 커서로 지원은 허용하지만 필수 요구는 중단(관련 테스트 업데이트).
• 사양을 구현과 일치시키고, cursor: auto가 선택 가능 텍스트나 편집 가능한 요소에서 text처럼 보이게 함(관련 테스트).

부록 C. 보안 및 개인정보 고려사항

이 부록은 참고용입니다.

W3C TAG는 명세 편집자가 참고로 답변할 수 있도록 보안 및 개인정보 자가 점검 설문을 개발 중입니다.

고려해야 할 질문에 따라

1. 이 명세가 개인 식별 정보를 다루나요?

   아니오.

2. 이 명세가 고가치 데이터를 다루나요?

   아니오.

3. 이 명세가 브라우징 세션을 넘어 지속되는 새로운 오리진 상태를 도입하나요?

   아니오.

4. 이 명세가 웹에 오리진 간 지속 상태를 노출하나요?

   아니오.

5. 이 명세가 오리진이 현재 접근할 수 없는 다른 데이터를 노출하나요?

   아니오.

6. 이 명세가 새로운 스크립트 실행/로딩 메커니즘을 허용하나요?

   로딩은 예, 실행은 아니오. cursor 속성은 <image> 값을 허용하며, 여기에는 로딩될 수 있는 URL이 포함될 수 있습니다. SVG 문서는 스크립트를 포함할 수도 있으나, 본 명세는 스크립트는 실행되어서는 안 된다고 요구합니다.

7. 이 명세가 오리진에 사용자의 위치 접근을 허용하나요?

   아니오.

8. 이 명세가 오리진에 사용자의 기기 센서 접근을 허용하나요?

   아니오.

9. 이 명세가 오리진에 사용자의 로컬 컴퓨팅 환경 일부에 접근을 허용하나요?

   아니오.

10. 이 명세가 오리진에 다른 기기 접근을 허용하나요?

    아니오.

11. 이 명세가 오리진에 UA의 네이티브 UI 일부 제어를 허용하나요?

    예. cursor 및 caret-color 속성은 페이지가 UA의 네이티브 UI에서 커서와 텍스트 삽입 캐럿의 표시를 변경할 수 있게 합니다. 또한 outline-style 속성의 auto 값(그리고 outline 단축 속성)으로 모든 요소 주위에 네이티브 포커스 아웃라인을 표시할 수 있습니다.

12. 이 명세가 웹에 임시 식별자를 노출하나요?

    아니오.

13. 이 명세가 1st-party/3rd-party 컨텍스트에 따라 동작을 구분하나요?

    아니오.

14. 이 명세는 UA의 "시크릿 모드"에서 어떻게 동작해야 하나요?

    동일하게 동작해야 합니다.

15. 이 명세가 사용자의 로컬 기기에 데이터를 저장하나요?

    아니오.

16. 이 명세에 "보안 고려사항"과 "개인정보 고려사항" 섹션이 있나요?

    예.

17. 이 명세가 기본 보안 특성의 다운그레이드를 허용하나요?

    아니오.

부록 D. HTML 기본 스타일시트 추가사항

이 부록은 참고용입니다.

HTML 폼 컨트롤을 표현하거나 일부 동적 프레젠테이션 속성을 표현하기 위한 기본 스타일시트의 잠재적 추가 예시입니다:

:enabled:focus {
 outline: 2px inset;
}

button,
input[type=button],
input[type=reset],
input[type=submit],
input[type=checkbox],
input[type=radio],
textarea,
input,
input[type=text],
input[type=password],
input[type=image]
{
 display: inline-block;
}

input[type=button],
input[type=reset],
input[type=submit],
input[type=checkbox],
input[type=radio],
input,
input[type=text],
input[type=password],
input[type=image]
{
 white-space: nowrap;
}

button
{
/* BUTTON 태그의 공백 처리 */
 white-space:normal;
}

input[type=reset]:lang(en)
{
/* 언어별 HTML input type=reset 버튼 기본 내용 */
 content: "Reset";
}

input[type=submit]:lang(en)
{
/* 언어별 HTML input type=submit 버튼 기본 내용 */
 content: "Submit";
}

/* UA는 다른 언어의 Reset/Submit 규칙도 각각 사용해야 함 */

input[type=button],
input[type=reset][value],
input[type=submit][value]
{
/* HTML "input" 버튼의 텍스트 내용/레이블 */
 content: attr(value);
}

textarea
{
/* TEXTAREA 태그의 공백 처리 */
 white-space:pre-wrap;
 resize: both;
}

input[type=hidden]
{
/* HTML 숨김 텍스트 필드의 appearance */
 display: none !important;
}

input[type=image]
{
 content: attr(src,url);
 border: none;
}

select[size]
{
/* HTML4/XHTML1 <select> size가 1보다 큰 경우 - 목록 appearance */
 display: inline-block;
 height: attr(size,em);
}

select,select[size=1]
{
/* HTML4/XHTML1 <select> size가 없거나 size=1인 경우 - 팝업 메뉴 appearance */
 display: inline-block;
 height: 1em;
 overflow: hidden;
}

select[size]:active
{
/* 활성화된 size>1 HTML <select> - 활성 목록 appearance */
 display: inline-block;
}

optgroup,option
{
 display: block;
 white-space: nowrap;
}

optgroup[label],option[label]
{
 content: attr(label);
}

option[selected]::before
{
 display: inline;
 content: check;
}

/* FRAME 크기 조정은 이 명세에서 직접 다루지 않지만,
   아래 규칙은 합리적 동작의 근사치를 제공할 수 있습니다. */

/*

frame { resize:both }
frame[noresize] { resize:none }

*/