목차
| 이름: | cursor |
|---|---|
| 값: | [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit |
| 초기값: | auto |
| 적용 대상: | 모든 요소 |
| 상속됨: | 예 |
| 백분율: | N/A |
| 미디어: | 시각적, 인터랙티브 |
| 계산값: | 명시된 대로, 단 상대 URL은 절대 URL로 변환됨 |
이 속성은 포인팅 장치에 표시될 커서 유형을 지정합니다. 값의 의미는 다음과 같습니다:
:link,:visited { cursor: url(example.svg#linkcursor), url(hyper.cur), pointer }
이 예제는 모든 하이퍼링크(방문 여부와 관계없이)에 외부 SVG 커서를 설정합니다. SVG 커서를 지원하지 않는 사용자 에이전트는 다음 값을 건너뛰고 "hyper.cur" 커서를 사용하려고 시도합니다. 해당 커서 형식도 지원되지 않으면, UA는 다음 값을 건너뛰고 'pointer' 커서를 간단히 렌더링합니다.
참고. 시스템 색상은 CSS3 색상 모듈 [CSS3COLOR]에서 더 이상 권장되지 않습니다.
CSS2는 텍스트, 배경 등에 미리 정의된 색상 값을 할당할 수 있을 뿐만 아니라, 작성자가 색상을 운영 체제의 그래픽 환경에 통합하는 방식으로 지정할 수 있도록 하는 명명된 색상 값 세트를 도입했습니다.
해당 값이 없는 시스템의 경우, 지정된 값은 가장 가까운 시스템 값 또는 기본 색상으로 매핑되어야 합니다.
다음은 색상 관련 CSS 속성에 대한 추가 값과 그 일반적인 의미를 나열한 것입니다. 모든 색상 속성(예: 'color' 또는 'background-color')은 다음 이름 중 하나를 사용할 수 있습니다. 이러한 이름은 대소문자를 구분하지 않지만, 아래에 표시된 혼합 대문자를 사용하는 것이 더 읽기 쉽게 하기 위해 권장됩니다.
예를 들어, 단락의 전경색과 배경색을 사용자의 창 전경색과 배경색으로 설정하려면 다음과 같이 작성합니다:
p { color: WindowText; background-color: Window }
색상과 마찬가지로, 작성자는 사용자의 시스템 리소스를 활용하는 방식으로 글꼴을 지정할 수 있습니다. 자세한 내용은 'font' 속성을 참조하십시오.
경우에 따라 스타일 시트 작성자는 버튼, 활성 폼 필드, 이미지 맵 등과 같은 시각적 객체 주위에 윤곽선을 생성하여 이를 강조하고 싶을 수 있습니다. CSS 2.2 윤곽선은 테두리와 다음과 같은 차이점이 있습니다:
윤곽선 속성은 이러한 동적 윤곽선의 스타일을 제어합니다.
| 이름: | outline |
|---|---|
| 값: | [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit |
| 초기값: | 개별 속성 참조 |
| 적용 대상: | 모든 요소 |
| 상속됨: | 아니요 |
| 백분율: | N/A |
| 미디어: | 시각적, 인터랙티브 |
| 계산값: | 개별 속성 참조 |
| 이름: | outline-width |
|---|---|
| 값: | <border-width> | inherit |
| 초기값: | medium |
| 적용 대상: | 모든 요소 |
| 상속됨: | 아니요 |
| 백분율: | N/A |
| 미디어: | 시각적, 인터랙티브 |
| 계산값: | 절대 길이; 'none'일 경우 '0' |
| 이름: | outline-style |
|---|---|
| 값: | <border-style> | inherit |
| 초기값: | none |
| 적용 대상: | 모든 요소 |
| 상속됨: | 아니요 |
| 백분율: | N/A |
| 미디어: | 시각적, 인터랙티브 |
| 계산값: | 명시된 대로 |
| 이름: | outline-color |
|---|---|
| 값: | <color> | invert | inherit |
| 초기값: | invert |
| 적용 대상: | 모든 요소 |
| 상속됨: | 아니요 |
| 백분율: | N/A |
| 미디어: | 시각적, 인터랙티브 |
| 계산값: | 명시된 대로 |
윤곽선 속성으로 생성된 윤곽선은 상자 "위에" 그려지며, 즉 윤곽선은 항상 최상단에 있고, 상자나 다른 상자의 위치나 크기에 영향을 미치지 않습니다. 따라서 윤곽선을 표시하거나 숨겨도 재배치(reflow)나 넘침(overflow)이 발생하지 않습니다.
윤곽선은 테두리 가장자리 바로 바깥쪽에서 시작하여 그려질 수 있습니다.
윤곽선은 비직사각형일 수 있습니다. 예를 들어, 요소가 여러 줄에 걸쳐 나뉘어 있으면, 윤곽선은 해당 요소의 모든 박스를 둘러싸는 최소 윤곽선입니다. 테두리와 달리 윤곽선은 줄 상자의 끝이나 시작에서 열리지 않고, 가능하면 항상 완전히 연결됩니다.
'outline-width' 속성은 'border-width'와 동일한 값을 허용합니다.
'outline-style' 속성은 'border-style'와 동일한 값을 허용하지만, 'hidden'은 합법적인 윤곽선 스타일이 아닙니다.
'outline-color' 속성은 모든 색상과 'invert' 키워드를 허용합니다. 'invert'는 화면의 픽셀에 대해 색상 반전을 수행할 것으로 예상됩니다. 이는 배경색에 관계없이 포커스 테두리가 보이도록 보장하는 일반적인 방법입니다.
호환되는 UA는 화면의 픽셀 색상 반전을 지원하지 않는 플랫폼에서 'invert' 값을 무시할 수 있습니다. UA가 'invert' 값을 지원하지 않으면 'outline-color' 속성의 초기 값은 'border-top-color' 속성의 초기 값과 유사하게 'color' 속성의 값이 됩니다.
'outline' 속성은 축약형 속성이며, 'outline-style', 'outline-width', 그리고 'outline-color'의 세 가지를 모두 설정합니다.
참고. 윤곽선은 모든 면에서 동일합니다. 테두리와 달리 'outline-top' 또는 'outline-left' 속성은 없습니다.
이 명세는 여러 겹치는 윤곽선이 어떻게 그려지는지 또는 다른 요소 뒤에 부분적으로 가려진 박스의 윤곽선이 어떻게 그려지는지 정의하지 않습니다.
참고. 윤곽선은 형식 지정에 영향을 미치지 않으므로 (즉, 박스 모델에 공간이 남지 않음) 페이지의 다른 요소와 겹칠 수 있습니다.
버튼 요소 주위에 두꺼운 윤곽선을 그리는 예제는 다음과 같습니다:
button { outline : thick solid }
스크립트를 사용하여 윤곽선의 너비를 동적으로 변경할 수 있으며, 재배치를 유발하지 않습니다.
그래픽 사용자 인터페이스는 요소 주위에 윤곽선을 사용하여 페이지에서 포커스가 있는 요소를 사용자에게 알릴 수 있습니다. 이러한 윤곽선은 테두리와 별개이며, 윤곽선을 켜거나 끄는 것이 문서의 재배치를 유발하지 않아야 합니다. 포커스는 문서에서 사용자 상호작용의 대상입니다 (예: 텍스트 입력, 버튼 선택 등). 인터랙티브 미디어 그룹을 지원하는 사용자 에이전트는 포커스가 어디에 있는지 추적해야 하며 이를 표현해야 합니다. 이는 :focus 의사 클래스와 함께 동적 윤곽선을 사용하여 수행될 수 있습니다.
예를 들어, 요소가 포커스를 가질 때 검은색 두꺼운 선을 그리고, 활성 상태일 때 빨간색 두꺼운 선을 그리려면 다음 규칙을 사용할 수 있습니다:
:focus { outline: thick solid black }
:active { outline: thick solid red }
CSS 작업 그룹은 문서 또는 문서의 일부 확대를 스타일 시트를 통해 지정해서는 안 된다고 간주합니다. 사용자 에이전트는 다양한 방식으로 이러한 확대를 지원할 수 있습니다 (예: 더 큰 이미지, 더 큰 소리 등).
페이지를 확대할 때, UA는 위치 요소 간의 관계를 유지해야 합니다. 예를 들어, 만화는 텍스트 요소가 겹쳐진 이미지로 구성될 수 있습니다. 이 페이지를 확대할 때, 사용자 에이전트는 텍스트를 만화 말풍선 내에 유지해야 합니다.