| 18 사용자 인터페이스(user interface) | |
| 이전순서 | 다음순서 | 목차 | 속성들 | 색인 | 원문 |
| 값: | [ [<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 ] ] | inherit |
| auto | |
| 적용: | 모든 엘레멘트들 |
| 전달: | 됨 |
| 백분율: | 사용 못함 |
| 메디아: | visible(보이는), interactive(인터랙티브: 정보교환) |
이 속성은 지시(pointing) 장치에 디스플레이될 커서(cursor) 타입을 지정한다. 값들은 다음의 의미를 갖는다:
P { cursor : url("mything.cur"), url("second.csr"), text; }
텍스트, 배경들, 등에 사전에 정의된 색상(color) 값들을 지정할 수 있는 것에 추가적으로, CSS2는 제작자들이 사용자의 그래픽 환경에 통합(integrate)되도록 색상을 지정할 수 있게 한다. 스타일 명령들은 사용자 선호들을 고려하며 다음의 잇점들을 제공한다:
시스템 색상들에 정의된 값들은 항상 사용하도록(exhaustive) 시도되었다. 해당 값을 가지고 있지 않는 시스템은, 그 지정된 값을에, 시스템 애트리뷰트 또는 디폴트 색상에 가장 가까운 것을 사용하여야 한다.
다음 목록들은 색상과 관련된 CSS 애트리뷰트들의 추가적 값들과 그들의 일반적인 의미를 나타낸다. 어떤 색상 속성(예: 'color' 또는 'background-color')는 다음 이름들 중에서 하나를 사용할 수 있다. 이들은 대소문자를 구별하지만,그 이름들을 보다 쉽게 읽을 수 있도록 대소문자가 섞인 아래에 나타난 대로 사용할 것을 추천한다.
예를 들어, 문단의 전면 글자와 배경색상을 사용자의 윈도우의 전면 글자와 배경색상과 같이 설정하기 위하여, 다음과 같이 썼다:
P { color: WindowText; background-color: Window }
색상에서와 마찬가지로, 제작자들은 사용자의 시스템 자원들에 사용하기 위하여 글꼴들을 지정할 수 있다. 세부사항은 'font' 속성을 참조하라.
스타일쉬트 제작자들은 때로는 단추(button), 활성 입력 필드(active form field), 이미지 맵(image map)들과 같은 보이는 개체(object)들이 튀어 나도록, 주위에 아우트라인의 생성을 원할 수 있다. CSS2 아우트라인(outline)들은 테두리(border)들과 다음과 같이 다르다:
아우트라인(outline) 속성들은 이들 탄력적 아우트라인(dynamic outline)들의 스타일을 제어한다.
| 값: | [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit |
| 최초값: | 각 속성들을 보라 |
| 적용: | 모든 엘레멘트들 |
| 전달: | 안됨 |
| 백분율: | 사용 못함 |
| 메디아: | visible(보이는), interactive(인터랙티브: 정보교환) |
| 값: | <border-width> | inherit |
| 최초값: | medium |
| 적용: | 모든 엘레멘트들 |
| 전달: | 안됨 |
| 백분율: | 사용 못함 |
| 메디아: | visible(보이는), interactive(인터랙티브: 정보교환) |
| 값: | <border-style> | inherit |
| 최초값: | none |
| 적용: | 모든 엘레멘트들 |
| 전달: | 안됨 |
| 백분율: | 사용 못함 |
| 메디아: | visible(보이는), interactive(인터랙티브: 정보교환) |
| 값: | <색상> | invert | inherit |
| 최초값: | invert |
| 적용: | 모든 엘레멘트들 |
| 전달: | 안됨 |
| 백분율: | 사용 못함 |
| 메디아: | visible(보이는), interactive(인터랙티브: 정보교환) |
아우트라인은 아우트라인(outline) 속성들이 박스 위("over")에 그려 짐으로서 생성된다. 말하자면, 아우트라인은 항상 맨위에 있고, 위치, 박스의 크기나, 또는 어떤 다른 박스들에 의하여 영향을 받지 않는다. 따라서 아우트라인들이 디스플레이되거나 억제되더도 화면의 다시 흐름(reflow)을 일으키지 않는다.
아우트라인은 테두리 모서리 바로 밖에서 시작된다.
아우트라인들은 사각형이 아닐 수 있다. 예를 들어, 만일 그 엘레멘트가 여러 줄(line)들에 갈라져 있으면, 그 아우트라인은 모든 그 엘레멘트의 박스들를 싸고있는 최소 아우트라인이다. 테두리(border)들과는 달리, 아우트라인은 라인 박스(line box)의 끝이나 시작에서 열리지 않고, 항상 완전히 연결된다.
'outline-width' 속성은 'border-width'와 같은 값들을 받는다.
'outline-style' 속성은 'border-style'와 같은 값들을 받으나, 'hidden'은 유효한 아우트라인 스타일이 아니다.
'outline-color'는 모든 색상들과 키워드(keyword) 'invert' 값들을 받는다. 'Invert'는 스크린 상에서 의 색상을 역(inversion)으로 만들게 한다. 이는 초점(focus) 테두리가 어떤 색상 배경이던 관계없이 확실히 보이게 하는 일반적인 기교이다.
'outline' 속성은 약식속성으로, 'outline-style', 'outline-width', 'outline-color' 세가지를 다 설정한다.
아우트라인은 모든 면들이 같다는 것에 유의하라. 테두리들과는 달리, 'outline-top' 또는 'outline-left' 속성은 없다.
이 규격은, 어떻게 복수 중복 아우트라인을 그리는가, 또는 어떻게, 다른 엘레멘트들 뒤의 부분적으로 불분명한, 박스들의 아우트라인들을 그리는가를 정의하지 않았다.
주석. 초점(focus) 아우트라인은 양식화에 영향을 주지 않기 때문에(박스 모델에서 왼쪽에 공간이 없음), 페이지의 다른 엘레멘트들과 잘 겹칠 수가 있다.
여기 BUTTON 엘레멘트 주위에 굵은 아우트라인을 그리는 예제가 있다:
BUTTON { outline-width : thick }
스티립트들은, 화면 재흐름(reflow) 없이, 탄력적으로 변하는 아우트라인 너비에 사용될 수 있다.
그래픽 사용자 인터페이스(interface)들은, 사용자에게 페이지에서 어떤 엘레멘트가 초점(focus)을 가질 것인가를 알려주기 위해, 엘레멘트들 주위에 아우트라인들을 사용할 수 있다. 이들 아우트라인들은 테두리들에 추가적으로, 문서 표현의 다시흐름(reflow)을 발생시키지 않고, 아우트라인을 켜거나 끌 수 있다. 초점은 문서에서 사용자와 정보교환(interactive)의 수단이다(예: 텍스트 입력, 단추의 선택, 등). 정보교환(interactive) 메디아 구룹을 지원하는 사용도구들은 어디에 그 초점(focus)이 있는가를 추적하면서 그 초점을 표현하여야 한다. 이는 탄력적 아우트라인(dynamic outline)들을 :focus 가상클라스(pseudo-class)와 연관하여 사용함으로서 이루어 질 수 있다.
예를 들어, 초점이 올 때 엘레멘트 주의에 굵은 검정 선을 그리고, 그것이 활성화될 때 굵은 붉은 선을 긋기 위하여, 다음 명령이 사용될 수 있다:
:focus { outline: thick solid black }
:active { outline: thick solid red }
CSS 작업 구룹은 문서의 배율 또는 문서의 위치가 스타일쉬트들을 통하여 지정되지 않아야 된다고 생각하였다. 사용도구들은 이러한 배율을 다른 방식들(예: 더 큰 이미지들, 더 큰 소리, 등)로 지원할 수 있다
페이지를 확대, 축소할 때, 사용도구들은 위치된(positioned) 엘레멘트들사이의 관계를 유지하여야 한다. 예를 들어, 코믹(comic) 스크립트가 텍스트 엘레멘트들과 함께 이미지들이 구성될 수 있다. 이 페이지를 확대할 때, 사용도구는 그 comic 스크립트 풍선 안에 텍스트를 유지하여야 한다.
| 이전순서 | 다음순서 | 목차 | 속성들 | 색인 | 원문 |
맨위이 문서()는 자유로이 연결 사용이 가능함.
(수정일 )