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

1. 소개

이 모듈은 저자가 사용자 인터페이스 관련 속성과 값을 스타일링할 수 있게 해 주는 CSS 속성들을 설명한다.

CSS1 2.1절 [CSS1]과 CSS2 18장 [CSS2]는 여러 사용자 인터페이스 관련 속성과 값을 도입했다. User Interface for CSS3 (16 February 2000)는 여러 새로운 사용자 인터페이스 관련 기능을 도입했다.

이 명세는 위의 내용을 통합하고 확장하며 대체(supersede)한다.

1.1. 목적

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

• CSS2.1의 사용자 인터페이스 기능을 확장한다.
• HTML의 다른 동적 프리젠테이션 관련 기능을 보완하거나 대체하기 위한 추가적인 CSS 메커니즘을 제공한다.

2. 모듈 상호작용

이 문서는 이전 명세에는 없던 새로운 기능을 정의한다. 추가로, 다음의 내용을 대체하고 무효화한다:

• 18.1절, 18.4절, 그리고 Cascading Style Sheets, level 2, revision 1 [CSS2]의 부록 E에 정의된 외곽선(outline) 쌓임(stacking) 정보
• User Interface for CSS3 (16 February 2000)

2.1. 값 정의

이 명세는 CSS 속성 정의 관례를 [CSS2]에서 따르며, 값 정의 문법은 [CSS-VALUES-3]에서 가져와 사용한다. 이 명세에서 정의되지 않은 값 타입들은 CSS Values & Units [CSS-VALUES-3]에서 정의된다. 다른 CSS 모듈과의 조합은 이 값 타입들의 정의를 확장할 수 있다.

각 속성 정의에 나열된 속성별 값들 이외에, 이 명세에서 정의된 모든 속성은 속성 값으로 CSS 전역 키워드(CSS-wide keywords)도 허용한다. 가독성을 위해, 이들은 반복해서 명시하지 않았다.

3. 박스 모델 추가

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

content-box

이는 CSS2.1에서 지정된 width와 height의 동작이다. 지정된 width와 height(및 각각의 min/max 속성)는 요소의 콘텐츠 박스의 너비와 높이에 적용된다. 요소의 padding과 border는 지정된 width와 height 바깥쪽에 배치되고 그려진다.

border-box

이 요소에 대해 width와 height(및 각 min/max 속성)의 길이·퍼센트 값은 요소의 border box를 결정한다. 즉, 요소에 지정된 padding이나 border는 이 지정된 width와 height 안쪽에 배치되고 그려진다. 콘텐츠의 width와 height는 각각의 변에 대한 border와 padding 값을 지정된 width와 height 속성에서 빼서 계산한다. 콘텐츠 width와 height는 음수가 될 수 없으므로 ([CSS2], 10.2절), 이 계산 결과는 0으로 바닥값을 갖는다(floored at 0). getComputedStyle() 등을 통해 노출되는 used value 역시 border box를 참조한다.

Note: 이는 레거시 HTML UA에서 대체(replaced) 요소와 input 요소에 일반적으로 구현된 width와 height의 동작이다.

Note: 길이와 퍼센트 값과 달리, auto 값(그리고 이후 명세에서 도입된 다른 키워드 값들로서 별도 지정이 없는 한)은 box-sizing 속성의 영향을 받지 않고, 항상 콘텐츠 박스의 크기를 설정한다.

box-sizing의 computed value에 따라 정의가 달라지는 다음 용어를 도입한다:

CSS2의 시각적 포맷팅 모델 세부사항 [CSS2]는 box-sizing: content-box를 가정하고 작성되었다. 이 명세의 모든 box-sizing 값에 대한 동작을 명확히 하기 위해 다음과 같은 해석을 추가한다:

1. 10.3.3에서, 다음 문구에 나오는 두 번째 width는 If width is not auto and border-left-width + padding-left + width + [...]에서 content width로 해석해야 한다.
2. 10.3.7의 식에서 width는 left + margin-left + border-left-width + padding-left + width + [...]에서 content 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. The tentative used width is calculated [...]
   2. If the tentative used width is greater than max-width, the rules above are applied again, but this time using the computed value of max-width as the computed value for width.
   3. If the resulting width is smaller than min-width, the rules above are applied again, but this time using the value of min-width as the computed value for width.
   4. Select from the table the resolved height and width values for the appropriate constraint violation. Take the max-width and max-height as max(min, max) so that min ≤ max holds true. In this table w and h stand for the results of the width and height computations [...]
   5. 표 안에 등장하는 이러한 단어들의 모든 경우
   6. Then apply the rules under "Calculating widths and margins" above, as if width were computed as this value.
4. 10.6.4의 식에서는 height가 top + margin-top + border-top-width + padding-top + height + [...]에서 content height로 해석되어야 한다.
5. 10.7에서는 width, height, min-height, max-height가 다음 문구들에서 각각 content width, content height, min inner height, max inner height로 해석되어야 한다:
   1. The tentative used height is calculated [...]
   2. If this tentative height is greater than max-height, the rules above are applied again, but this time using the value of max-height as the computed value for height.
   3. If the resulting height is smaller than min-height, the rules above are applied again, but this time using the value of min-height as the computed value for height.
   4. [...] use the algorithm under Minimum and maximum widths above to find the used width and height. Then apply the rules under "Computing heights and margins" above, using the resulting width and height as if they were the computed values.

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">This div occupies the left half.</div>
<div class="split">This div occupies the right half.</div>
</div>

4. Outline 속성

스타일 시트 저자는 때때로 버튼, 활성 폼 필드, 이미지 맵 등 시각적 객체 주변에 outline을 만들어 눈에 띄게 하고자 할 수 있다. outline은 다음과 같은 점에서 border와 다르다:

1. outline은 공간을 차지하지 않는다.
2. outline은 직사각형이 아닐 수도 있다.
3. UA는 흔히 :focus 상태인 요소에 outline을 렌더링한다.

outline 속성들은 이러한 동적 outline의 스타일을 제어한다.

이러한 outline의 렌더링 쌓임 순서는 플랫폼별로 더 나은 사용자 경험을 제공하기 위해 구현에 명시적으로 맡긴다. 이는 CSS 2.1 부록 E [CSS2]에 정의된 outline 쌓임 규칙을 대체한다.

특히, 페이지와 상호작용을 다른 방식으로는 할 수 없을 수도 있는 장애인들을 포함한 키보드 사용자는 :focus 상태의 요소에 outline이 보이는 것에 의존한다. 그러므로 저자는, 대체 하이라이트 메커니즘을 제공하지 않는 한, 그러한 요소에서 outline을 보이지 않게 만들어서는 안 된다.

outline에 transform을 적용했을 때의 렌더링은 CSS3-UI에서 명시적으로 정의하지 않는다.

4.1. Outline 단축 속성: outline 속성

4.2. Outline 두께: outline-width 속성

4.3. Outline 패턴: outline-style 속성

4.4. Outline 색상: outline-color 속성

outline 속성들로 만들어지는 outline은 박스 “위에” 그려진다. 즉 outline은 항상 맨 위에 있으며, 박스 자신이나 다른 어떤 박스의 위치나 크기에 영향을 미치지 않는다. 따라서 outline을 표시하거나 숨기는 것은 reflow를 유발하지 않는다.

outline은 직사각형이 아닐 수 있다. 예를 들어 요소가 여러 줄에 걸쳐 나뉘어져 있다면, outline은 그 요소의 모든 박스를 감싸는 outline 또는 최소 집합의 outline이어야 한다.

outline의 각 부분은 일부 변이 열린(border가 끊긴 inline 요소처럼) 것이 아니라 완전히 연결되어야 한다.

outline이 border edge를 따라가는 한에서, border-radius 곡선을 따라야 한다.

outline의 위치는 자손 박스들에 의해 영향을 받을 수 있다.

UA는 포커스 개념을 사용자에게 전달하기에 적절한 영역을 감싸는 outline을 결정하기 위해 알고리즘을 사용해야 한다.

Note: 이 명세는 outline의 정확한 위치나 모양을 정의하지 않지만, 일반적으로 border box 바로 바깥에 그려진다.

outline-width 속성은 border-width와 동일한 값을 허용한다 (CSS Backgrounds 3 § 3.3 Line Thickness: the border-width properties).

outline-style 속성은 border-style과 동일한 값을 허용한다 (CSS Backgrounds 3 § 3.2 Line Patterns: the border-style properties). 단, hidden은 합법적인 outline 스타일이 아니다. 추가로, CSS3에서 outline-style은 auto 값을 허용한다. auto 값은 UA가 사용자 인터페이스 기본값이거나 CSS에서 세부적으로 기술하기에는 어려운, 예를 들어 가장자리가 둥글고 반투명한 외곽 픽셀로 빛나는 것처럼 보이는 보다 풍부한 스타일의 커스텀 outline 스타일을 렌더링할 수 있게 해 준다. 그러므로 이 명세는 outline-color가 auto 스타일 outline을 렌더링할 때 어떻게(또는 전혀) 사용되는지에 대해 정의하지 않는다. UA는 auto를 solid로 취급할 수 있다.

outline-color 속성은 모든 색상과 함께 키워드 invert를 허용한다. invert는 화면상의 픽셀에 컬러 반전을 수행하는 것으로 기대된다. 이는 배경색과 상관 없이 포커스 테두리가 보이게 하기 위한 일반적인 트릭이다.

표준을 준수하는 UA는, 플랫폼이 화면 픽셀의 컬러 반전을 지원하지 않는 경우 invert 값을 무시할 수 있다.

UA가 invert 값을 지원하지 않는다면 파싱 시점에 해당 값을 거부해야 하며, 그 경우 outline-color 속성의 initial value는 currentColor 키워드가 된다.

outline 속성은 단축 속성(shorthand)으로, outline-style, outline-width, outline-color를 모두 설정한다.

Note: outline은 모든 변에서 동일하다. border와 달리, outline-top이나 outline-left와 같은 속성은 없다.

이 명세는 여러 개의 outline이 겹칠 때 어떻게 그려지는지, 또는 다른 요소 뒤에 일부 가려진 박스에 대한 outline이 어떻게 그려지는지를 정의하지 않는다.

button { outline: thick solid }

그래픽 사용자 인터페이스는 페이지에서 어떤 요소가 포커스를 갖는지 사용자에게 알리기 위해 요소 주위에 outline을 사용할 수 있다. 이러한 outline은 border에 추가되는 것이며, outline을 켜거나 끈다고 해서 문서가 reflow되어서는 안 된다. 포커스는 문서에서 사용자 상호작용의 대상 (예: 텍스트 입력, 버튼 선택 등)이다.

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

Note: outline은 포매팅(즉, 박스 모델에서 공간 예약)에 영향을 주지 않으므로, 페이지의 다른 요소와 겹칠 수 있다.

4.5. Outline 오프셋: outline-offset 속성

기본적으로 outline은 border edge 바로 바깥에서 그려진다. 그러나 outline을 border edge 바깥으로 더 멀리 오프셋하여 그릴 수도 있다.

outline-offset의 computed value가 0이 아닌 값이라면, outline은 그 값만큼 border edge에서 바깥쪽으로 옮겨져(outset) 그려진다.

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

음수 값은 outline이 border box 안쪽으로 줄어들게 해야 한다. outline이 그리는 형상의 바깥쪽 너비와 높이는 outline-width의 computed value의 두 배보다 작아져서는 안 되며, 이는 큰 음수 값이더라도 outline을 렌더링할 수 있게 하기 위한 것이다. UA는 이 제약을 각 차원에 독립적으로 적용해야 한다. outline이 여러 개의 분리된 형상으로 그려지는 경우, 이 제약은 각 형상에 개별적으로 적용된다.

5. Resizing & Overflow

CSS2.1은 블록 컨테이너 요소에서 스크롤 메커니즘(예: 스크롤바)의 표시 여부를 제어하는 메커니즘을 제공한다. 이 명세는 여기에 더해, 요소의 사용자 리사이즈 가능성 제어와 텍스트 오버플로우 동작을 지정하는 기능을 추가한다.

5.1. 박스 리사이즈: resize 속성

resize 속성은 사용자가 요소를 리사이즈할 수 있는지, 그렇다면 어느 축 방향으로 가능한지를 저자가 지정할 수 있게 해 준다.

none

UA는 요소에 리사이즈 메커니즘을 제공하지 않으며, 사용자는 요소를 직접 조작해 리사이즈할 수 없다.

both

UA는 양방향 리사이즈 메커니즘을 제공해 사용자가 요소의 너비와 높이를 모두 조정할 수 있게 한다.

horizontal

UA는 수평 단방향 리사이즈 메커니즘을 제공해 사용자가 요소의 너비만 조정할 수 있게 한다.

vertical

UA는 수직 단방향 리사이즈 메커니즘을 제공해 사용자가 요소의 높이만 조정할 수 있게 한다.

현재는 overflow 속성 (예: overflow: scroll vs. overflow: hidden 등)을 사용해 요소의 스크롤 메커니즘(있다면)의 표시 여부를 제어할 수 있다. resize 속성의 목적은 요소 위의 리사이즈 메커니즘(예: 리사이즈 박스/위젯)의 표시 및 기능을 제어하는 것이다.

Note: 리사이즈 메커니즘은 스크롤 메커니즘과 동일하지 않으며, UA의 줌 메커니즘과도 관련이 없다. 스크롤 메커니즘은 요소 콘텐츠 중 어느 부분을 보여줄지를 사용자에게 맡기는 것이고, 리사이즈 메커니즘은 요소의 크기 자체를 사용자에게 맡기는 것이다.

resize 속성은 다음 요소에 적용된다. computed overflow 값이 visible이 아닌 요소. scroll containers인 요소. UA는 또한 overflow 값과 상관 없이 다음 요소에 적용할 수 있다:

• 다음과 같은 이미지/비디오 대체 요소: img, video, picture, svg, object, 또는 canvas.
• iframe 요소.

resize 속성이 생성된 콘텐츠에 미치는 효과는 정의되지 않는다. 구현은 생성된 콘텐츠에 resize 속성을 적용하지 말아야 한다.

Note: resize 속성은, CSSPseudoElement 인터페이스(See [css-pseudo-4])가 구현된다면, 이후 생성된 콘텐츠에 적용될 수도 있다.

사용자가 요소를 리사이즈하면, UA는 width와 height 속성을 사용자가 지정한 크기의 px 단위 값으로, 요소의 style attribute DOM에 설정해야 하며, 기존 선언(있다면)을 교체하되 !important는 붙이지 않아야 한다.

요소가 한 방향으로만 리사이즈된 경우 해당 방향의 속성만 설정하고, 두 속성을 모두 설정하지는 않는다.

리사이즈의 정확한 방향 (즉, 요소의 왼쪽 상단을 움직이는지, 오른쪽 하단을 움직이는지 등)은 요소가 absolute positioned인지, right와 bottom을 사용하는지, 문서 언어가 RTL인지와 같은 여러 CSS 레이아웃 요소에 따라 달라질 수 있다. UA는 리사이즈 방향(CSS 레이아웃으로부터 결정됨)과 플랫폼 규약 및 제약을 고려해, 리사이즈 메커니즘을 사용자에게 어떻게 전달할지 결정해야 한다.

UA는 min-width, max-width, min-height, max-height가 부과하는 제약을 제외하고는 사용자가 요소를 리사이즈할 수 있도록 허용해야 한다.

Note: !important를 가진 선언이 해당 요소의 style attribute의 width와 height 속성보다 우선하는 등, 사용자의 리사이즈 시도가 무시되거나 덮어쓰기된 것처럼 보일 수 있는 상황이 있을 수 있다.

요소의 resize 속성 computed value 변경은 해당 요소의 style attribute에 사용자 리사이즈로 인해 이루어진 변경을 리셋하지 않는다.

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

5.2. Overflow Ellipsis: text-overflow 속성

이 속성은 블록 컨테이너 요소(“블록”)의 인라인 전진 방향 inline content가 그 블록의 끝 line box edge를 넘어 오버플로우할 때의 렌더링을 지정한다. 단, 블록은 overflow 값이 visible이 아닌 경우에만 해당한다.

텍스트는 예를 들어 white-space: nowrap 때문에 줄바꿈이 막혔거나, 하나의 단어가 너무 길어 줄에 들어가지 않을 때 오버플로우할 수 있다. 각 값의 의미는 다음과 같다:

clip

블록 컨테이너 요소를 넘어서는 inline content를 잘라낸다. 문자는 부분적으로만 렌더링될 수도 있다.

ellipsis

잘린 inline content를 나타내기 위해 줄임표 문자(U+2026)를 렌더링한다. 구현은 언어, 스크립트, writing-mode에 더 적합한 다른 줄임표 문자나, 줄임표 문자를 사용할 수 없는 경우 세 점 "..."으로 대체할 수 있다.

이 속성 정의에서 “character”라는 용어는 가독성을 위해 사용되었으며, 구현 시에는 "grapheme cluster" [UAX29]를 의미한다.

ellipsis 값의 경우, 구현은 ellipsis가 들어갈 공간을 확보하기 위해 필요할 때 줄의 끝 변에서 문자와 원자적 인라인 레벨 요소를 숨겨야 하며, 남은 inline content의 끝 변에 바로 이어서 ellipsis를 배치해야 한다. 줄의 첫 번째 문자나 원자적 인라인 레벨 요소는 ellipsis 대상이 아닌 clip 대상이어야 한다.

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

ellipsis 세부 사항

• ellipsis 처리는 렌더링에만 영향을 주어야 하며, 레이아웃이나 포인터 이벤트 디스패치에는 영향을 주지 않아야 한다: UA는 ellipsis 위에 발생한 포인터 이벤트를, 마치 text-overflow가 none인 것처럼, 잘려 나간(elided) 요소로 디스패치해야 한다.
• ellipsis는 블록을 기준으로 스타일링되고 기준선 정렬된다.
• ellipsis 처리는 상대 위치 지정 및 기타 그래픽 변환 이후에 이루어진다.
• ellipsis를 그릴 공간조차 부족하다면, ellipsis 자체의 렌더링을 clip해야 한다 (이는 text-overflow:clip 값으로 중립 문자(neutral characters)가 잘려 나갔을 쪽과 동일한 쪽에서 수행해야 한다).

ellipsis와 사용자 상호작용

• 사용자가 콘텐츠와 상호작용 중일 때 (예: 편집, 선택, 스크롤링), UA는 text-overflow: ellipsis를 text-overflow: clip으로 처리할 수 있다.
• ellipsis를 선택하면 ellipsis 처리된 텍스트를 선택해야 한다. ellipsis 처리된 텍스트 전체가 선택되면, UA는 ellipsis도 선택된 것처럼 보여줘야 한다. 일부만 선택된 경우의 동작은 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>

Note: ellipsis가 놓이는 쪽은 블록의 direction에 따라 달라진다. 예를 들어, overflow hidden인 right-to-left (direction: rtl) 블록은 인라인 콘텐츠를 왼쪽 쪽에서 잘라내며, 잘린 콘텐츠를 나타내기 위해 왼쪽에 text-overflow ellipsis를 배치한다.

ellipsis와 스크롤링 인터페이스

이 절은 값이 text-overflow:clip이 아닌 text-overflow(“non-clip text-overflow”)와 overflow:scroll을 가진 요소에 적용된다.

non-clip text-overflow를 가진 요소가, 텍스트의 인라인 진행 방향에 대해 overflow: scroll을 가지고 브라우저가 스크롤 메커니즘(예: 요소에 대한 스크롤바나 터치 기반 스와이프 스크롤 등)을 제공하는 경우, 더 나은 사용자 경험을 위한 추가 구현 세부사항이 있다:

요소가 스크롤되면(예: 사용자나 DOM 조작에 의해), 요소의 더 많은 콘텐츠가 보여진다. text-overflow 값은 요소 콘텐츠가 더 많이 보이는지 여부에 영향을 주지 않아야 한다. non-clip text-overflow가 설정된 경우, 더 많은 콘텐츠가 뷰로 스크롤될수록, 구현은 추가로 들어오는 콘텐츠를 가능한 한 보여 주되, 그렇지 않으면 잘려나갈 콘텐츠 (또는 ellipsis/문자열을 위한 공간 확보에 필요한 콘텐츠)만 잘라내야 한다. 요소가 콘텐츠의 끝(edge)를 표시할 만큼 충분히 스크롤되면, 그 시점에서는 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 안에 있을 때 표시될 커서 타입을 지정한다.

Note: CSS Backgrounds 3 § 4.1 Curve Radii: the border-radius properties에 따라, border edge는 border-radius의 영향을 받는다.

요소가 겹치는 경우, 어떤 요소가 커서 타입을 결정하는지는 히트 테스트에 따라 결정된다: 커서를 결정하는 요소는, 이 위치에서 시작된 클릭을 받게 되는 요소이다.

Note: 히트 테스트의 세부 사항은 이 명세 범위를 벗어난다. 히트 테스트는 추후 CSS 또는 HTML 개정판에서 정의될 예정이다.

UA는 스크롤바, 리사이저 등 UA 네이티브 컨트롤, 혹은 일부 UA별 form 요소 구현 내부에서 사용하는 기타 네이티브 UI 위젯 위에서는 cursor 속성을 무시할 수 있다. 또한, UA는 페이지가 응답하지 않을 때 busy 커서를, 텍스트 선택 중일 때 text 커서를 보여 주는 것처럼, UA의 UI 상태를 나타내기 위해 cursor 속성을 무시하고 임의의 커서를 표시할 수 있다.

Note: [HTML]은, cursor 속성에 대한 이미지 맵의 특수 처리를 정의한다.

값의 의미는 다음과 같다:

<cursor-image>

cursor 속성의 첫 번째(선택적) 구성요소는 이미지 기반 커서 목록이다. UA가 목록의 첫 번째 커서를 처리할 수 없으면 두 번째를 시도해야 하며, 이런 식으로 계속 진행해야 한다. UA가 저자가 지정한 어느 커서도 처리할 수 없다면, 목록 끝에 있는 키워드 기반 커서를 사용해야 한다.

<cursor-image>의 문법은 다음과 같다:

<cursor-image> = <url> <number>{2}?

UA는 URL이 가리키는 리소스에서 커서를 가져온다. 적합한 UA는 <url> 대신, 그 상위 집합인 <image>를 지원할 수 있다.

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

• [PNG]에 정의된 PNG
• [SVG11]에 정의된 SVG(secure static mode, secure static mode [SVG2]), 단 natural size가 있는 경우
• 기타, 다른 속성(예: background-image)에서 <image> 값으로 지원하는 비애니메이션 이미지 포맷

추가로, UA는 다음 이미지 포맷을 지원해야 한다:

• [SVG11]에 정의된 SVG를 secure animated mode로 ([SVG2]), 단 natural size가 있는 경우
• 기타, 다른 속성에서 <image> 값으로 지원하는 모든 애니메이션 이미지 포맷 (예: background-image)

UA는 또한, natural size가 없는 경우도 포함하여, [SVG11]에 정의된 SVG를 secure static mode 또는 secure animated mode [SVG2]로 추가 포맷으로 지원할 수 있다.

Note: CSS WG는 처음에는, natural size 여부와 무관하게 모든 SVG 지원을 의도했다. natural size가 없는 SVG 지원은 구현 부족으로 인해 필수에서 선택 사항으로 내려갔다.

Note: 이 명세 작성 시점(2015년 봄)에, 일반 데스크톱 브라우저에서 커서용으로 지원되는 포맷은 Microsoft가 설계한 .ico와 .cur뿐이다. 레거시 콘텐츠와의 호환성을 위해, UA는 이들을 지원하는 것이 권장되지만, 공개 명세가 없기 때문에 이러한 포맷에 대한 규범 요구사항은 둘 수 없다. 해당 포맷에 대한 정보는 위키피디아에서 일부 찾을 수 있다.

cursor 이미지의 기본 객체 크기(default object size)는 UA의 운영체제에서 일반적인 커서 크기를 기반으로 하는 UA 정의 크기여야 한다.

concrete object size는 기본 사이징 알고리즘을 사용해 결정된다. 운영체제가 특정 크기 이상의 커서를 렌더링할 수 없는 경우, 그보다 큰 커서는 운영체제가 지원하는 크기 범위 안으로 축소되어야 하며, 이미지에 natural aspect ratio가 있다면 이를 유지해야 한다.

선택적인 두 개의 <number> 값은 이미지의 왼쪽/위에서부터 오프셋된 핫스폿 위치의 X, Y 좌표를 나타낸다.

Note: 이 명세는 다양한 종류의 <image>의 좌표계를 어떻게 설정하는지 정의하지 않으며, 이는 [CSS4-IMAGES]에 위임한다.

값을 생략하면, 이미지 리소스 내부에 정의된 natural hotspot을 사용한다. natural hotspot이 없다면, 0 0이 지정된 것처럼 이미지의 왼쪽 위 모서리를 사용한다.

핫스폿의 X 또는 Y 좌표 (명시적으로 지정했든 이미지에서 가져왔든)가 커서 이미지 바깥으로 벗어나면, 각각을 이미지 내부로 clamp해야 한다.

<cursor-predefined>

필수 <cursor-predefined> 키워드는 사용해야 할 미리 정의된 커서나, <url>이 제공되었으나 어느 것도 성공적으로 사용될 수 없을 때의 폴백 커서를 지정한다.

§ 6.1.1.1 Predefined Cursors에서 전체 <cursor-predefined> 키워드와 그 의미를 볼 수 있다.

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

6.1.1.1. 미리 정의된 커서

<cursor-predefined>는 대부분의 운영체제에 존재하는 다양한 미리 정의된 커서들을 포괄한다. 그 문법은 다음과 같다:

<cursor-predefined> = auto | default | none |
  context-menu | help | pointer | progress | wait |
  cell | crosshair | text | vertical-text |
  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 |
  ew-resize | ns-resize | nesw-resize | nwse-resize |
  col-resize | row-resize |
  all-scroll |
  zoom-in | zoom-out

<cursor-predefined> 키워드의 의미와 일반적인 렌더링은 다음과 같다:

범용 커서(general purpose cursors)

auto

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

default

플랫폼 종속 기본 커서. 보통 화살표로 렌더링된다.

none

이 요소에는 커서가 렌더링되지 않는다.

링크와 상태 커서(links and status cursors)

context-menu

커서 아래 객체에 대한 컨텍스트 메뉴가 가능함을 나타낸다. 보통 화살표와 함께 그 옆에 작은 메뉴 모양 그래픽으로 렌더링된다.

help

커서 아래 객체에 대한 도움말이 있음을 나타낸다. 보통 물음표나 말풍선 모양으로 렌더링된다.

pointer

링크를 나타내는 포인터 커서이다.

progress

진행 상황 표시기. 프로그램이 어떤 처리를 수행 중이지만, 사용자가 여전히 상호작용할 수 있다는 점에서 wait과 다르다. 흔히 회전하는 비치볼, 또는 시계나 모래시계와 함께 있는 화살표로 렌더링된다.

wait

프로그램이 바쁘며 사용자가 기다려야 함을 나타낸다. 보통 시계나 모래시계로 렌더링된다.

선택 커서(selection cursors)

cell

셀 또는 셀 집합을 선택할 수 있음을 나타낸다. 보통 가운데 점이 있는 두꺼운 플러스 기호로 렌더링된다.

crosshair

단순 십자선(예: "+" 모양의 짧은 선분)이다. 종종 2차원 비트맵 선택 모드에 사용된다.

text

선택 가능한 텍스트를 나타낸다. 흔히 수직 I-빔으로 렌더링된다. UA는 수직 텍스트의 경우 (예: vertical-text 키워드와 같은) 수평 I-빔/커서를 자동으로 표시할 수 있으며, 임의 각도에서 렌더링되는 텍스트에 대해서도 그 각도에 맞는 I-빔/커서를 표시할 수 있다.

vertical-text

선택 가능한 수직 텍스트를 나타낸다. 보통 수평 I-빔으로 렌더링된다.

드래그 앤 드롭 커서(drag and drop cursors)

alias

무언가의 alias/shortcut이 생성될 것임을 나타낸다. 보통 화살표와 함께 그 옆에 작은 곡선 화살표가 렌더링된다.

copy

무언가가 복사될 것임을 나타낸다. 보통 화살표와 함께 그 옆에 작은 플러스 기호가 렌더링된다.

move

무언가가 이동될 것임을 나타낸다.

no-drop

현재 커서 위치에 드래그 중인 항목을 놓을 수 없음을 나타낸다. 보통 손 모양 또는 포인터에 그 옆에 작은 금지 표시(원+사선)가 렌더링된다.

not-allowed

요청된 동작이 수행되지 않을 것임을 나타낸다. 보통 금지 표시(원+사선)로 렌더링된다.

grab

무언가를 잡아(드래그해 이동할 수 있음을) 나타낸다. 보통 펼친 손등 모양으로 렌더링된다.

grabbing

무언가를 잡고(드래그해 이동 중임을) 나타낸다. 보통 대부분의 손가락이 안 보이게 오므린 손등 모양으로 렌더링된다.

리사이즈·스크롤 커서(resizing and scrolling cursors)

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

어느 방향으로든 스크롤할 수 있음을 나타낸다. 보통 가운데 점을 중심으로 상하좌우 화살표가 있는 모양으로 렌더링된다.

줌 커서(zooming cursors)

zoom-in

zoom-out

무언가를 확대/축소할 수 있음을 나타낸다. 보통 돋보기 안에 zoom-in의 경우 “+”, zoom-out의 경우 “−”가 들어 있는 모양으로 렌더링된다.

6.1.1.2. 캔버스의 커서

문서 canvas는 문서가 렌더링되는 무한한 표면이다 [CSS2]. 어떠한 요소도 캔버스에 직접 대응하지 않으므로, 어떤 요소 위에도 있지 않을 때의 커서 스타일을 허용하기 위해, 캔버스 커서는 루트 요소의 커서를 재사용한다. 단, 루트 요소가 (display: none 등으로 인해) 박스를 생성하지 않는다면, 캔버스 커서는 플랫폼 종속 기본 커서가 된다.

Note: 요소가 보이지 않더라도 박스를 생성할 수 있다. 예를 들어, 요소에 visibility: hidden이 설정되어 있지만 display: none이 아닌 경우, 해당 요소와 그 자손은 박스를 생성하며, 그 커서가 캔버스에 사용된다.

6.2. 삽입 캐럿

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

auto

UA는 currentColor를 사용해야 한다. UA는 caret의 색을 자동으로 조정해 주변 콘텐츠와의 시인성과 대비가 좋도록 할 수 있으며, 이 과정에서 currentColor, background, shadow 등도 고려할 수 있다.

<color>

삽입 캐럿을 지정된 색으로 그린다.

캐럿(caret)은 요소 내에서 사용자가 텍스트(및 잠재적으로 다른 콘텐츠)를 삽입하는 위치를 나타내는 시각적 표시이다. 이 속성은 그 표시의 색을 제어한다.

Note: caret의 모양과 깜빡임 여부는 이 기능의 범위를 벗어나며 정의되지 않는다.

Note: UA는 caret으로 취급될 수 있는 추가적인 요소를 가질 수 있다. 예를 들어 일부 UA는, 비편집 텍스트에서도 이동 가능한 “탐색 캐럿(navigation caret)”을 표시할 수 있으며, 이는 삽입 캐럿과 유사하게 동작하고 기능적으로는 caret이다. 반면, cursor 속성이 auto일 때 텍스트 위에 표시되는 커서 이미지나, cursor 속성이 text 또는 vertical-text인 요소 위에 표시되는 커서는, 모양이 caret과 비슷하더라도 caret이 아니라(커서일 뿐이다.)

6.3. 키보드 제어

6.3.1. 폐지됨: ime-mode 속성

"ime-mode"는 일부 브라우저에서 부분적으로 구현되어 있는 속성이지만, 문제가 많으며 이 명세에 의해 공식적으로 폐지(obsoleted)된다.

UA는 ime-mode 속성을 지원하지 말아야 한다.

저자는 ime-mode 속성을 사용하지 말아야 한다.

사용자는, 예를 들어 사용자 스타일 시트에서 다음과 같은 규칙을 사용하는 등, 잘못된 사이트와 레거시 구현을 우회하기 위한 “수리(repair)” 용도로만 ime-mode 속성을 사용할 수 있다:

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

이 예제 CSS는 사용자 스타일 시트에 넣어, password 입력 필드가 기본 동작을 하도록 강제하는 데 사용할 수 있다.

이 명세는 레거시 ime-mode 구현의 기능이나 구체적인 지원 내용을 문서화하려 하지 않으며, 그와 같은 방향으로 나아가거나 권장할 만한 타당한 이유가 없기 때문이다.

부록 A: 감사의 말

이 부록은 비규범적(informative)이다.

이 명세는 대부분 1999년부터 현재까지 Tantek Çelik이 편집·작성했으며, 처음에는 Microsoft를 대표해, 이후에는 초청 전문가(Invited Expert)로서, 최근에는 Mozilla를 대표해 작업했다.

Florian Rivoal에게 감사한다. 그는 Bloomberg를 대표해 이 명세를 작업하면서, 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: 변경 사항

이 부록은 비규범적(informative)이다.

2018년 6월 21일 권고(REC)와의 변경 사항

• Candidate Correction 1: overflow 값이 visible이 아닌 경우 대신 scroll containers를 참조하도록 변경해, clip도 포함되도록 했다.
• Candidate Correction 2: outline-width의 computed value가 border width로 스냅되도록 했다.
• Candidate Correction 3: computed value와 animation type 정의를 업데이트하고 명확히 했다.
• Candidate Correction 4: outline-style: none에 기반해 outline-width의 computed value가 0이 되는 특수 케이스를 제거했다.
• 다른 명세와의 일관성을 위해, 'intrinsic width/height/aspect ratio/size' 용어를 'natural' 용어로 대체했다.
• 속성 정의에서 "Media" 항목을 제거했다. 그 의미는 제대로 정의된 적이 없으며, 유용한 정보를 추가하지도 않는다.
• 다른 CSS 명세와의 일관성을 위해 Value Definitions 절을 추가했다.
• cursor 속성 문법 설명을 가독성을 위해 재구성했다.
• Web Platform Tests 커버리지를 추가했다.
• 개인정보 보호와 보안 고려 사항을 별도 절로 분리했다.
• 다른 CSS 모듈에 대한 참조를 보다 최신 버전으로 업데이트했다.
• 기타 다양한 편집상의 개선을 했다.

2017년 3월 2일 후보 권고(CR)와의 변경 사항

• 최신 버전으로 참조를 업데이트했다.
• resize 속성에 대한 편집상의 명확화(clarification)를 추가했다.
• 위험(at risk) 상태인 방향 포커스 탐색 속성을 3단계에서 4단계로 옮겼다.
• 이미지 맵 위에서의 cursor 특수 처리를 설명하는 HTML 링크를 정보용으로 추가했다.
• 구현자 합의를 반영하기 위해, pointer events에 대한 text-overflow의 함의를 SHOULD 수준으로 명확히 했다 (관련 테스트).
• UA의 UI 상태를 반영하기 위해 UA가 cursor 속성을 무시할 수 있도록 허용하는 내용을 명확히 했다.
• natural size가 없는 SVG 이미지의 커서 사용을 허용하되 필수 지원 대상에서는 제외하도록 했다 (관련 테스트 업데이트).
• 명세를 구현과 일치시키고, cursor: auto가 선택 가능한 텍스트 위와 편집 가능한 요소 위에서 text처럼 보이도록 했다 (관련 테스트).

부록 C: 개인정보 보호 고려사항

W3C TAG는 명세 편집자가 정보 제공 목적으로 답할 수 있는 Self-Review Questionnaire: Security and Privacy를 개발 중이다.

Questions to Consider에 따라:

1. 이 명세는 개인 식별 정보(PII)를 다루는가?

   아니오.

2. 이 명세는 고가치 데이터(high-value data)를 다루는가?

   아니오.

3. 이 명세는 브라우징 세션 간 지속되는(origin-level) 새 상태를 도입하는가?

   아니오.

4. 이 명세는 웹에 지속적인 교차 출처 상태를 노출하는가?

   아니오.

5. 이 명세는 기존에 접근할 수 없던 데이터를 출처(origin)에 노출하는가?

   아니오.

6. 이 명세는 출처가 사용자의 위치에 접근하도록 허용하는가?

   아니오.

7. 이 명세는 출처가 사용자의 디바이스 센서에 접근하도록 허용하는가?

   아니오.

8. 이 명세는 출처가 사용자의 로컬 컴퓨팅 환경의 측면에 접근하도록 허용하는가?

   아니오.

9. 이 명세는 출처가 다른 디바이스에 접근하도록 허용하는가?

   아니오.

10. 이 명세는 일시적인 식별자를 웹에 노출하는가?

    아니오.

11. 이 명세는 1st party와 3rd party 컨텍스트 간에 동작을 구분하는가?

    아니오.

12. 이 명세는 UA의 “시크릿 모드/incognito 모드”에서 어떻게 동작해야 하는가?

    일반 모드와 다르지 않게.

13. 이 명세는 사용자의 로컬 디바이스에 데이터를 지속적으로 저장하는가?

    아니오.

부록 D: 보안 고려사항

이 부록은 비규범적(informative)이다.

W3C TAG는 명세 편집자가 정보 제공 목적으로 답할 수 있는 Self-Review Questionnaire: Security and Privacy를 개발 중이다.

Questions to Consider에 따라:

1. 이 명세는 새로운 스크립트 실행/로딩 메커니즘을 가능하게 하는가?

   로딩에 대해서는 예, 실행에 대해서는 아니오. cursor 속성은 URL을 포함할 수 있는 <image> 값을 허용한다. 이들은 스크립트를 포함할 수 있는 SVG 문서일 수 있지만, 이 명세는 스크립트가 실행되어서는 안 된다고 요구한다.

2. 이 명세는 출처가 UA의 네이티브 UI를 어느 정도 제어하도록 허용하는가?

   예. cursor와 caret-color 속성은 페이지가 UA 네이티브 UI의 커서와 삽입 캐럿 표시를 변경할 수 있게 한다. 추가로 outline-style의 auto 값(및 outline 단축 속성)은 페이지가 모든 요소 주위에 네이티브 포커스 outline 표현을 표시할 수 있게 한다.

3. 이 명세는 기본 보안 특성을 다운그레이드할 수 있도록 허용하는가?

   아니오.

부록 E: HTML을 위한 기본 스타일시트 추가

이 부록은 비규범적(informative)이다.

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][value],
input[type=submit][value],
input[type=checkbox],
input[type=radio],
input,
input[type=text],
input[type=password],
input[type=image] {
  white-space: nowrap;
}

button {
  /* 특히 BUTTON 태그의 white-space 처리 */
  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 처리 */
  white-space:pre-wrap;
  resize: both;
}

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

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

select[size] {
/* size>1인 HTML4/XHTML1 <select> - 리스트 appearance */
  display: inline-block;
  height: attr(size,em);
}

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

select[size]:active {
/* size>1인 HTML <select>의 active 상태 - 활성 리스트 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
}

*/