사용자 인터페이스
사용자 인터페이스(user interface, UI)
CSS3에서는 새로운 사용자 인터페이스를 이용하여, 사용자가 요소의 크기나 아웃라인 등을 마음대로 변경할 수 있게 해줍니다.
사용자 인터페이스(user interface)를 위해 제공되는 속성은 다음과 같습니다.
1. resize
2. outline-offset
3. box-sizing
4. nav-index
5. nav-left
6. nav-right
7. nav-up
8. nav-down
CSS3 사용자 인터페이스(user Interface) 지원 버전
CSS3 사용자 인터페이스(user Interface)를 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.
또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했습니다.
| 속성 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
|
resize |
지원하지 않음 |
4.0 |
5.0 4.0 -moz- |
4.0 |
15.0 |
| outline-offset | 지원하지 않음 | 4.0 |
5.0 4.0 -moz- |
4.0 | 9.5 |
| box-sizing | 8.0 |
10.0 4.0 -webkit- |
29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
resize 속성
resize 속성은 사용자가 해당 요소의 높이나 너비를 변경할 수 있게 해줍니다.
예제
<style>
#width { resize: horizontal; }
#height { resize: vertical; }
#both { resize: both; }
</style>
위의 예제처럼 resize 속성이 설정된 요소에는 오른쪽 하단에 크기 조절 핸들이 생깁니다.
이 핸들을 마우스로 드래그해서 사용자가 직접 요소의 크기를 조절할 수 있습니다.
outline-offset 속성
outline-offset 속성은 해당 요소의 테두리(border)와 아웃라인(outline) 사이에 공간(offset)을 추가해 줍니다.
아웃라인(outline)과 테두리(border)의 차이는 다음과 같습니다.
1. 아웃라인은 테두리의 바깥쪽에서 요소를 둘러싸고 있는 라인입니다.
2. 아웃라인은 HTML 요소의 크기에 포함되지 않습니다.
3. 아웃라인은 사각형이 아닐 수도 있습니다.
다음 예제는 outline-offset 속성을 이용하여 아웃라인과 테두리를 확인하는 예제입니다.
예제
<style>
div {
border: 1px solid black;
outline: 1px solid red;
outline-offset: 20px;
}
</style>
box-sizing 속성
box-sizing 속성은 해당 요소의 너비(width)와 높이(height)에 패딩(padding)과 테두리(border)의 크기까지 포함시킵니다.
예제
<style>
#no_border_box { border: 10px solid green; padding: 20px; }
#border_box { border: 10px solid red; padding: 20px; box-sizing: border-box; }
</style>
CSS 박스 모델에서 살펴본 HTML 요소의 전체 너비를 구하는 공식은 다음과 같습니다.
width + left padding + right padding + left border + right border + left margin + right margin
따라서 위의 예제에서 첫 번째 div 요소의 전체 너비는 다음과 같이 설정됩니다.
350px + 20px + 20px + 10px + 10px + 10px + 10px = 430px
하지만 box-sizing 속성의 속성값을 border-box로 설정하면, 해당 요소의 총 너비와 높이에 패딩과 테두리의 크기까지 포함해서 설정합니다.
따라서 위의 예제에서 두 번째 div 요소의 전체 너비는 다음과 같이 설정될 것입니다.
350px + 10px + 10px = 370px
HTML 요소의 높이와 너비 구하기에 대한 더 자세한 사항은 CSS 박스 모델 수업에서 확인할 수 있습니다.
CSS3 사용자 인터페이스(user Interface) 속성
| 속성 | 설명 |
|---|---|
| resize | 사용자가 해당 요소의 높이나 너비를 변경할 수 있게 설정함. |
| outline-offset | 해당 요소의 테두리(border)와 아웃라인(outline) 사이에 공간(offset)을 추가함. |
| box-sizing | 해당 요소의 총 너비와 높이에 패딩(padding)과 테두리(border)의 너비도 포함시킴. |
| nav-index | 해당 요소에 대한 순차적인 탐색 순서를 설정함. |
| nav-left | 화살표 왼쪽 방향키를 누를 때 어디를 탐색할지 설정함. |
| nav-right | 화살표 오른쪽 방향키를 누를 때 어디를 탐색할지 설정함. |
| nav-up | 화살표 위쪽 방향키를 누를 때 어디를 탐색할지 설정함. |
| nav-down | 화살표 아래쪽 방향키를 누를 때 어디를 탐색할지 설정함. |
