W3C18 사용자 인터페이스(user interface)Trio 홈페이지 

목차

18.1 커서(cursor): 'cursor' 속성

'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 ] ] | inherit
최초값:  auto
적용:  모든 엘레멘트들
전달:  
백분율:  사용 못함
메디아:  visible(보이는), interactive(인터랙티브: 정보교환)

이 속성은 지시(pointing) 장치에 디스플레이될 커서(cursor) 타입을 지정한다. 값들은 다음의 의미를 갖는다:

auto(자동)
사용도구가 현재의 문맥에 기초하여 디스플레이될 커서를 결정한다.
crosshair(십자)
단순 crosshair (예: "+" 부호와 비슷한 짧은 선).
default(디폴트)
플래트폼에 따른 디폴트 커서. 자주 화살표로 표현된다.
pointer(지시자)
연결의 지시를 나타내는 커서.
move(움직임)
무엇이 움직이는 것을 나타내는 커서.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize(모서리 움직임)
일부 모서리가 움직이는 것을 나타낸다. 예를 들어, 'se-resize' 커서는 박스의 아래 오른쪽(south-east) 모서리로 부터 시작하여 움직이는데 사용된다.
text(텍스트)
선택될 수 있는 텍스트를 나타낸다. 자주 I-bar로 표현된다.
wait(대기)
프로그램이 작동 중이어서 사용자가 기다려야 함을 나타낸다. 자주 시계나 모래시계로 표현된다.
help(도움말)
커서에 개체(object)가 있을 때 도움말은 나타낸다. 자주 물음표나 풍선으로 표현된다.
<uri>
사용도구는 URI를 자원이 지정한 커서으로 부터 읽어온다. 사용도구가 커서들 목록 중에서 첫?
枰? 커서를 사용할 수 없으면, 두번째를 처리하도록 시도하는 등 진행하고, 만일 사용도구가 어떤 사용자 정의 커서도 사용할 수 없으면, 그 목록 제일 마지막에 있는 기본(generic) 커서를 사용하여야 한다.

예제:

P { cursor : url("mything.cur"), url("second.csr"), text; }

18.2 색상에 대한 사용자 선호

텍스트, 배경들, 등에 사전에 정의된 색상(color) 값들을 지정할 수 있는 것에 추가적으로, CSS2는 제작자들이 사용자의 그래픽 환경에 통합(integrate)되도록 색상을 지정할 수 있게 한다. 스타일 명령들은 사용자 선호들을 고려하며 다음의 잇점들을 제공한다:

  1. 사용자가 정의한 모양과 느낌에 맞는 페이지들을 만든다.
  2. 장애자와 관련된 현재의 사용자 설정들에 좀 더 쉽게 접속할 수 있는 페이지들을 만든다.

시스템 색상들에 정의된 값들은 항상 사용하도록(exhaustive) 시도되었다. 해당 값을 가지고 있지 않는 시스템은, 그 지정된 값을에, 시스템 애트리뷰트 또는 디폴트 색상에 가장 가까운 것을 사용하여야 한다.

다음 목록들은 색상과 관련된 CSS 애트리뷰트들의 추가적 값들과 그들의 일반적인 의미를 나타낸다. 어떤 색상 속성(예: 'color' 또는 'background-color')는 다음 이름들 중에서 하나를 사용할 수 있다. 이들은 대소문자를 구별하지만,그 이름들을 보다 쉽게 읽을 수 있도록 대소문자가 섞인 아래에 나타난 대로 사용할 것을 추천한다.

ActiveBorder
윈도우 테두리를 활성화.
ActiveCaption
윈도우 제목을 활성화.
AppWorkspace
복수 문서 배경색을 연결 사용(interface).
Background
컴퓨터(desktop) 배경.
ButtonFace
디스플레이되는 삼차원 엘레멘트들의 표현(face) 색상.
ButtonHighlight
디스플레이되는 삼차원 엘레멘트의 어두운 그림자(모서리에 빛의 근원으로 부터 먼 쪽이 표현).
ButtonShadow
디스플레이되는 삼차원 엘레멘트들의 그림자 색상.
ButtonText
누름 단추들 위의 텍스트.
CaptionText
제목, 크기 조절(size) 박스와 화면굴림(scrollbar) 화살 박스 안의 텍스트.
GrayText
회색(불활성) 텍스트 색상. 만일 현재의 디스플레이 드라이버가 단일 회색을 지원하지 않으면 이 색상은 #000으로 설정된다.
Highlight
제어에서 선택된 항목(들).
HighlightText
제어에서 선택된 텍스트 항목(들).
InactiveBorder
불활성 윈도우 테두리.
InactiveCaption
불활성 윈도우 제목.
InactiveCaptionText
불활성 제목의 텍스트 색상.
InfoBackground
보조 정보(tooltip) 제어의 배경색.
InfoText
보조 정보(tooltip) 제어의 텍스트 배경색.
Menu
메뉴 배경.
MenuText
메뉴 텍스트.
Scrollbar
화면굴림바(scroll bar) 회색 지역.
ThreeDDarkShadow
디스플레이되는 삼차원 엘레멘트들의 어두운 그림자.
ThreeDFace
디스플레이되는 삼차원 엘레멘트들의 표면 색상.
ThreeDHighlight
디스플레이되는 삼차원 엘레멘트들의 하이라이트 색상.
ThreeDLightShadow
디스플레이되는 삼차원 엘레멘트들의 밝은 색상(빛의 근원 쪽 모서리들).
ThreeDShadow
디스플레이되는 삼차원 엘레멘트들의 어두운 그림자.
Window
윈도우 배경.
WindowFrame
윈도우 프레임.
WindowText
윈도우 텍스트.

예제:

예를 들어, 문단의 전면 글자와 배경색상을 사용자의 윈도우의 전면 글자와 배경색상과 같이 설정하기 위하여, 다음과 같이 썼다:

P { color: WindowText; background-color: Window }

18.3 글꼴에 대한 사용자 선호

색상에서와 마찬가지로, 제작자들은 사용자의 시스템 자원들에 사용하기 위하여 글꼴들을 지정할 수 있다. 세부사항은 'font' 속성을 참조하라.

18.4 탄력적 아우트라인(dynamic outline): 'outline' 속성

스타일쉬트 제작자들은 때로는 단추(button), 활성 입력 필드(active form field), 이미지 맵(image map)들과 같은 보이는 개체(object)들이 튀어 나도록, 주위에 아우트라인의 생성을 원할 수 있다. CSS2 아우트라인(outline)들은 테두리(border)들과 다음과 같이 다르다:

  1. 아우트라인들은 공간을 차지하지 않는다.
  2. 아우트라인들은 사각형이 아닐 수 있다.

아우트라인(outline) 속성들은 이들 탄력적 아우트라인(dynamic outline)들의 스타일을 제어한다.

'outline'
값:  [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit
최초값:  각 속성들을 보라
적용:  모든 엘레멘트들
전달:  안됨
백분율:  사용 못함
메디아:  visible(보이는), interactive(인터랙티브: 정보교환)
'outline-width'
값:  <border-width> | inherit
최초값:  medium
적용:  모든 엘레멘트들
전달:  안됨
백분율:  사용 못함
메디아:  visible(보이는), interactive(인터랙티브: 정보교환)
'outline-style'
값:  <border-style> | inherit
최초값:  none
적용:  모든 엘레멘트들
전달:  안됨
백분율:  사용 못함
메디아:  visible(보이는), interactive(인터랙티브: 정보교환)
'outline-color'
값:  <색상> | 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) 없이, 탄력적으로 변하는 아우트라인 너비에 사용될 수 있다.

18.4.1 아우트라인과 초점(focus)

그래픽 사용자 인터페이스(interface)들은, 사용자에게 페이지에서 어떤 엘레멘트가 초점(focus)을 가질 것인가를 알려주기 위해, 엘레멘트들 주위에 아우트라인들을 사용할 수 있다. 이들 아우트라인들은 테두리들에 추가적으로, 문서 표현의 다시흐름(reflow)을 발생시키지 않고, 아우트라인을 켜거나 끌 수 있다. 초점은 문서에서 사용자와 정보교환(interactive)의 수단이다(예: 텍스트 입력, 단추의 선택, 등). 정보교환(interactive) 메디아 구룹을 지원하는 사용도구들은 어디에 그 초점(focus)이 있는가를 추적하면서 그 초점을 표현하여야 한다. 이는 탄력적 아우트라인(dynamic outline)들을 :focus 가상클라스(pseudo-class)와 연관하여 사용함으로서 이루어 질 수 있다.

예제:

예를 들어, 초점이 올 때 엘레멘트 주의에 굵은 검정 선을 그리고, 그것이 활성화될 때 굵은 붉은 선을 긋기 위하여, 다음 명령이 사용될 수 있다:

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

18.5 배율

CSS 작업 구룹은 문서의 배율 또는 문서의 위치가 스타일쉬트들을 통하여 지정되지 않아야 된다고 생각하였다. 사용도구들은 이러한 배율을 다른 방식들(예: 더 큰 이미지들, 더 큰 소리, 등)로 지원할 수 있다

페이지를 확대, 축소할 때, 사용도구들은 위치된(positioned) 엘레멘트들사이의 관계를 유지하여야 한다. 예를 들어, 코믹(comic) 스크립트가 텍스트 엘레멘트들과 함께 이미지들이 구성될 수 있다. 이 페이지를 확대할 때, 사용도구는 그 comic 스크립트 풍선 안에 텍스트를 유지하여야 한다.


페이지 맨위로맨위Trio 홈페이지 문서()는 자유로이 연결 사용이 가능함.
(수정일 )