CSS 기본 사용자 인터페이스 모듈 4단계

1. 소개

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

CSS1의 2.1절 [CSS1] 및 CSS2의 18장 [CSS21]에서는 여러 사용자 인터페이스 관련 속성과 값을 도입했다. CSS3 사용자 인터페이스(2000년 2월 16일)에서는 여러 새로운 사용자 인터페이스 관련 기능을 도입했다.

[CSS-UI-3]는 이후 이를 통합하고 확장하며 대체하기 위해 도입되었다. 이 명세는 이 작업을 계속하며, 그 결과 [CSS-UI-3]를 대체한다.

1.1. 목적

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

• [CSS21] 및 [CSS-UI-3]의 사용자 인터페이스 기능을 확장한다.
• HTML의 다른 동적 프레젠테이션 관련 기능을 보강하거나 대체하기 위한 추가적인 CSS 메커니즘을 제공한다.
• 방향성 내비게이션 모델을 사용하는 사용자 인터페이스의 구성을 돕기 위해 방향 내비게이션 속성을 도입한다.

2. 모듈 상호작용

이 문서는 이전 명세에는 존재하지 않았던 새로운 기능을 정의한다. 또한 [CSS-UI-3]를 대체하며, 이는 다시 다음을 대체하고 확장했다:

• 18.1절, 18.4절, 그리고 부록 E에 정의된 윤곽선의 스태킹에 관한 정보 — Cascading Style Sheets, level 2, revision 1 [CSS21]
• CSS3 사용자 인터페이스(2000년 2월 16일) [CSS-UI-3]

참고: box-sizing 속성은 이전에 이 절에서 정의되었으나, CSS Sizing 3 § 3.3 크기 계산을 위한 박스 가장자리: box-sizing 속성으로 이동되었다.

참고: text-overflow 속성은 이전에 이 절에서 정의되었으나, CSS Overflow 3 § 5.1 오버플로우 생략 부호: text-overflow 속성으로 이동되었다.

2.1. 값 정의

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

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

3. 윤곽선 속성

때때로 스타일시트 작성자는 버튼, 활성 폼 필드, 이미지 맵 등과 같은 시각적 객체를 돋보이게 하기 위해 그 주위에 윤곽선을 만들고자 할 수 있다. 윤곽선은 다음과 같은 점에서 테두리와 다르다:

1. 윤곽선은 공간을 차지하지 않는다.
2. 윤곽선은 요소의 잉크 오버플로우 영역에 기여한다.
3. 윤곽선은 직사각형이 아닐 수 있다.
4. UA는 종종 :focus-visible 상태의 요소에 윤곽선을 렌더링한다.

윤곽선 속성은 이러한 동적 윤곽선의 스타일을 제어한다.

이러한 윤곽선의 렌더링 스태킹은 플랫폼별로 더 나은 사용자 경험을 제공하기 위해 구현에 명시적으로 맡겨진다. 이는 CSS 2.1의 부록 E에 정의된 윤곽선 스태킹을 대체한다 [CSS21].

키보드 사용자는, 특히 다른 방식으로 페이지와 상호작용할 수 없는 장애가 있는 사람들은, :focus-visible 상태의 요소에서 윤곽선이 보이는 것에 의존한다. 따라서 작성자는 대체 강조 메커니즘이 제공되었음을 확인하지 않는 한 이러한 요소에서 윤곽선을 보이지 않게 만들어서는 안 된다.

윤곽선에 변형을 적용했을 때의 렌더링은 명시적으로 정의되지 않는다.

3.1. 윤곽선 단축 속성: outline 속성

outline 속성은 단축 속성이며, outline-style, outline-width, 그리고 outline-color의 세 가지를 모두 설정한다. 모호한 경우로, 단독으로 auto 값이 지정되었거나, auto가 <'outline-width'> 값과 함께 지정되었지만 명시적인 <'outline-style'> 또는 <'outline-color'> 값이 없는 경우, outline-style과 outline-color는 모두 auto로 설정된다.

참고: 이 단축 속성은 outline-offset 속성을 의도적으로 포함하지 않는다. 이는 윤곽선의 모양이 아니라 위치를 결정하는 속성이므로 독립적으로 캐스케이드될 수 있도록 하기 위함이며, 또한 하위 호환성 때문이다.

윤곽선 속성으로 생성된 윤곽선은 박스 “위에” 그려진다. 즉, 윤곽선은 항상 위에 있으며 박스나 다른 어떤 박스의 위치나 크기에도 영향을 주지 않는다. 따라서 윤곽선을 표시하거나 숨겨도 리플로우는 발생하지 않는다.

윤곽선은 직사각형이 아닐 수 있다. 예를 들어 요소가 여러 줄에 걸쳐 분할된 경우, 윤곽선은 요소의 모든 박스를 둘러싸는 윤곽선 또는 최소한의 윤곽선 집합이어야 한다.

윤곽선의 각 부분은 일부 변이 열린 상태가 아니라 완전히 연결되어 있어야 한다 (인라인 요소의 테두리가 줄이 끊어질 때처럼).

윤곽선의 부분은 직사각형일 필요는 없다. 윤곽선이 테두리 가장자리를 따르는 범위에서는, border-radius 곡선과 corner-shape를 따라야 한다.

윤곽선의 위치는 자손 박스에 의해 영향을 받을 수 있다.

그려진 윤곽선의 치수는 요소의 잉크 오버플로우 영역에 기여한다.

사용자 에이전트는 사용자에게 포커스 개념을 전달하기에 적절한 영역을 둘러싸는 윤곽선을 결정하기 위한 알고리즘을 사용해야 한다.

참고: 이 명세는 윤곽선의 정확한 위치나 형태를 정의하지 않지만, 일반적으로 테두리 박스 바로 바깥에 그려진다.

참고: 윤곽선은 모든 변에서 동일하다. 테두리와 달리 outline-top, outline-left 등과 같은 속성은 없다.

이 명세는 여러 윤곽선이 겹칠 때 어떻게 그려지는지, 또는 다른 요소 뒤에 부분적으로 가려진 박스에 대해 윤곽선이 어떻게 그려지는지를 정의하지 않는다.

button { outline: thick solid }

그래픽 사용자 인터페이스는 페이지에서 어떤 요소가 포커스를 가지고 있는지 사용자에게 알리기 위해 요소 주위에 윤곽선을 사용할 수 있다. 이러한 윤곽선은 테두리에 추가로 표시되며, 윤곽선을 켜고 끄는 것은 문서의 리플로우를 유발해서는 안 된다. 포커스는 문서에서 사용자 상호작용의 대상이다 (예: 텍스트 입력이나 버튼 선택).

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

참고: 윤곽선은 포맷팅에 영향을 주지 않으므로 (즉, 박스 모델에서 이를 위한 공간이 남겨지지 않으므로), 페이지의 다른 요소와 겹칠 수 있다.

3.2. 윤곽선 두께: outline-width 속성

outline-width 속성은 border-width와 동일한 값을 허용하며 (CSS Backgrounds 3 § 3.3 선 두께: border-width 속성), 동일한 의미를 가진다.

3.3. 윤곽선 패턴: outline-style 속성

<outline-line-style>은 <line-style>과 동일한 값을 허용하며 (CSS Backgrounds 3 § 3.2 선 패턴: border-style 속성), 동일한 의미를 가진다. 단, hidden은 유효한 윤곽선 스타일이 아니다. 또한, outline-style 속성은 auto 값을 허용한다.

auto 값은 사용자 에이전트가 사용자 정의 윤곽선 스타일을 렌더링할 수 있도록 허용한다. 이는 일반적으로 플랫폼의 기본 사용자 인터페이스 스타일이거나, CSS로 세부적으로 표현할 수 없는 더 풍부한 스타일일 수 있다. 예를 들어 반투명한 외곽 픽셀을 가진 둥근 모서리 윤곽선이 빛나는 것처럼 보일 수 있다. 사용자 에이전트는 outline-color 속성을 통해 작성자가 auto 스타일 윤곽선의 렌더링에 영향을 미치도록 허용할 수 있으나, 이 명세는 그 영향 방식(있다면)을 정의하지 않는다. outline-width 속성은 outline-style이 auto일 때 무시된다. 사용자 에이전트는 auto를 solid로 취급할 수 있다.

3.4. 윤곽선 색상: outline-color 속성

outline-color 속성은 <'border-top-color'>의 모든 값을 허용하며, 다음 키워드도 허용한다:

auto

outline-style이 auto일 때, outline-color: auto는 auto로 계산되며 강조 색상을 나타낸다.

그 외의 경우, outline-color: auto는 currentColor로 계산된다.

CSS Color 4 § 14. <color> 값의 계산을 참조하라. 또한 CSS Images 4 § 4 1차원 이미지 값: <image-1D> 타입과 stripes() 표기을 <image-1D> 값에 대해 참조하라.

3.5. 윤곽선 오프셋: outline-offset 속성

기본적으로 윤곽선은 테두리 가장자리 바로 바깥에서 그려진다. 그러나 윤곽선을 오프셋하여 테두리 가장자리 바깥쪽에 그리도록 할 수 있다.

outline-offset의 계산값이 0이 아닌 경우, 윤곽선은 그 값만큼 테두리 가장자리에서 바깥으로 이동된다.

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

음수 값은 윤곽선이 테두리 박스 안쪽으로 줄어들게 해야 한다. 윤곽선으로 그려진 도형의 바깥쪽 높이와 너비는 outline-width 속성의 계산값의 두 배보다 작아지지 않아야 하며, 이는 큰 음수 값에서도 윤곽선이 렌더링될 수 있도록 하기 위함이다. 사용자 에이전트는 이 제약을 각 차원에서 독립적으로 적용해야 한다. 윤곽선이 여러 개의 분리된 도형으로 그려지는 경우, 이 제약은 각 도형에 개별적으로 적용된다.

4. 크기 조정

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

4.1. 상자 크기 조정: resize 속성

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

none

UA는 요소에 크기 조정 메커니즘을 표시하지 않으며, 사용자는 요소 크기를 직접 조작할 수 없습니다.

both

UA는 양방향 크기 조정 메커니즘을 제공하여 사용자가 요소의 높이와 너비를 모두 조정할 수 있도록 합니다.

horizontal

UA는 수평 단방향 크기 조정 메커니즘을 제공하여 사용자가 요소의 너비만 조정할 수 있도록 합니다.

vertical

UA는 수직 단방향 크기 조정 메커니즘을 제공하여 사용자가 요소의 높이만 조정할 수 있도록 합니다.

block

UA는 단방향 블록 축 크기 조정 메커니즘을 제공하여 사용자가 요소의 블록 크기만 조정할 수 있도록 합니다.

inline

UA는 단방향 인라인 축 크기 조정 메커니즘을 제공하여 사용자가 요소의 인라인 크기만 조정할 수 있도록 합니다.

현재 요소의 스크롤 메커니즘(있는 경우)의 표시를 overflow 속성을 사용하여 제어할 수 있습니다. (예: overflow: scroll vs. overflow: hidden 등). resize 속성의 목적은 요소의 크기 조정 메커니즘(예: 크기 조정 상자 또는 위젯)의 표시와 기능을 제어할 수 있도록 하는 것입니다.

참고: 크기 조정 메커니즘은 스크롤 메커니즘과 동일하지 않으며, 확대/축소를 위한 UA 메커니즘과도 관련이 없습니다. 스크롤 메커니즘은 사용자가 요소 내용 중 표시할 부분을 결정할 수 있도록 합니다. 크기 조정 메커니즘은 사용자가 요소의 크기를 결정할 수 있도록 합니다.

resize 속성은 스크롤 컨테이너인 요소에 적용됩니다. UA는 또한 overflow 속성 값에 관계없이 다음 요소에도 적용할 수 있습니다:

• 이미지 또는 비디오를 나타내는 대체 요소, 예를 들어 img, video, picture, svg, object, 또는 canvas.
• iframe 요소.

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

참고: resize 속성은 향후 CSSPseudoElement 인터페이스가 구현되면 생성된 콘텐츠에도 적용될 수 있습니다.

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

요소가 한 방향으로만 크기 조정되는 경우, 해당 속성만 설정되고 두 속성을 모두 설정하지 않습니다.

크기 조정의 정확한 방향 (즉, 요소의 좌상단을 변경할지 또는 우하단을 변경할지)은 절대 위치, right 및 bottom 속성, 요소 언어 방향 등 다양한 CSS 레이아웃 요인에 따라 달라질 수 있습니다. UA는 사용자가 크기 조정 메커니즘을 인식하는 방법을 결정할 때 CSS 레이아웃에서 결정된 크기 조정 방향과 플랫폼 관례 및 제약을 고려해야 합니다.

사용자는 min-width, max-width, min-height, 및 max-height 속성으로 부과되는 제한 외에는 요소 크기를 자유롭게 조정할 수 있어야 합니다.

참고: 사용자 크기 조정 시도가 무시되거나 덮어써지는 상황이 발생할 수 있습니다. 예를 들어 !important 선언이 요소의 style 속성의 width 및 height 속성을 우선시하는 경우입니다.

resize 속성의 계산 값 변경은 사용자 크기 조정으로 인해 style 속성에 발생한 변경 사항을 초기화하지 않습니다.

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

5. 포인팅 장치와 키보드

5.1. 포인터 상호작용

5.1.1. 커서 스타일 지정: cursor 속성

이 속성은 커서의 핫스팟이 요소의 테두리 경계 내에 있을 때 표시할 커서 유형을 지정합니다.

참고: CSS Backgrounds 3 § 4.1 곡률 반경: border-radius 속성에 따라, 테두리 경계는 border-radius의 영향을 받습니다.

겹치는 요소가 있는 경우, 어느 요소가 커서 유형을 결정하는지는 히트 테스트(hit testing)에 따라 결정됩니다. 커서를 결정하는 요소는 해당 위치에서 클릭이 발생하면 클릭을 받을 요소입니다.

참고: 히트 테스트의 구체적인 사항은 이 사양의 범위에 포함되지 않습니다. 히트 테스트는 향후 CSS 또는 HTML 개정판에서 정의될 예정입니다.

사용자 에이전트는 스크롤바, 크기 조절기, 기타 네이티브 UI 위젯과 같은 기본 사용자 에이전트 컨트롤에서는 cursor 속성을 무시할 수 있습니다. 예를 들어 일부 사용자 에이전트 특정 폼 요소 구현에서 사용되는 경우입니다. 또한 사용자 에이전트는 cursor 속성을 무시하고 UA 사용자 인터페이스의 다양한 상태를 나타내기 위해 자체 커서를 표시할 수 있습니다. 예를 들어 페이지가 응답하지 않을 때는 작업 중 커서, 사용자가 텍스트 선택을 수행할 때는 텍스트 커서가 표시될 수 있습니다.

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

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

<cursor-image>

cursor 속성의 첫 번째(선택적) 구성 요소는 이미지 기반 커서 목록입니다. 사용자 에이전트가 목록의 첫 번째 커서를 처리할 수 없으면 두 번째 커서를 처리하도록 시도해야 합니다. 모든 작성자 정의 커서를 처리할 수 없는 경우, 목록의 마지막에 있는 키워드 기반 커서를 사용해야 합니다.

<cursor-image>의 구문은 다음과 같습니다:

<cursor-image> = [ <url> | <url-set> ] <number>{2}?

사용자 에이전트는 <url> 또는 <url-set>에서 커서를 가져옵니다. 준수하는 사용자 에이전트는 <url> 및 <url-set> 대신 <image>를 지원할 수 있으며, 이는 상위 집합입니다.

<url-set>는 image-set()의 제한된 버전이며, <image> 하위 생성은 <url>로만 제한됩니다.

UA는 다음 이미지 파일 형식을 지원해야 합니다:

• PNG, [PNG]에 정의된 대로
• SVG, [SVG11]에 정의된 대로, 보안 정적 모드에서 [SVG2], 자연 크기가 있는 경우
• 지원하는 기타 모든 비애니메이션 이미지 파일 형식, 다른 속성의 <image> 예: background-image 속성

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

• SVG, [SVG11]에 정의된 대로, 보안 애니메이션 모드 [SVG2], 자연 크기가 있는 경우
• 지원하는 기타 모든 애니메이션 이미지 파일 형식, 다른 속성의 <image> 예: background-image 속성

UA는 또한 추가 파일 형식을 지원할 수 있으며, SVG를 포함하여 [SVG11], 보안 정적 모드 또는 보안 애니메이션 모드에서 지원하며, 자연 크기가 없더라도 지원할 수 있습니다.

참고: CSS 작업 그룹은 처음에 모든 SVG(자연 크기 여부 상관없이)를 지원하려고 했습니다. 구현 부족으로 인해 자연 크기가 아닌 SVG 지원은 필수에서 선택 사항으로 하향 조정되었습니다.

참고: 몇 년 동안 일반 데스크톱 브라우저에서 커서를 위해 지원되는 파일 형식은 Microsoft에서 설계한 .ico 및 .cur 파일 형식뿐이었습니다. 현재는 PNG와 SVG가 널리 지원되지만, 기존 콘텐츠와의 호환성을 위해 UA는 이를 지원하는 것이 권장됩니다. 공개 사양이 없어 이러한 형식에 대한 규범적 요구사항을 만들 수는 없습니다. 관련 정보는 Wikipedia에서 확인할 수 있습니다.

커서 이미지의 기본 객체 크기는 UA 정의 크기로, UA 운영 체제에서 일반 커서 크기를 기준으로 해야 합니다.

실제 객체 크기는 기본 크기 지정 알고리즘을 사용하여 결정됩니다. 운영 체제가 특정 크기 이상의 커서를 렌더링할 수 없는 경우, 그보다 큰 커서는 OS가 지원하는 크기 범위 내로 축소되어야 하며, 커서 이미지의 자연 종횡비를 유지해야 합니다.

선택적 <number> 값 쌍은 이미지 내 포인터 위치(핫스팟)의 정확한 좌표(X, Y)를 이미지의 좌측/상단에서의 오프셋으로 지정합니다.

참고: 이 사양은 <image>의 다양한 유형의 좌표계가 어떻게 설정되는지는 정의하지 않으며, 이러한 정의는 [CSS4-IMAGES]에 위임됩니다.

값이 생략되면 이미지 리소스 자체에 정의된 자연 핫스팟이 사용됩니다. 자연 핫스팟이 없는 경우 이미지의 좌측 상단 코너가 사용되며, 0 0이 제공된 것과 동일하게 처리됩니다.

핫스팟의 X 또는 Y 좌표가 커서 이미지 범위를 벗어나는 경우(명시적 지정 여부와 관계없이), 커서는 이미지 범위에 맞게 독립적으로 클램프(clamp)되어야 합니다.

<cursor-predefined>

필수 <cursor-predefined> 키워드는 미리 정의된 커서를 사용하거나, <url>이 제공되었지만 모두 사용할 수 없는 경우 사용할 대체 커서를 지정합니다.

전체 § 5.1.1.1 미리 정의된 커서 섹션에서 <cursor-predefined> 키워드와 그 의미를 확인할 수 있습니다.

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

5.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> 키워드의 의미와 일반적인 렌더링 방식은 다음과 같습니다:

일반 용도 커서

auto

UA가 현재 컨텍스트를 기반으로 표시할 커서를 결정합니다: auto는 선택 가능한 텍스트나 편집 가능한 요소 위에서는 text처럼 동작하며, 그렇지 않은 경우 default처럼 동작합니다.

default

플랫폼 의존적 기본 커서입니다. 일반적으로 화살표로 렌더링됩니다.

none

해당 요소에 커서를 렌더링하지 않습니다.

링크 및 상태 커서

context-menu

커서 아래 객체에 컨텍스트 메뉴가 존재합니다. 일반적으로 화살표 옆에 작은 메뉴 그래픽이 표시됩니다.

help

커서 아래 객체에 대한 도움말이 제공됩니다. 일반적으로 물음표나 말풍선으로 렌더링됩니다.

pointer

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

progress

진행 표시기입니다. 프로그램이 일부 처리를 수행 중이지만 wait와 달리 사용자가 프로그램과 상호작용할 수 있습니다. 일반적으로 회전하는 비치볼 또는 화살표와 시계/모래시계로 렌더링됩니다.

wait

프로그램이 바쁘며 사용자가 기다려야 함을 나타냅니다. 일반적으로 시계나 모래시계로 렌더링됩니다.

선택 커서

cell

셀이나 셀 집합을 선택할 수 있음을 나타냅니다. 일반적으로 중앙에 점이 있는 두꺼운 플러스 기호로 렌더링됩니다.

crosshair

단순 십자선입니다(예: "+" 모양의 짧은 선). 2차원 비트맵 선택 모드를 나타낼 때 자주 사용됩니다.

text

선택 가능한 텍스트를 나타냅니다. 일반적으로 수직 I-빔으로 렌더링됩니다. 사용자 에이전트는 수직 텍스트에는 vertical-text와 동일한 수평 I-빔/커서를 자동으로 표시할 수 있으며, 임의 각도로 렌더링된 텍스트에도 적용될 수 있습니다.

vertical-text

선택 가능한 수직 텍스트를 나타냅니다. 일반적으로 수평 I-빔으로 렌더링됩니다.

드래그 앤 드롭 커서

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 각각에 해당합니다.

5.1.1.2. 캔버스의 커서

문서 캔버스는 문서가 렌더링되는 무한 표면입니다 [CSS21]. 캔버스에 해당하는 요소가 없으므로, 요소 위에 있지 않을 때 커서를 스타일링할 수 있도록 캔버스 커서는 루트 요소의 커서를 재사용합니다. 하지만 루트 요소에 박스가 생성되지 않으면 (예: 루트 요소가 display: none인 경우), 캔버스 커서는 플랫폼 의존적 기본 커서가 됩니다.

참고: 요소가 보이지 않더라도 박스를 생성할 수 있습니다. 예를 들어, 요소가 visibility: hidden이고 display: none이 아닌 경우, 해당 요소와 그 박스에 대한 커서가 캔버스에 사용됩니다.

5.2. 삽입 캐럿

삽입 캐럿(또는 간단히 "캐럿")은 텍스트 입력을 허용하는 요소에서 사용자가 텍스트(및 잠재적으로 다른 콘텐츠)를 삽입할 수 있는 위치를 시각적으로 표시하는 지표입니다. caret-color, caret-animation, 및 caret-shape 속성은 작성자가 캐럿의 모양을 어느 정도 제어할 수 있게 해줍니다.

텍스트 또는 요소는 텍스트 입력을 허용하는 것으로 간주되며, 이는 편집 가능한 요소이거나 그 하위 요소일 경우를 말하며, 사용 값이 user-select이 none인 경우는 제외됩니다. 또한 contentEditable 속성이 false로 설정된 HTML 요소를 루트로 하는 하위 트리도 제외됩니다.

일부 사용자 에이전트는 유사한 외관을 가진 다른 사용자 인터페이스 메커니즘을 제공하며, 가끔 "캐럿"이라고도 불립니다. 예를 들어 일부 UA는 "네비게이션 캐럿"을 표시할 수 있으며, 이는 삽입 캐럿과 유사하게 동작하지만 편집 불가 텍스트에서도 이동할 수 있습니다. caret-color, caret-animation, 및 caret-shape 속성은 이러한 메커니즘이나 편집 가능한 요소 외부에는 적용되지 않지만, UA는 이를 고려할 수도 있습니다. 적용 여부와 정도는 사용자 에이전트에 따라 다릅니다.

Note: 텍스트 위에 마우스를 올렸을 때 표시되는 커서 이미지가 cursor 속성이 auto이거나, 요소 위에 마우스를 올렸을 때 cursor 속성이 text 또는 vertical-text인 경우, 비록 때때로 캐럿과 유사하게 보이지만 실제로는 캐럿이 아니며(커서임).

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

이 속성은 삽입 캐럿의 색상을 제어합니다.

auto

사용자 에이전트는 currentColor를 사용해야 합니다. 사용자 에이전트는 캐럿의 색상을 주변 콘텐츠와의 대비와 가독성을 위해 자동으로 조정할 수 있으며, currentColor, 배경, 그림자 등을 기준으로 할 수 있습니다.

Note: caret-shape이 block일 경우, 최적의 가시성과 대비를 위해서는 UA가 결정한 currentColor가 아닌 다른 색상을 사용하는 것이 좋습니다.

<color>

지정된 색상으로 캐럿을 색칠합니다.

5.2.2. 삽입 캐럿 애니메이션: caret-animation

대부분의 플랫폼과 UA에서 삽입 캐럿은 깜박입니다. 이 속성은 작성자가 캐럿 애니메이션 방식을 제어할 수 있게 해줍니다.

auto

UA는 캐럿을 어떻게 애니메이션할지(또는 하지 않을지), 그리고 애니메이션 속도를 결정합니다. 플랫폼 관습과 설정에 맞춰야 하며, 상황에 따라 조정될 수 있습니다.

Note: 일반적으로 깜박이는 캐럿으로 표시됩니다. 깜박임 대신 서서히 나타났다 사라지는 효과는 일부 환경에서 나타나는 변형입니다.

manual

UA는 캐럿을 애니메이션하지 않아야 합니다.

Note: 이는 UA 기반 캐럿 애니메이션에만 해당합니다. CSS 애니메이션으로 캐럿 색상을 애니메이션하는 경우에는 정상 적용됩니다.

Note: 작성자는 사용자 스타일시트에서 캐럿이 깜박이거나 사라졌다 나타나는 것을 방지하기 위해 caret-animation: manual을 사용하는 것이 권장됩니다. 이는 UA 애니메이션과 CSS 애니메이션이 충돌하는 것을 방지합니다.

Note: Guideline 2.3: 발작: 발작을 유발할 수 있는 콘텐츠 디자인 금지 [WCAG20]를 참조하세요.

/* 캐럿 깜박임/번쩍임 방지 */
:read-write { caret-animation: manual !important; }

/* 캐럿 색상 변경 방지, 애니메이션 포함 */
:read-write { caret-color: auto !important; }

편집 가능한 사용자 스타일시트가 없는 UA는 깜박임, 번쩍임, 그리고 애니메이션된 캐럿을 비활성화하는 설정을 제공해야 합니다. 편집 가능한 사용자 스타일시트가 있는 UA도 이러한 설정을 제공할 수 있습니다. 자세한 내용은 [WCAG] Guideline 2.2 및 Guideline 2.3를 참조하세요.

textarea {
  caret-animation: manual;
  caret-color: blue;
  animation: caret-alternate 2s step-end infinite;
}
@keyframes caret-alternate {
  50% { caret-color: red; }
}

5.2.3. 삽입 캐럿 모양: caret-shape

이 속성은 작성자가 삽입 캐럿의 원하는 모양을 지정할 수 있게 합니다.

이 정의에서 문자는 확장된 그래프 클러스터(extended grapheme cluster)로 이해해야 하며, [UAX29]에서 정의된 바와 같고, 가시 문자는 advance measure가 0이 아닌 문자를 의미합니다.

auto

UA는 캐럿의 모양을 결정합니다. 플랫폼 관습에 맞춰야 하며, 상황에 따라 조정될 수 있습니다. 예를 들어 UA가 사용자가 키보드의 insert 키를 누를 때 insert 모드와 overtype 모드를 전환하면, insert 모드에서는 bar 캐럿을, overtype 모드에서는 block 캐럿을 표시할 수 있습니다.

bar

UA는 삽입 캐럿을 삽입 지점에 위치한 얇은 막대로 렌더링해야 합니다. 이는 문자 위가 아니라 사이, 앞, 또는 뒤에 위치함을 의미합니다. inline 진행 방향에 수직이어야 하지만, UA는 이탤릭 또는 사선 텍스트 삽입 시 기울여서 표시할 수 있습니다.

block

UA는 삽입 캐럿을 삽입 지점 다음 가시 문자를 겹치는 사각형으로 렌더링해야 합니다. 삽입 지점 이후 가시 문자가 없으면, 마지막 가시 문자 뒤에 캐럿을 렌더링해야 합니다. UA는 이탤릭 또는 사선 텍스트 삽입 시 기울어진 사각형으로 표시할 수 있습니다.

underscore

UA는 삽입 캐럿을 삽입 지점 다음 문자 아래에 얇은 선으로 렌더링해야 합니다. 삽입 지점 이후 가시 문자가 없으면, 마지막 가시 문자 뒤에 캐럿을 렌더링해야 합니다.

block과 underscore 캐럿의 너비는 삽입 지점 이후 다음 가시 문자의 advance measure이거나, 다음 가시 문자가 없거나 측정이 어렵다면 1ch이어야 합니다.

캐럿의 방향과 모양을 결정할 때, UA는 writing mode를 고려하고 변형(transform)을 적용해야 합니다. 편집된 텍스트가 SVG textPath 등 경로 위에 배치된 경우에도 반영해야 합니다.

bar와 underscore 캐럿 및 auto 캐럿과 유사한 렌더링의 두께는 UA가 결정합니다. 가능하다면, 변형(transform) 등으로 축소되더라도 캐럿이 가시성을 유지하도록 적절한 두께를 선택해야 합니다.

줄 끝에 캐럿을 표시할 충분한 공간이 없을 경우, UA는 표시를 위해 스크롤 가능한 오버플로 영역을 넘어 그릴 수 있으며, 필요에 따라 제한 및 클리핑할 수 있습니다. UA는 캐럿이 보이지 않을 경우 스크롤포트 안에서 시각적으로 재배치할 수 있습니다.

캐럿의 쌓임 위치(stacking position)는 다음 제약 내에서 정의되지 않습니다:

• 캐럿은 요소의 배경에 의해 가려져서는 안 됩니다.
• UA는 block 캐럿을 렌더링할 때, 겹치는 문자가 캐럿에 의해 가려지지 않도록 해야 합니다.

.console { 
  caret-shape: underscore; 
  background: black; 
  color: white; 
  font-family: monospace; 
  padding: 1ex; 
} 

user@host:css-ui-4 $ ls -a
. .. Overview.bs Overview.html
user@host:css-ui-4 $  

user@host:css-ui-4 $ ls -a
. .. Overview.bs Overview.html
user@host:css-ui-4 $ 

5.2.4. 삽입 캐럿 단축 속성: caret

이 속성은 caret-color, caret-animation, caret-shape을 한 선언으로 설정하는 단축 속성입니다. 생략된 값은 초기값으로 설정됩니다.

#old-screen { 
  caret: block manual; 
  animation: old-caret 2s infinite; 
  /*화면 스타일링은 간략화됨 */ 
} 
@keyframes old-caret { 
  from, 50% { caret-color: green; } 
  75%, to { caret-color: transparent; } 
} 

5.3. 키보드 제어

5.3.1. 방향 포커스 내비게이션: nav-up, nav-right, nav-down, nav-left 속성

auto

사용자 에이전트가 방향 내비게이션 입력에 따라 포커스를 이동할 요소를 자동으로 결정합니다.

<id>

<id> 값은 ID 선택자 [SELECT]입니다. 해당 속성에 해당하는 방향 내비게이션 입력이 발생하면, 포커스는 선택자와 일치하는 트리 순서 상 첫 번째 요소로 이동합니다.

만약 현재 포커스된 요소를 참조한다면, 해당 nav- 속성에 대한 방향 내비게이션 입력은 무시됩니다 — 같은 요소에 다시 포커스를 맞출 필요가 없습니다.

선택자와 일치하는 요소가 없으면, 사용자 에이전트가 포커스를 이동할 요소를 자동으로 결정합니다.

포커스가 원래 포커스 가능한 요소가 아닌 곳으로 이동하면, 해당 요소는 이 방향 내비게이션 결과로만 포커스 가능해지며, :focus 의사 클래스가 적용됩니다.

Note: "원래 포커스 가능하지 않은" 요소에 대해 다른 옵션도 고려되었으며, 문서 트리에서 다음 포커스 가능한 요소로 이동(해당 요소의 자손 포함)하는 방식이 있었습니다. 구현 경험 및 작성자 경험을 통한 의견을 환영합니다.

<target-name>

<target-name> 매개변수는 포커스 내비게이션 대상 프레임을 지정합니다. 이는 <string>이며 "_" 문자로 시작해서는 안 됩니다. 오류 처리: "_"로 시작하면, "_parent"는 부모 프레임으로 이동, "_root"는 root로 처리되며, 다른 값은 해당 이름의 프레임이 존재하면 이동합니다. 지정한 대상 프레임이 없으면 current로 처리되어 현재 요소가 있는 프레임을 사용합니다. root 키워드는 전체 창을 대상으로 지정함을 의미합니다.

방향 내비게이션 키가 있는 장치용 사용자 에이전트는 nav-* 방향 속성(nav-up, nav-right, nav-down, nav-left)에 따라 포커스를 이동합니다. 이 명세서는 방향 내비게이션 키가 어떤 키인지는 정의하지 않습니다.

Note: 일반적인 PC에는 4개의 화살표 키가 있습니다. 구현 예시는 이 화살표 키 4개를 방향 내비게이션에 사용하는 것입니다. 접근성과 사용자 편의를 위해, 사용자 에이전트는 방향 내비게이션에 사용할 키를 구성할 수 있어야 합니다.

button { position:absolute }

button#b1 { 
  top:0; left:50%; 
  nav-right:#b2; nav-left:#b4; 
  nav-down:#b2; nav-up:#b4; 
}

button#b2 { 
  top:50%; left:100%; 
  nav-right:#b3; nav-left:#b1; 
  nav-down:#b3; nav-up:#b1; 
}

button#b3 { 
  top:100%; left:50%; 
  nav-right:#b4; nav-left:#b2; 
  nav-down:#b4; nav-up:#b2; 
}

button#b4 { 
  top:50%; left:0; 
  nav-right:#b1; nav-left:#b3; 
  nav-down:#b1; nav-up:#b3; 
}

button#foo { nav-left: #bar "sidebar"; }

5.3.2. 구식: ime-mode 속성

ime-mode는 일부 브라우저에서 구현된 문제 있는 속성으로, 본 명세서와 이전 명세서 [CSS-UI-3]에서 공식적으로 폐기되었습니다.

사용자 에이전트는 ime-mode 속성을 지원하지 않아야 합니다.

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

사용자는 기존 사이트와 레거시 구현 문제를 우회해야 하는 경우에만 ime-mode 속성을 사용할 수 있습니다. 예를 들어 사용자 스타일시트 규칙:

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

이 예제 CSS는 사용자 스타일시트 파일에 배치하여 비밀번호 입력 필드를 기본 동작으로 강제할 수 있습니다.

본 명세서는 레거시 ime-mode 구현의 기능이나 구체적인 지원 사항을 문서화하지 않으며, 이를 추적하거나 권장하지 않습니다.

6. 사용자 상호작용

6.1. 콘텐츠 선택 제어

user-select 속성은 문서 내 어떤 요소를 사용자가 선택할 수 있는지, 그리고 어떻게 선택할 수 있는지를 지정할 수 있게 합니다. 이를 통해 모든 요소가 선택에 유용하지 않을 때도 상호작용을 쉽게 하고, 인접한 콘텐츠의 실수 선택을 방지할 수 있습니다.

사용자 에이전트는 user-select 속성을 ::first-line 및 ::first-letter 의사 요소에 적용해서는 안 됩니다.

참고: UA는 ::before 및 ::after 의사 요소에 이 속성을 적용할 수 있습니다. 이 경우 auto 값은 이러한 의사 요소에서 사용 값이 none에 매핑되지만, 다른 값도 지정할 수 있습니다. 이는 생성된 콘텐츠가 선택 불가능하거나 복사 불가능한 이전 동작을 보존하며, 이러한 의사 요소가 장식용으로 사용될 때 적절합니다. 그러나 이 속성은 사용자가 기대하는 대로 콘텐츠의 일부를 생성하는 경우 선택 가능하고 복사 가능하게 만들 수 있습니다. 가능한 한, 작성자는 비장식용으로 생성된 콘텐츠 사용을 피하고, 모든 콘텐츠를 DOM에 포함시키는 것이 좋습니다. 이 기능은 위험에 처해 있습니다.

user-select를 none 이외의 값으로 변경할 수 있게 허용한다면, 이것이 복사 가능성과 DOM API에 어떤 의미를 갖는지 결정해야 합니다.

이 메커니즘을 통해 의사 요소에서 생성된 콘텐츠가 선택 가능하게 되면, UA는 이 콘텐츠가 검색 기능을 통해서도 찾아질 수 있도록 해야 합니다.

이것을 ::marker에도 적용해야 할까요? 페이지 여백 상자에도? 사용 값으로 auto를 none으로 매핑해야 할까요, 아니면 text가 더 적절할까요?

사용 값은 계산 값과 동일하며, 다음의 경우를 제외합니다:

1. 편집 가능한 요소에서는 사용 값이 항상 contain입니다. 이는 계산 값와 관계없이 적용됩니다.
2. 계산 값이 auto인 경우, 사용 값은 아래에 정의된 다른 값 중 하나입니다.

이 명세에서 편집 가능한 요소는 편집 호스트 또는 텍스트 콘텐츠를 가진 변경 가능한 폼 컨트롤이며, 예를 들어 textarea가 있습니다.

편집 호스트의 하위 요소인 편집 가능한 요소에서 사용 값에 대한 제약을 두어야 할까요? 의미가 명확하지 않습니다. 어쩌면 none은 text로 매핑해야 할 수도 있고, 모든 값이 text로 매핑될 수도 있습니다.

auto

사용 값 auto는 다음과 같이 결정됩니다:

• ::before 및 ::after 의사 요소에서는 사용 값이 none입니다.
• 요소가 편집 가능한 요소라면, 사용 값은 contain입니다.
• 그렇지 않은 경우, 이 요소의 부모에 대한 사용 값이 all이면, 사용 값은 all입니다.
• 그렇지 않은 경우, 부모에 대한 사용 값이 none이면, 사용 값은 none입니다.
• 그렇지 않으면, 사용 값은 text입니다.

참고: 상속되지 않는 속성에 초기값이 auto이며, 사용 값이 부모 요소에 따라 달라지는 이 특이한 조합은 사실상 선택적 상속을 구현할 수 있게 합니다. 이는 Microsoft가 IE에서 상속과 유사한 동작을 도입하기 위해 처음 제안한 것입니다. 단, contain 값은 상속되지 않습니다.

text

요소는 선택에 대한 제한을 두지 않습니다.

none

UA는 이 요소에서 선택을 시작할 수 없게 해야 합니다.

이 요소 외부에서 시작된 선택은 이 요소 내에서 끝나지 않아야 합니다. 사용자가 이러한 선택을 시도하면, UA는 대신 요소 경계에서 선택 범위를 종료해야 합니다.

참고: 현재 시점에서 실험적 구현들은 모두 동일하게 동작하지 않습니다. Firefox는 명세대로 동작합니다. Chrome과 Safari는 거의 유사하게 동작하며: 요소 뒤에서 선택을 시작해 역방향으로 들어갈 때는 명세대로 동작하지만, 요소 앞에서 시작해 들어갈 경우, 요소를 전체 선택한 것처럼 동작합니다. IE는 요소 외부에서 시작된 선택이 요소로 들어가는 것을 제한하지 않습니다. 또한 Chrome과 Safari에서 사용자가 user-select: none인 요소 안에서 선택을 시작해 요소 밖으로 끝내려는 경우, 요소 경계부터 지정한 종료점까지 선택이 생성됩니다. Firefox와 IE는 명세대로 선택을 생성하지 않습니다.

그러나 이 요소에 사용 값이 none이 아닌 하위 요소가 있는 경우, 이 하위 요소 내에서 시작하고 끝나는 선택은 허용됩니다.

UA는 선택이 이 요소를 가로질러 확장될 수 있도록 허용해야 하며, 이 요소는 선택에서 제외해야 합니다. 단, 단일 선택 범위만 지원하는 UA는 예외로, 요소를 포함할 수 있습니다. 또한 하위 요소의 사용 값이 none이 아닌 경우, 이러한 하위 요소는 선택에 포함되어야 합니다. 이 명세는 클립보드 동작에 대해 규범적 요구를 하지 않습니다. 그러나 UA는 시각적 선택과 클립보드 복사 내용이 일치하도록 권장됩니다. 선택되지 않은 텍스트를 복사하거나 그 반대는 사용자에게 혼란을 줍니다.

user-select가 none인 요소에서 선택을 시작하려는 시도, 예를 들어 클릭하거나 드래그를 시작하는 경우, 기존 선택이 취소되거나 영향을 받아서는 안 됩니다.

user-select는 UI 편의 기능이지 복사 방지 기능이 아니므로, UA는 사용자가 명시적으로 텍스트를 선택할 수 있는 다른 방법을 제공할 수 있습니다.

참고: none은 복사 방지 기능이 아니며, 이를 복사 방지로 사용하면 효과가 없습니다. UA는 우회 방법을 제공할 수 있고, 지원하지 않는 구형 UA에서는 적용되지 않으며, 사용자는 UA에서 사용자 스타일 시트 등을 통해 이를 비활성화할 수 있습니다. 대신 none은 사용자가 필요한 콘텐츠를 쉽게 선택하도록 돕기 위한 것으로, 선택할 필요 없는 UI 요소의 선택을 비활성화하는 것이 목적입니다. CSS 검증기, 린터, 브라우저 개발자 도구 등은 사용성 저해 또는 사용자 기대 위반과 같은 잘못되거나 남용된 사용 사례를 감지하고 경고하도록 권장됩니다.

작성자는 사용자를 불필요하게 제한하지 않도록 주의해야 합니다. 예를 들어 root 요소에 user-select: none을 설정하고, 일부 선택 가능한 요소만 허용하면 사용자가 불편할 수 있습니다:

• 빈 영역을 클릭하여 현재 선택을 해제하는 기능이 작동하지 않을 수 있음
• 선택 가능해야 할 영역을 작성자가 놓칠 수 있음
• 페이지에 새로운 영역이 추가될 때 선택 가능하게 만들지 못할 수 있음
• 사용자가 본문 외 다른 텍스트를 선택하고 싶을 수 있음 (예: 사전, 번역 도구, 경고/오류 메시지 검색 등)

좋은 방법은 작성자가 선택할 가능성이 낮고, 우발적 선택 시 문제를 일으킬 수 있는 요소에 user-select: none을 선택적으로 적용하는 것입니다. 선택 가능하지 않은 부분을 실수로 선택하지 않도록 하는 것이 사용자 불편을 최소화합니다.

contain

UA는 이 요소에서 시작된 선택이 외부로 확장되지 않도록 해야 합니다.

이 요소 외부에서 시작된 선택은 이 요소 내에서 끝나지 않아야 합니다. 사용자가 이러한 선택을 시도하면, UA는 요소 경계에서 선택 범위를 종료해야 합니다.

UA는 선택이 이 요소를 가로질러 확장될 수 있도록 허용해야 하며, 이 선택에는 요소의 내용이 포함되어야 합니다.

참고: 현재 시점에서 실험적 구현들은 요소 안팎에서 선택이 시작될 때 서로 다르게 동작합니다. contain을 명시적으로 지원하지 않는 브라우저에서도 textarea 또는 contenteditable 요소에서 선택을 시도하면 확인할 수 있습니다.

참고: 이는 IE에서 실험적 기능으로 user-select: element라는 이름으로 처음 도입되었습니다.

all

요소의 콘텐츠는 원자적으로 선택되어야 합니다: 선택이 요소의 일부만 포함한다면, 선택은 모든 하위 요소를 포함하여 전체 요소를 포함해야 합니다. 요소가 선택되고, 부모의 사용 값이 all이면, 부모 요소도 재귀적으로 선택에 포함되어야 합니다.

이 요소에 사용 값이 all이 아닌 하위 요소가 있고, 선택이 이 하위 요소에 완전히 포함되어 있다면, 선택은 이 전체 요소로 확장되지 않습니다.

참고: 선택은 텍스트뿐만 아니라 이미지, 테이블, 비디오 등에도 확장될 수 있습니다. 이러한 선택을 복사하고 붙여넣는 동작은 이 명세의 범위 밖입니다.

HTML을 위한 UA 스타일시트에는 다음과 같은 추가 사항이 적용됩니다:

button, meter, progress, select { user-select: none; }

위 목록은 불완전하며, 최소한 input의 다양한 버튼형 변형도 포함해야 합니다.

레거시 콘텐츠와의 호환성을 위해, user-select를 지원하는 UA는 -webkit-user-select도 별칭으로 지원해야 합니다.

참고: 별칭 메커니즘의 세부 사항은 UA에 맡겨집니다. -webkit-user-select를 user-select의 단축 속성으로 만드는 방법은 효과적인 접근 방식으로 알려져 있으며, 새로운 구현자는 이를 고려해야 합니다. 그러나 다른 방식으로 -webkit-user-select를 user-select의 별칭으로 지원하는 UA도 존재하며, 호환성에 부정적 영향을 주지 않으므로, 이 명세는 유연성을 허용합니다.

6.2. 히트 테스트 제외: pointer-events 속성

이 속성은 히트 테스트의 일반 동작을 변경하지만, 현재 일반 히트 테스트는 명세되지 않았습니다. 이 문제의 겉보기 명확한 부분은 광범위한 상호운용성이 있지만, 수많은 세부 사항과 모서리 사례가 있어 상세한 명세가 큰 도움이 될 수 있습니다. CSS-WG는 이러한 명세 작성에 대한 도움을 매우 환영합니다.

pointer-events 속성은 요소의 박스가 포인터 이벤트의 대상이 될 수 있는지를 정의합니다. 값의 의미는 다음과 같습니다:

auto

히트 테스트가 정상적으로 수행됩니다.

none

히트 테스트는 요소가 생성한 박스가 존재하지 않는 것처럼 동작하며, pointer-events: none 요소 뒤의 요소가 히트 테스트 이벤트의 대상이 됩니다.

위 설명은 조건이 필요합니다; 특정 상황에서는 히트 테스트가 여전히 요소를 고려할 수 있습니다. 예를 들어, 텍스트 선택을 시작하기 위해 클릭 및 드래그하는 경우에는 정상적으로 동작합니다. pointer-events에 의해 영향을 받는 정확한 대상 범위는 무엇인가요?

pointer-events: none은 순차적 포커스 탐색을 방해하지 않습니다.

참고: 이 pointer-events: none는 요소 자체만 히트 테스트에서 제외하며, 하위 트리 전체를 제외하지는 않습니다. 이 속성은 상속을 통해 하위 요소로 전파되지만, pointer-events: auto를 pointer-events: none 요소의 하위 요소에 지정할 수 있으며, 해당 요소는 히트 테스트에 정상적으로 참여합니다.

참고: pointer-events: auto 하위 요소를 대상으로 하는 이벤트는 pointer-events: none 조상 요소의 이벤트 핸들러에서도 버블링 또는 캡처링 단계 동안 여전히 잡힐 수 있습니다 (참조: DOM § 2 Events).

참고: SVG 2 § 15.6 ‘pointer-events’ 속성은 SVG 요소에 대한 변형을 정의하며, 더 많은 값이 존재합니다. SVG 외부에서 이러한 값의 효과는 현재 정의되어 있지 않습니다.

6.3. 모든 상호작용 방지: interactivity 속성

interactivity 속성은 요소와 그 flat tree 하위 요소들 (텍스트 노드 포함) 이 inert 상태인지 여부를 지정합니다.

auto

요소의 inert 상태는 호스트 언어에 의해 결정됩니다. (보통은 요소가 inert가 아님을 의미합니다.)

inert

요소는 inert 상태입니다.

참고: 이 속성은 작성자가 요소를 inert 상태로 강제할 수 있도록 하지만, 요소를 *비-inert* 상태로 만드는 것은 허용하지 않고, inert 상태 결정은 호스트 언어에 맡깁니다. 예를 들어, HTML에서 모달 대화 상자가 표시되는 동안, 페이지의 나머지 부분은 자동으로 inert 상태가 되며, 이 속성의 값과 관계없이 적용됩니다. 일반적으로 호스트 언어는 CSS가 쉽게 접근할 수 없는 문서 정보를 활용하여 사용자에게 가장 적절한 inert 동작을 결정할 수 있습니다.

참고: Inert 노드는 일반적으로 포커스를 받을 수 없으며, 사용자 에이전트는 inert 노드를 접근성 API 또는 보조 기술에 노출하지 않습니다. inert 하위 트리는 페이지의 중요한 컨텐츠나 제어 요소를 포함해서는 안 됩니다. inert 하위 트리의 컨텐츠는 모든 사용자가 인지할 수 없거나 상호작용할 수 없습니다. 작성자는 시각적으로도 가려진 컨텐츠가 아닌 한 요소를 inert로 지정하지 않아야 합니다. 대부분의 경우, 개별 폼 컨트롤에 inert 속성을 지정하는 것은 권장되지 않습니다. 이 경우 disabled 속성이 더 적절할 수 있습니다.

[inert] {
  interactivity: inert;
}
dialog:modal {
  interactivity: auto;
}

6.4. 사용자 관심 지연: interest-delay-* 속성

일부 호스트 언어 기능은 사용자가 요소에 "관심을 보일" 때 활성화될 수 있습니다. 정확히 무엇을 의미하는지는 호스트 언어와 사용자 에이전트에 따라 달라집니다. (예: HTML interestfor 속성) 그러나 이러한 기능의 공통된 특성은 "관심"이 즉시 얻어지거나 사라지지 않아야 한다는 것입니다.

예를 들어, 요소 위로 커서를 올려 "관심"을 표시할 수 있다면, 페이지 위에서 커서를 이동하면서 요소를 잠깐 지나가는 것만으로는 (기본적으로) "관심"이 표시되어서는 안 됩니다. 그렇지 않으면 사용자가 관련 없는 작업을 수행하는 동안 UI가 혼란스럽게 나타났다 사라질 수 있습니다.

마찬가지로, 관심이 한 번 표시되면 기본적으로 즉시 사라져서는 안 됩니다. 예를 들어, 사용자가 링크 위에 커서를 올려 "관심"을 표시하면, 자식 팝업 목록이 링크 옆에 나타나고, 링크에서 팝업으로 커서를 이동할 때, 잠시 링크와 목록을 벗어나더라도 목록이 "관심을 잃고" 팝업이 닫히는 일이 없어야 합니다.

interest-delay 단축 속성과, interest-delay-start 및 interest-delay-end 개별 속성은, 특정 요소에서 이러한 기능의 관심 시작 지연 및 관심 종료 지연을 제어할 수 있습니다. 가능한 값은 다음과 같습니다:

normal

관심 시작 지연 및/또는 관심 종료 지연은 사용자 에이전트가 정의합니다. 플랫폼 관습에 맞춰 선택할 수 있습니다.

이 지연은 0이 되어서는 안 됩니다. 서로 다를 수 있으며, 사용자가 관심을 표시하는 방식에 따라 달라질 수 있습니다. (예: "hover"와 "long press"는 관심 표시 지연이 다를 수 있음)

<time>

관심 시작 지연 및/또는 관심 종료 지연을 지정된 시간으로 설정합니다.

interest-delay 단축 속성은 interest-delay-start를 첫 번째 값으로 설정하고, interest-delay-end을 두 번째 값으로 설정합니다 (값이 하나뿐인 경우 첫 번째 값으로 설정).

참고: 향후 이러한 속성의 문법은 확장되어, 기능과 사용자가 관심을 표시하는 방식에 따라 지연을 사용자 정의할 수 있게 될 수 있습니다. (예: hover와 long-press에 대해 다른 지연 제공)

7. 위젯 스타일링

7.1. 위젯 강조 색상: accent-color 속성

플랫폼 상의 사용자 인터페이스 컨트롤은 일반적으로 단일한 통합 시각 스타일 하에 설계됩니다. 많은 플랫폼에서(모든 플랫폼은 아니지만), 시각 스타일은 일반적으로 강조 색상을 포함합니다. 강조 색상은 일반적으로 밝은 색상으로, 보다 실용적인 배경 및 전경 색상과 뚜렷한 대비를 이룹니다. 모든 컨트롤이 모든 상태에서 강조 색상을 사용하는 것은 아니지만, 여전히 컨트롤 색상 구성의 핵심 요소입니다.

accent-color CSS 속성은 요소가 생성하는 사용자 인터페이스 컨트롤에 대한 강조 색상을 지정할 수 있게 합니다. 값의 의미는 다음과 같습니다:

auto

사용자 에이전트가 선택한 색상을 나타내며, 가능한 경우 플랫폼의 강조 색상과 일치해야 합니다.

<color>

컨트롤에 사용할 강조 색상을 지정합니다.

사용자 에이전트는 지정된 accent-color를 사용하여 요소 컨트롤의 해당 부분을 렌더링해야 합니다. 사용자 에이전트는 컨트롤의 가독성을 위해 대비를 유지해야 하며, 이를 위해 색상의 명도나 밝기를 조정하거나 컨트롤의 다른 부분에서 색상을 대체할 수 있습니다 (예: 오버레이된 글리프를 color 대신 background-color 사용). 또한 강조 색상 사용과 관련하여 플랫폼 관습에 맞게 그라데이션 등의 색상 변형을 생성할 수 있습니다.

라디오 버튼은 일반적으로 원으로 구성되며, 체크 상태를 나타내는 "점"이 겹쳐질 수 있습니다. 특정 시각 스타일은 체크 상태에 강조 색상을 사용합니다: 일부는 원의 배경에 사용하고, 일부는 전경에 사용합니다.

두 경우 모두 accent-color 속성이 컨트롤의 영향을 받는 부분을 스타일링합니다. 라디오 버튼에 강조 색상을 사용하지 않는 시각 스타일에서는 accent-color가 아무 효과도 없습니다.

다음은 모두 파란색 accent-color로 준수하게 렌더링된 라디오 버튼 예제입니다:

플랫폼	샘플	설명
Firefox 79 / Win		강조 색상 미사용.
Chrome 81 / Win		강조 색상 미사용.
Safari / Snow Leopard		체크 상태 “배경” 그라데이션 생성에 강조 색상 사용.
Safari 13 / Mac / Light		체크 상태 “전경”에 강조 색상 사용.
Safari 13 / Mac / Dark		체크 상태 “전경”에 강조 색상 사용.
Chrome 83 / Win / Light		체크 상태 “전경”에 강조 색상 사용.
Chrome 83 / Win / Dark		체크 상태 “전경”에 강조 색상 사용, 다크 모드 대비 조정.

지정된 색상이 부분적 또는 완전히 투명한 경우, 사용자 에이전트는 먼저 이를 Canvas 시스템 색상 위에 합성한 후, 결과 (불투명) 색상을 강조 색상으로 사용해야 합니다.

참고: 사용자 설정에 따라 달라질 수 있지만, Canvas는 일반적으로 라이트 색상 모드에서 흰색, 다크 색상 모드에서 검은색입니다.

7.2. 외관 전환: appearance 속성

문서의 대부분 요소의 모양은 CSS로 완전히 제어할 수 있지만, 위젯은 일반적으로 UA가 호스트 운영 체제의 네이티브 UI 컨트롤을 사용하여 렌더링하며, 이는 CSS로 복제하거나 스타일링할 수 없습니다.

이 명세에서 위젯이라는 용어는 대체 요소(replaced element)를 나타내며, 네이티브 외형(native appearance)을 가질 수 있습니다. 즉, 호스트 운영 체제나 플랫폼의 유사한 네이티브 위젯 또는 컨트롤처럼 렌더링되거나, CSS로 표현할 수 없는 모양과 느낌을 가질 수 있습니다. 어떤 요소가 네이티브 외형을 가질 수 있는지는 호스트 언어(예: HTML [HTML])가 정의합니다.

이 명세에서는 이러한 동작을 일부 제어할 수 있도록 appearance 속성을 도입합니다. 특히, appearance: none을 사용하면 저자가 네이티브 외형을 억제하고, CSS를 사용하여 스타일을 다시 적용할 수 있는 기본 외형(primitive appearance)을 위젯에 제공할 수 있습니다.

appearance: base를 사용하면 위젯에 기본 모양이 부여됩니다. 기본 모양의 위젯은 CSS를 사용해 스타일을 다시 지정할 수 있는 경우 네이티브 모양이 억제되며, 원시 모양과 유사하지만, 사용 가능하고 상호 운용 가능한 기본 스타일도 갖추고 있습니다. 이는 일부 위젯이 완전히 사라질 수 있는 원시 모양과는 다릅니다.

위젯에는 스타일 시트가 연결될 수 있으며, 그 스타일은 위젯이 기본 외형인지 여부에 따라 달라질 수 있습니다. 네이티브 외형과 기본 외형은 동일한 스타일을 가져야 합니다.

appearance:base는 HTML 명세에서 스타일 시트가 완전히 정의되고 모든 HTML 폼 컨트롤에 구현될 때까지 제공되지 않습니다.

input { appearance: none; }
input[type=checkbox] { appearance: checkbox; }

none

요소는 일반적인 CSS 규칙에 따라 렌더링됩니다. 위젯 이외의 대체 요소는 이에 영향을 받지 않으며 계속 대체 요소로 남습니다. 위젯은 네이티브 외형을 가져서는 안 되며, 대신 기본 외형을 가져야 합니다. 자세한 내용은 § 7.2.2 요소의 장식적 측면에 대한 appearance의 효과 및 § 7.2.3 요소의 의미적 측면에 대한 appearance의 효과를 참조하십시오.

auto

요소의 박스는 일반 대체 요소처럼 배치됩니다.

그 박스 내에서 위젯을 나타내는 요소는 해당 위젯의 네이티브 외형을 가져야 합니다.

어떤 요소가 어떤 위젯을 나타내는지는 호스트 언어가 정의합니다.

위젯 이외의 요소는 none처럼 렌더링되어야 합니다.

base

base의 효과는 적용된 요소에 따라 다릅니다:

위젯 이외의 요소

위젯 이외의 요소는 none처럼 렌더링되어야 합니다.

기본 외형을 지원하는 위젯

none과 마찬가지로, 요소는 일반 CSS 규칙에 따라 렌더링됩니다. 위젯은 네이티브 외형을 가져서는 안 되며, 대신 기본 외형을 가져야 합니다.

기본 외형을 지원하지 않는 위젯

기본 외형이 없는 위젯은 auto처럼 렌더링되어야 합니다. 어떤 위젯이 기본 외형을 가지는지는 호스트 언어가 정의합니다.

base-select

base-select의 효과는 적용된 요소에 따라 다릅니다:

select 요소 또는 ::picker(select)

요소는 base처럼 렌더링됩니다.

그 외 모든 요소

요소는 auto처럼 렌더링됩니다.

<compat-auto>

이 값들은 이전 비표준 버전에서 개발된 콘텐츠와의 호환성을 위해 존재합니다. 모두 auto와 동일한 효과를 가집니다.

<compat-auto> =  searchfield | textarea | checkbox | radio | menulist | listbox | meter | progress-bar | button 

auto가 널리 지원될 경우, 이를 사용하는 것이 권장됩니다.

웹 호환성을 위해 필요하지 않은 값은 목록에서 제거되어야 하며, 반대로 호환성 때문에 필요한 값이 목록에 없으면 추가되어야 합니다.

일부 값은 호환성 때문에 임의의 요소에 영향을 주는 완전한 값으로 승격될 수도 있으며, 일부 위젯에 부작용이 필요할 수도 있습니다.

<compat-special>

이 값들은 이전 비표준 버전에서 개발된 콘텐츠와의 호환성을 위해 존재합니다. 이 명세에서는 모두 auto와 동일한 효과를 가집니다. 그러나 호스트 언어는 요소의 네이티브 외형을 정의할 때 이 값을 고려할 수 있습니다.

<compat-special> =  textfield | menulist-button 

예를 들어, [HTML]에서:

• input 요소의 "search" type 속성은, appearance가 textfield일 때, input 요소의 "text" 타입과 동일하게 렌더링됩니다.

• 드롭다운 박스 select 요소의 네이티브 외형은 devolved 상태와 일치하도록 변경됩니다. appearance가 menulist-button일 때 적용됩니다.

input[type=checkbox] {
  all: unset; /* 이 축약형은 appearance를 none으로 재설정하는 것도 포함 */
  width: 1em;
  height: 1em;
  display: inline-block;
  background: red;
}
input[type=checkbox]:checked {
  border-radius: 50%;
  background: green;
}
input[type=checkbox]:focus-visible {
  outline: auto;
}

사용자 에이전트는 일부 CSS 속성을 무시할 수 있습니다. 이러한 속성은 위젯의 내용 크기 및 페인팅에 사용되며, 네이티브 외형으로 렌더링된 경우에도 의도한 외형을 유지하거나, 선택된 외형에 의미가 없을 수 있기 때문입니다.

무시란 속성이 해당 위젯에 적용되지 않은 것처럼 취급하는 것을 의미합니다. 그럼에도 불구하고, 명시적 예외가 지정되지 않는 한(호환성 이유), 사용자 에이전트는 계산값을 항상 기존 규칙에 따라 결정해야 합니다.

자세히 말하면, 네이티브 렌더링 위젯에 대한 속성 무시 규칙은 다음과 같습니다:

• 위젯 박스의 크기나 위치에 영향을 주는 CSS 속성(예: 크기 속성) 또는 박스 외부 시각적 외형(예: transform, filter 또는 box-shadow)는 위젯에 적용됩니다. 위젯 박스는 다른 대체 요소처럼 레이아웃에 참여합니다.
• 위젯 내부 박스 모델 크기에 영향을 주는 속성(예: box-sizing, padding, border 또는 margin)는 필요 시 무시될 수 있습니다.
• 페인팅에 영향을 주는 기타 속성(예: background-color)도 필요 시 무시될 수 있습니다.
• 사용자 에이전트는 가능하면 위젯 내 텍스트 렌더링 시 쓰기 모드나 글꼴 관련 CSS 속성을 고려해야 합니다.
• object-fit 속성은 적용되지 않습니다.

위젯의 네이티브 렌더링은 고유 크기가 박스 크기를 초과하면 박스 크기를 넘어갈 수 있습니다.

레거시 콘텐츠와의 호환성을 위해, UA는 -webkit-appearance를 레거시 이름 별칭으로 지원해야 하며, 이는 appearance와 동일하게 취급됩니다.

7.2.1. 네이티브 외형을 비활성화하는 속성

특정 속성이 Author Origin에 선언되면, 일부 위젯의 네이티브 외형을 비활성화합니다. 구체적으로 말하면, 해당 위젯과 관련된 모든 Author Origin 선언이 계단식으로 적용되고, cascaded value가 존재하며—​모든 revert 또는 revert-layer 값이 롤백된 후라도—​위젯의 네이티브 외형을 비활성화하는 속성이 있다면, 해당 위젯은 devolved widget으로 렌더링됩니다. devolved widget의 렌더링은 호스트 언어에서 달리 지정되지 않는 한, 위젯의 primitive appearance와 동일합니다.

호스트 언어는 어떤 요소가 devolvable widget을 나타내는지 정의합니다. 어떤 속성에도 불구하고 외형이 네이티브로 유지되는 위젯은 non-devolvable widget이라고 합니다.

위젯의 네이티브 외형을 비활성화하는 속성은 다음과 같습니다:

• background-color
• border-top-color
• border-top-style
• border-top-width
• border-right-color
• border-right-style
• border-right-width
• border-bottom-color
• border-bottom-style
• border-bottom-width
• border-left-color
• border-left-style
• border-left-width
• border-block-start-color
• border-block-end-color
• border-inline-start-color
• border-inline-end-color
• border-block-start-style
• border-block-end-style
• border-inline-start-style
• border-inline-end-style
• border-block-start-width
• border-block-end-width
• border-inline-start-width
• border-inline-end-width
• background-image
• background-attachment
• background-position
• background-clip
• background-origin
• background-size
• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat
• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius
• border-start-start-radius
• border-start-end-radius
• border-end-start-radius
• border-end-end-radius

7.2.2. appearance가 요소의 장식적 측면에 미치는 영향

CSS 스타일 규칙으로 인해 발생하지 않은 위젯의 모든 장식적 시각 요소는, appearance를 사용하여 외형을 native에서 primitive로 변경할 때 억제되어야 합니다. 이는 UA의 내부 표현이 여러 요소나 의사 요소(pseudo-elements)로 구성되어 있더라도 동일하게 적용됩니다.

사용자 에이전트는 위젯에 대해 appearance가 none일 때 알아보기 쉬운 형태를 제공하도록 사용자 에이전트 스타일시트에 스타일 규칙을 포함해야 합니다.

참고: 따라서 저자는 원하는 스타일링을 얻기 위해 이러한 UA 스타일 규칙을 재정의해야 할 수도 있습니다.

7.2.3. appearance가 요소의 의미적 측면에 미치는 영향

primitive appearance를 표시할 때, 또는 위젯의 devolved 상태를 표시할 때, 사용자 에이전트는 원래 의미대로 위젯을 조작하는 데 필요한 속성들을 유지해야 합니다. 그러나 UA는 위젯을 조작할 수 있는 한, 외형과 느낌을 다르게 줄 수 있습니다. 단순히 위젯의 상태를 확인하기 위해 필요한 속성으로, 조작에 필요하지 않은 부분은 동일한 정보를 일반 CSS로 전달할 수 있는 경우 억제해야 합니다. 문서 언어는 정의하는 각 위젯에 대해 무엇을 유지해야 하는지 명시해야 합니다.

요소의 동작과 의미는 문서 언어에 의해 정의되며, 이 속성에 의해 영향을 받지 않습니다.

반대로, 요소의 appearance를 변경한다고 해서, 해당 외형을 가진 다른 요소의 의미, 의사 클래스, 이벤트 핸들러 등을 가져오게 해서는 안 됩니다.

7.3. 컨트롤별 규칙

이 섹션의 일부 또는 전체를 추후 [HTML] 명세로 이동할 수도 있습니다.

일부 요소에서 특정 속성을 설정하면 appearance: auto가 방해될 수 있습니다. 예를 들어, appearance가 auto일지라도, 버튼에 border를 설정하면 네이티브 외형이 사라집니다. 이는 auto 정의와 모순되지 않습니다. appearance: auto는 UA가 네이티브 외형을 사용할 수 있음을 의미할 뿐입니다. 상호 운용성을 위해, 어떤 요소에서 어떤 속성이 이런 영향을 미치는지 문서화하는 것이 좋습니다.

UA 스타일시트에 무엇을 포함해야 하는지 문서화하는 것이 좋습니다.

7.3.1. 단일 행 텍스트 입력 컨트롤

appearance가 auto일 때, [HTML]의 <input type=text> 같은 단일 행 텍스트 입력 컨트롤은 다음과 같이 렌더링되어야 합니다.

• 내용은 content edge까지 인라인 방향으로 잘립니다.

• 내용은 padding edge까지 블록 방향으로 잘립니다.

• 내용은 수직으로 가운데 정렬됩니다.

• 내용이 줄 바꿈되지 않습니다.

• text-overflow 속성은 overflow 값과 관계없이 적용됩니다.

부록 A. 감사의 글

이 부록은 참고용입니다.

이 명세서는 [CSS-UI-3]를 기반으로 작성되었으며, 1999년부터 현재까지 대부분의 편집과 작성은 Tantek Çelik이 수행했습니다. 초기에는 Microsoft를 대표하여, 이후에는 초청 전문가로, 최근에는 Mozilla를 대표하여 참여했습니다.

다음 분들의 피드백과 기여에 감사드립니다: 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. 변경 사항

이 부록은 참고용입니다.

2021년 3월 16일 워킹 드래프트에서의 변경 사항

여러 편집상의 조정 외에도, 다음과 같은 규범적 변경 사항이 있었습니다:

• pointer-events 속성 정의를 도입함.
• cursor 속성에서 지원해야 하는 이미지 유형을 <url>에서 <url>과 <url-set>으로 확장함. (보다 일반적인 <image> 유형은 선택적 지원 가능.)
• author origin에 값이 남아 있는 경우 revert-layer 이후 네이티브 외형을 비활성화함.
• 스크롤 컨테이너를 참조하도록 수정, overflow 값 중 visible이 아닌 것들을 포함하고, clip도 포함됨.
• outline-width의 계산 값을 border width로 스냅하도록 정의함.
• slider-horizontal, square-button, push-button 키워드를 <compat-auto>에서 제거함.
• outline-color의 invert 값을 폐기함.
• outline-color에 auto 값을 추가함.
• outline-width가 outline-style: auto 렌더링에 영향을 줄 수 있다는 주장을 제거함. (Issue 9201)
• outline이 요소의 잉크 오버플로우 영역에 기여함을 명확히 함.
• caret-animation 속성을 재도입함.
• 속성 무시(disregarding a property)의 의미 정의.
• (반)투명 accent color 동작 정의.
• outline-offset가 outline 단축 속성에 포함되지 않음을 명시함.
• base 키워드를 appearance 속성에 추가함.
• interactivity 속성을 추가함.
• 줄 끝 캐럿이 넘치더라도 표시됨을 명확히 함.
• appearance: auto에 대한 박스 렌더링 정의.
• outline이 모서리 형태를 따르도록 명확히 함.
• caret-* 속성 적용 범위 명확화.
• cursor 속성 구문을 가독성을 위해 재배열함.
• interest-delay 속성과 장단점 속성 interest-delay-start, interest-delay-end 추가.
• outline-color가 <'border-top-color'>를 참조하도록 변경, 해당 속성 값 추가도 적용됨.
• outline-width가 outline-style이 none 또는 hidden일 때 계산 값이 0인 특수 사례를 제거함. (Issue 11494)

2020년 1월 24일 작업 초안에서의 변경 사항

여러 편집적 조정 외에도, 다음과 같은 규범적 변경 사항이 적용되었습니다:

• appearance: button 속성을 버튼에만 적용되도록 변경.
• outline-style이 auto인 경우 outline-width는 무시될 수 있음.
• 변형(transform)에도 불구하고 캐럿(caret)의 가시성 보장.
• resize: block와 resize: inline을 css-logical-1에서 이 사양으로 이동.
• accent-color 속성 도입.

2020년 1월 2일 작업 초안에서의 변경 사항

여러 편집적 조정 외에도, 다음과 같은 규범적 변경 사항이 적용되었습니다:

• user-select를 애니메이션 가능하도록 정의, 이전에는 불가.
• appearance: button의 적용 범위를 제한하여, 버튼이 아닌 위젯에 버튼과 같은 외형을 부여하지 않도록 함.
• 변형(transform)으로 축소된 경우에도 캐럿 가시성을 유지하는 조항 추가.

2017년 12월 22일 작업 초안에서의 변경 사항

여러 편집적 조정 외에도, 다음과 같은 규범적 변경 사항이 적용되었습니다:

• 폼 컨트롤별 렌더링 규칙에 대한 세부 사항 추가.
• text-overflow와 익명 블록 컨테이너 간 상호 작용 명확화.
• 모든 문서 형식에서 하이퍼링크에 pointer 커서 필요.
• box-sizing 및 text-overflow 속성을 각각 [CSS-SIZING-3] 및 [CSS-OVERFLOW-4]로 이동.
• text 커서가 글쓰기 모드와 일치하도록 요구 사항을 MAY에서 MUST로 변경.
• appearance 속성 정의를 재작성하여 기존 웹 콘텐츠와 호환되도록 함.
• user-select: auto의 계산 값 시점 매핑 로직을 사용 값 시점으로 변경.
• cursor: pointer 값에 대한 작성자 요구 사항 명확화.

2015년 9월 22일 최초 공개 작업 초안에서의 변경 사항

여러 편집적 조정 외에도, 다음과 같은 규범적 변경 사항이 적용되었습니다:

• user-select 속성 도입.
• caret-animation 속성 제거, 알려진 사용 사례 없음.
• resize 속성이 이미지/비디오를 나타내는 교체 요소와 iframe에도 적용되도록 변경.
• text-overflow 속성의 문자열 값 및 이중 값들을 레벨 3에서 이 사양으로 이동.
• 방향성 포커스 네비게이션 속성을 레벨 3에서 레벨 4로 이동.
• 안정화된 [CSS-UI-3] 콘텐츠 통합.

CSS UI 레벨 3에서의 변경 사항

• user-select 속성 도입.
• 방향성 포커스 네비게이션 속성 nav-up, nav-down, nav-left, nav-right 추가.
• appearance 속성 추가.
• resize: block 및 resize: inline을 [CSS-LOGICAL-1]에서 이 사양으로 이동.
• accent-color 속성 추가.
• interest-delay 속성과 장단항 interest-delay-start, interest-delay-end 추가.
• pointer-events 속성 추가.
• cursor 속성에 대해 지원해야 하는 이미지 유형을 <url>에서 <url> 및 <url-set>로 확장. (더 일반적인 <image> 유형은 허용되지만 선택 사항.)
• invert 값의 outline-color 제거.
• auto 값을 outline-color에 추가.
• caret-animation 속성 추가.
• interactivity 속성 추가.
• interest-delay 속성과 장단항 interest-delay-start, interest-delay-end 추가.
• outline-color를 <'border-top-color'>에 참조하도록 하여, 해당 속성 값의 추가가 이 속성에도 적용되도록 함.

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

이 부록은 참고용입니다.

W3C TAG는 사양 편집자가 참고용으로 답변할 수 있도록 자체 검토 설문서: 보안 및 개인정보를 개발 중입니다.

검토해야 할 질문에 따라

이 사양은 개인 식별 정보를 다루나요?

아니요.

이 사양은 높은 가치의 데이터를 다루나요?

아니요.

이 사양은 브라우징 세션 간 지속되는 새로운 상태를 도입하나요?

아니요.

이 사양은 웹에 지속적이고 교차 출처 상태를 노출하나요?

아니요.

이 사양은 현재 접근 권한이 없는 데이터를 출처에 노출하나요?

아니요.

이 사양은 출처가 사용자의 위치에 접근할 수 있도록 허용하나요?

아니요.

이 사양은 출처가 사용자의 장치 센서에 접근할 수 있도록 허용하나요?

예.

방향성 포커스 탐색 속성은 간접적으로 장치의 키보드 탐색 입력 메커니즘(예: 화살표 키)에 접근할 수 있도록 합니다.

이 사양은 출처가 사용자의 로컬 컴퓨팅 환경의 일부에 접근할 수 있도록 허용하나요?

아니요.

이 사양은 출처가 다른 장치에 접근할 수 있도록 허용하나요?

아니요.

이 사양은 임시 식별자를 웹에 노출하나요?

아니요.

이 사양은 1자/3자 컨텍스트에서의 동작을 구분하나요?

아니요.

이 사양은 사용자 에이전트의 "시크릿" 모드에서 어떻게 작동해야 하나요?

다르게 작동하지 않습니다.

이 사양은 데이터를 사용자의 로컬 장치에 지속적으로 저장하나요?

아니요.

부록 D: 보안 고려사항

이 부록은 참고용입니다.

W3C TAG는 사양 편집자가 참고용으로 답변할 수 있도록 자체 검토 설문서: 보안 및 개인정보를 개발 중입니다.

검토해야 할 질문에 따라

이 사양은 새로운 스크립트 실행/로딩 메커니즘을 허용하나요?

로딩은 허용되지만 실행은 허용되지 않습니다.

cursor 속성은 <image> 값을 허용하며, 여기에는 로드될 URL이 포함될 수 있습니다. 이는 스크립트를 포함할 수 있는 SVG 문서일 수 있지만, 이 사양은 스크립트 실행을 허용하지 않습니다.

이 사양은 출처가 사용자 에이전트의 네이티브 UI를 어느 정도 제어할 수 있도록 허용하나요?

예.

cursor와 caret 속성 및 하위 속성들은 페이지가 사용자 에이전트의 네이티브 UI에서 커서와 텍스트 삽입 캐럿의 표시를 변경할 수 있게 합니다. 또한 outline-style 속성의 auto 값(및 outline 단축 속성)을 사용하면 페이지가 잠재적으로 모든 요소 주위에 네이티브 포커스 요소 외곽선 표시를 할 수 있습니다.

appearance 속성 또한 작성자가 네이티브 스타일링을 끄고 CSS 기반 스타일링으로 대체할 수 있게 합니다.

이 사양은 기본 보안 특성을 낮출 수 있도록 허용하나요?

아니요.

부록 E: 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 {
  /* white space handling of BUTTON tags in particular */
  white-space:normal;
}

input[type=reset]:lang(en) {
  /* default content of HTML input type=reset button, per language */
  content: "Reset";
}

input[type=submit]:lang(en) {
  /* default content of HTML input type=submit button, per language */
  content: "Submit";
}

/* UAs should use language-specific Reset/Submit rules for others. */

input[type=button],
input[type=reset][value],
input[type=submit][value] {
  /* text content/labels of HTML "input" buttons */
  content: attr(value);
}

textarea {
  /* white space handling of TEXTAREA tags in particular */
  white-space:pre-wrap;
  resize: both;
}

input[type=hidden] {
  /* appearance of the HTML hidden text field in particular */
  display: none !important;
}

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

select[size] {
  /* HTML4/XHTML1 <select> w/ size more than 1 - appearance of list */
  display: inline-block;
  height: attr(size,em);
}

select,select[size=1] {
  /* HTML4/XHTML1 <select> without size, or size=1 - popup-menu */
  display: inline-block;
  height: 1em;
  overflow: hidden;
}

select[size]:active {
  /* active HTML <select> w/ size more than 1 - appearance of active list */
  display: inline-block;
}

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

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

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

/* Though FRAME resizing is not directly addressed by this specification,
   the following rules may provide an approximation of reasonable behavior. */

/*

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

*/