웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)

User Interface 본문

css3

User Interface

jokack01 2013. 10. 8. 13:48

User Interface

사용자들이 컴퓨터 시스템 또는 프로그램에서 데이터 입력이나 동작을 제어하기 위하여 사용하는 명령 또는 기법을 말하는데 

css3에서는 resize, box-sizing, outline 등이 제공된다. 

  

 

Resize:

박스 크기를 사용자가 직접 드래그앤 드롭하여 크기를 조절 할 수 있다. 

기존에는 자바스크립트 등으로 처리 해야 했는데 CSS3 만으로 아주 간단히 사용자가 조절 가능하게 되었다.

horizontal, vertical, both 값으로  가로, 세로 또는 양방향으로 조절 가능하다.

 

Resize : both;  양방향

Resize : vertical; 세로방향

Resize : horizontal; 가로방향

 

 

Box-sizing:

가변폭에서 box-sizing이 content-box로 계산되는 박스 모델에 floating layout을 양쪽에 비율에 맞춰 적용하는 것은 쉽지 않다.

border-box로 계산하게 되면 width 속성 값이 padding 영역과 border 영역을 모두 포함하게 되므로, 쉽게 적용 가능하다.

즉, width 값이 50%인 두 개 DIV를 나란히 놓고 싶은데 테두리를 지정하면 두 DIV의 전체 넓이가 100%를 넘어버려 하나가 아래로 내려가거나 혹은 layout 밖으로

삐져 나가게 되는데 이것이 조정 가능 하다는 말이다.

 

값을 content-box 나 border-box 로 지정해서 브라우져가 해당 element의 width, height 를 계산할 때 테두리를 포함해서 계산할지 말지를 정할 수 있다.

 

box-sizing: content-box ; 콘텐츠 영역만을 포함.

box-sizing: border-box ; width 속성값이 padding 영역과 border 영역을 모두 포함

  

 

Outline:

outline과 outline-offset 으로 border 바깥쪽에 테두리를 그릴 수 있다.

border 속성과 사용하는 방식은 유사하나 별개의 속성이며, Outline  표시만 될 뿐 영역을 차지 않는다.

outline-style : 아웃라인의 형식

outline-color : 아웃라인의 색상

outline-width : 아웃라인의 두께

Outline : 속기형 스타일 (단축 속성)

outline-offset : 아웃라인의 옵셋거리, 음수 지정도 가능 (단축속성에 포함 시킬 수 없다.)

 

 

ex1 ) resize
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>resize</title>
<style type="text/css">
div
{
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
overflow:auto;
}
p{color:red;}
</style>
</head>
<body>
<h1>resize</h1>
<p>
both: 양방향<br>
Vertical : 세로방향<br>
Horizontal : 가로방향<br>
</p>
<div> resize box </div>
</body>
</html>




ex2 ) box-sizing

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>box-sizing</title>
<style type="text/css">
div.container
{
width:30em;
border:5px solid blue;
}
div.oldContainer
{
width:30em;
border:5px solid blue;
margin:50px 0;
}
div.oldBox
{
width:50%;
border:1em solid yellow;
float:left;
}
div.box
{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
width:50%;
border:1em solid yellow;
float:left;
}
p{color:red;}
</style>
</head>
<body>
<h1>box-sizing</h1>
<p>
Border-box; 패딩과 보더 영역을 포함 <br>
Content-box; 컨텐츠 영역만 포함
</p>
<div class="container">
<div class="box">box-sizing 적용 예시</div>
<div class="box">box-sizing 적용 예시</div>
</div>
<br><br>
<div class="oldContainer">
<div class="oldBox">기존 예시</div>
<div class="oldBox">기존 예시</div>
</div>
</body>
</html>




ex3 ) outline 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>outline</title>
<style type="text/css">
div
{
margin:20px;
width:150px;
padding:10px;
height:70px;
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
p{color:red;}
</style>
</head>
<body>
<h1>outline</h1>
<div> 아웃라인 예시</div>
</body>
</html>

'css3' 카테고리의 다른 글

Color  (0) 2013.10.08
Multiple Columns  (0) 2013.10.08
Animation  (0) 2013.10.08
Transition  (0) 2013.10.08
3D transform  (0) 2013.10.08
'css3' Related Articles more