CSS3 사용자 인터페이스
CSS3는 크기 조정 요소를 설명하고, 상자 크기 조정 등의 새로운 사용자 인터페이스 기능을 가지고 있습니다.
이 장에서는 다음과 같은 사용자 인터페이스 속성에 대해 배우게됩니다 :
-
resize -
outline-offset
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
숫자는 다음 -webkit- 또는 -moz- 접두사와 함께 일 첫 번째 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| 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 |
CSS3 크기 조정
resize 속성 요소는 사용자가 크기를 조정할 것인지를 지정한다.
이 div 요소는 사용자 (크롬, 파이어 폭스, 사파리와 오페라에서 작동)로 크기를 조정할 수 있습니다.
다음 예는 사용자가의 폭 크기를 조정할 수 있습니다 <div> 요소를 :
다음의 예는 사용자가 단지 높이 크기를 수 <div> 요소 :
다음의 예는 사용자의 높이 및 폭 모두 크기를 수 <div> 요소 :
CSS3 개요 오프셋
outline-offset 속성은 요소의 개요 및 가장자리 또는 테두리 사이의 공간을 추가합니다.
개요는 세 가지 방법으로 국경과 다를 :
- 개요는 라인은 테두리 모서리 외부 요소 주위에 그려집니다
- 개요는 공간을 차지하지 않습니다
- 개요는 사각형이 아닌 수있다
이 사업부는 테두리 모서리 밖에 15 픽셀 윤곽을 보유하고 있습니다.
다음은 테두리와 윤곽 사이에 15 픽셀의 공간을 추가 윤곽 오프셋 속성을 사용하여
CSS3 사용자 인터페이스 속성
다음 표는 모든 사용자 인터페이스 등록 정보를 나열 :
| 재산 | 기술 |
|---|---|
| box-sizing | 당신은 요소의 전체 폭과 높이의 패딩과 국경을 포함 할 수 있도록 허용 |
| nav-down | 화살표 다운 네비게이션 키를 사용하는 경우 이동 위치를 지정 |
| nav-index | 요소의 탭 순서를 지정합니다 |
| nav-left | 화살표 왼쪽 방향키를 사용할 때 이동 위치를 지정 |
| nav-right | 화살표 오른쪽 탐색 키를 사용하는 경우 이동 위치를 지정합니다 |
| nav-up | 화살표해서 네비게이션 키를 사용하는 경우 이동 위치를 지정 |
| outline-offset | 요소의 개요 및 가장자리 또는 테두리 사이의 공간을 추가 |
| resize | 요소는 사용자가 크기를 조정할 수 있는지 여부를 지정합니다 |