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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
        
    /* 
        text-shadow, box-shadow
        : h-shadow v-shadow blur color;
    */
    
    #txt1 {
        text-shadow: 1px 1px 1px black;
    }
    
    #txt2 {
        text-shadow: 0px -1px 1px yellow;
    }
    
    #txt3 {
        text-shadow: 1px 1px 5px gray;
    }
    
    #txt4 {
        background-color: gray;
        text-shadow: 1px 1px 1px white;
    }
    
    
    #box1, #box2, #box3 {
        border: 1px solid black;
        width: 100px; height: 100px;
        background-color: white;
        margin: 20px;
    }
    
    #box1 {
        box-shadow: 1px 1px 1px gray;
    }
    
    #box2 {
        box-shadow: 2px 2px 3px gray;
    }
    
    #box3 {
        border: 1px solid white;
        box-shadow: 2px 2px 1px gray;
    }
        
</style>
</head>
<body>
 
 
    <!-- ex04.htm -->
 
 
 
    <div id="txt1">HTML5 + CSS3</div>
    <div id="txt2">HTML5 + CSS3</div>
    <div id="txt3">HTML5 + CSS3</div>
    <div id="txt4">HTML5 + CSS3</div>
    <br /><br />
    
    
    <div id="box1">상자</div>
    <div id="box2">상자</div>
    <div id="box3">상자</div>
    
    
    
 
</body>
</html>
cs


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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    
    
    /* 배경 이미지 관련 */
    div { border: 1px solid black; width: 200px; height: 200px; margin: 20px; 
        float: left; background-image: url(images/main.png); }
    
    #box1 {
        background-repeat: no-repeat;
        background-position: center center; 
    }
    
    #box2 {
        background-size: 100px 100px; /* 너비, 높이 */
    }
    
    #box3 {
        background-size: 100px; /* 너비 */
    }
    
    #box4 {
        /* 배경 이미지의 더 긴 축이 영역에 100%로 적용 */
        background-size: contain;
    }
    
    #box5 {
        /* 배경 이미지의 더 짧은 축이 영역의 100%로 적용 */
        background-size: cover;
    }
    
    #box6 {
        width: 300px;
        background-image: url(images/wall09.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
    }
    
    
    /* 배경색 관련 */
    #box11, #box12, #box13, #box14, #box15 { background-image: url(); }
    
    #box11 {
        
        /* 
            표준화되지 않은 일부 속성을 표현하는 방법
            -> 벤더프리픽스 제공(브라우저별로 속성을 인식하는 접두어)
            
            Vender Prefix
            1. Chrome, Safari : -webkit-
            2. FireFox : -moz-
            3. Opera : -o-
            4. IE10 : -ms-
        */
        
        /* 선형 그레디언트 */
        /* linear-gradient(각도, 색상A, 색상B) */
        background: -webkit-linear-gradient(45deg, red, blue);
        background: -moz-linear-gradient(45deg, red, blue);
        background: -o-linear-gradient(45deg, red, blue);
        background: -ms-linear-gradient(45deg, red, blue);
        background: linear-gradient(45deg, red, blue);
    }    
    
    #box12 {
        background: linear-gradient(to left, black, white);
    }
    
    #box13 {
        background: linear-gradient(90deg, red, orange, yellow, green, blue, darkblue, violet); /* color step  */
    }
    
    #box14 {
        /* radial-gradient(원중심, 형태, 생상A, 색상B); */
        background: -webkit-radial-gradient(center, circle, red, yellow);
    }
    
    #box15 {
        background: -webkit-radial-gradient(center, ellipse, yellow, red);
        background: -ms-radial-gradient(center, ellipse, yellow, red);
        height: 100px; 
    }
    
    
    /* 기타(모서리) */
    #box1 {
        /* 모서리 둥글게 */
        border-radius: 100px; 
    }
    
    #txt1 {
        border-radius: 10px;
        border: 1px solid gray;
            
        outline: none; /* 파란 테두리정리 */
        padding-left: 10px;
    }
    
    #box2 {
        border-radius: 50px;
    }
    
    #box3 {
        border-top-left-radius: 150px;
        border-bottom-right-radius: 200px;
    }
    
        
</style>
</head>
<body>
 
 
    <!-- ex05.htm -->
 
 
 
    <!-- <img src="images/main.png" /> -->
    <!-- div#box$*5 -->
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box4"></div>
    <div id="box5"></div>
    <div id="box6"></div>
 
 
    <hr style="clear:both" />
    <div id="box11"></div>
    <div id="box12"></div>
    <div id="box13"></div>
    <div id="box14"></div>
    <div id="box15"></div>
 
    
    <input type="text" id="txt1" /><br />
    
 
</body>
</html>
cs


'WEB > HTML5' 카테고리의 다른 글

변형하기 예제  (0) 2016.01.22
변형하기 translate / scale / rotate / skew  (0) 2016.01.22
접기,펼치기 / 수치그래프 / 진행률 / 데이터리스트 / 캔버스 태그  (0) 2016.01.22
시간태그 <time> / <form> 태그  (0) 2016.01.22
html5란 / semantic 태그  (0) 2016.01.22

+ Recent posts

티스토리툴바