CSS 입문 | CSS3 확장 | 사용자 인터페이스

사용자 인터페이스(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 속성

resize 속성은 사용자가 해당 요소의 높이나 너비를 변경할 수 있게 해준다.

<style>
    #width { resize: horizontal; }
    #height { resize: vertical; }
    #both { resize: both; }
</style>

위의 예제처럼 resize 속성이 설정된 요소에는 오른쪽 하단에 크기 조절 핸들이 생긴다.
이 핸들을 마우스로 드래그해서 사용자가 직접 요소의 크기를 조절할 수 있다.

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>

outline-offset 속성은 익스플로러에서 지원하지 않는다.

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

CSS3 사용자 인터페이스(user Interface) 속성