CSS3 사용자 인터페이스
CSS3에는 요소 크기, 상자 크기 및 외부 테두리를 조정하기 위한 몇 가지 새로운 사용자 인터페이스 기능이 추가되었습니다.
이 장에서는 다음 사용자 인터페이스 속성에 대해 알아봅니다.
resize
box-sizing
outline-offset
표의 숫자는 지원을 나타냅니다. 이 속성의 첫 번째 브라우저 버전 번호입니다.
-webkit-, -ms- 또는 -moz- 바로 앞의 숫자는 이 접두사 속성을 지원하는 첫 번째 브라우저 버전 번호입니다.
|
CSS3 Resizing
CSS3에서 resize 속성은 사용자가 요소의 크기를 조정해야 하는지 여부를 지정합니다.
이 div 요소는 사용자가 크기를 조정합니다. (Firefox 4+, Chrome 및 Safari)
CSS 코드는 다음과 같습니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
overflow:auto;
}
</style>
</head>
<body>
<p><b>注意:</b> Firefox, Safari,和 Chrome 兼容 resize 属性.</p>
<div>调整属性指定一个元素是否由用户可调整大小的。.</div>
</body>
</html>온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요
CSS3 상자 크기 상자 크기 조정
상자 크기 조정 속성을 사용하면 콘텐츠가 특정 영역에 어떻게 맞는지 정확하게 정의할 수 있습니다.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">这个div占据了左边的一半。.</div>
<div class="box">这个div占据了右边的一半。</div>
</div>
</body>
</html>온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요
CSS3 외곽선 수정(개요-오프셋)
outline-offset 속성은 외곽선을 오프셋하고 그립니다. 테두리 가장자리 너머의 윤곽선.
윤곽선은 두 가지 측면에서 테두리와 다릅니다.
윤곽선은 공간을 차지하지 않습니다.
윤곽선은 직사각형이 아닐 수 있습니다.
이 div에는 테두리 바깥쪽에 15픽셀의 윤곽선이 있습니다. Ccss 코드는 다음과 같습니다.
인스턴스 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
margin:20px;
width:150px;
padding:10px;
height:70px;
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 不兼容 outline-offset属性.</p>
<div>这个 div有一个轮廓边界15 px边境外的边缘。</div>
</body>
</html>
»
"예제 실행" 버튼을 클릭하면 온라인 인스턴스를 볼 수 있습니다 | | CSS |
|---|
appearance | 를 사용하면 요소를 표준 UI 요소처럼 보이게 만들 수 있습니다. | 3 |
box-sizing | 을 사용하면 영역에 맞게 특정 방식으로 무언가를 정의할 수 있습니다. 요소 | 3 |
아이콘 | 제작자에게 아이콘에 해당하는 요소를 설정할 수 있는 기능을 제공합니다. 3 | nav-left | 왼쪽 화살표 탐색 키를 사용하여 탐색할 위치 지정
3 | | nav-right | 오른쪽 화살표 탐색 키를 사용하여 탐색할 위치 지정
3 | | nav-up | 위쪽 화살표 탐색 키를 사용할 때 탐색할 위치를 지정하세요
3 | | outline-offset | 윤곽선 수정 및 테두리 너머의 가장자리 그리기
3 | | resize | 요소 크기 조정 여부 지정 사용자
3 | | |
