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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<style type="text/css">
    
    #cat1 {
        width: 128px;
        transition-property: all;
        transition-duration: 2s;
    }
    
    #cat2, #cat3, #cat4, #cat5, #cat6 {
        transition-property: all;
        transition-duration: 2s;
        position: absolute;
        left: 200px;
        top: 0px;
    }
    
    
    .box {
        border: 1px solid gray;
        width: 50px; height: 50px;
        background-color: white;
        float: left;
        transition-property: all;
        transition-duration: 1s;
        margin: -1px;
    }
    
    .next {
        clear: both;
    }
    
</style>
 
<script type="text/javascript" src="../jQuery/ui/jquery.js"></script>
<script type="text/javascript">
    
    function test() {
        //$("#cat1").css("width", "500px");
        $("#cat1").css("transform", "translate(400px, 0px)");
        
        setTimeout(function() {
            $("#cat1").css("transform", "translate(0px, 0px)");        
        }, 1000); //역방향
    }
    
    
    /* 술취한 고양이 */
    function test2() {
        //0~1사이
        //alert(parseInt(Math.random() * 1000));
        
        setInterval(function() {
            
            for (var i=2; i<=6; i++) {
                var x = parseInt(Math.random() * screen.availWidth);//0~999
                var y = parseInt(Math.random() * screen.availHeight);//0~499            
                
                $("#cat" + i).css("left", x + "px");
                $("#cat" + i).css("top", y + "px");
            }
        }, 500);
        
    }
    
    $(document).ready(function() {
        $(".box").bind("mouseover", function() {
            if ($(event.srcElement).css("background-color") == "rgb(255, 255, 255)") {                    
                $(event.srcElement).css("background-color", "red");
            } else if ($(event.srcElement).css("background-color") == "rgb(255, 0, 0)") {                    
                $(event.srcElement).css("background-color", "yellow");
            }  else if ($(event.srcElement).css("background-color") == "rgb(255, 255, 0)") {                    
                $(event.srcElement).css("background-color", "white");
            }
            
            
        });
    });    
    
    
</script>
 
 
</head>
<body>
 
 
    <!-- ex09.htm -->
    
    
    
    <input type="button" value="테스트" onclick="test2();" />
    <hr />
    <img src="images/catty12.png" id="cat1" />
    <img src="images/catty14.png" id="cat2" />
    <img src="images/catty15.png" id="cat3" />
    <img src="images/catty16.png" id="cat4" />
    <img src="images/catty17.png" id="cat5" />
    <img src="images/catty18.png" id="cat6" />
 
 
    <hr />
    
    
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box next"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box next"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box next"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box next"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box next"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box next"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box next"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box next"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box next"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box next"></div>
    
    
    
</body>
</html>
cs


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

변형하기 예제2  (0) 2016.01.22
변형하기 예제  (0) 2016.01.22
변형하기 translate / scale / rotate / skew  (0) 2016.01.22
box 예제  (0) 2016.01.22
접기,펼치기 / 수치그래프 / 진행률 / 데이터리스트 / 캔버스 태그  (0) 2016.01.22


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
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<style type="text/css">
    #menu1, #menu2, #menu3 { width: 630px; height: 126px; }
    
    #menu1 {
        margin: 20px auto;
        transform: translate(0px, -120px);
    }
    
    #menu1 img, #menu2 img, #menu3 img {
        cursor: pointer;
        transition-property: transform;
        transition-duration: .5s;
    }
    
    #menu1 img:hover {
        transform: translate(0px, 100px);
    }
    
    #menu2 img:hover {
        transform: scale(1.2, 1.5);
    }
    
    #menu3 img:hover {
        transform: rotate(360deg);
    }
    
        
</style>
 
</head>
<body>
 
 
    <!-- ex08.htm -->
    
    
    
    <div id="menu1"><img src="images/rect_icon01.png" /><img src="images/rect_icon02.png" /><img src="images/rect_icon03.png" /><img src="images/rect_icon04.png" /><img src="images/rect_icon05.png" /></div><!-- 이미지 사이 공백 제거하기 위해 붙여쓴다 -->
    
    
    <hr />    
    <div id="menu2"><img src="images/rect_icon01.png" /><img src="images/rect_icon02.png" /><img src="images/rect_icon03.png" /><img src="images/rect_icon04.png" /><img src="images/rect_icon05.png" /></div>
    
    
    <hr />
    <div id="menu3"><img src="images/rect_icon01.png" /><img src="images/rect_icon02.png" /><img src="images/rect_icon03.png" /><img src="images/rect_icon04.png" /><img src="images/rect_icon05.png" /></div>
    
    
 
</body>
</html>
cs


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

배운거 적용시켜보기 예제  (0) 2016.01.22
변형하기 예제  (0) 2016.01.22
변형하기 translate / scale / rotate / skew  (0) 2016.01.22
box 예제  (0) 2016.01.22
접기,펼치기 / 수치그래프 / 진행률 / 데이터리스트 / 캔버스 태그  (0) 2016.01.22


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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    
    #box1, #box2 {
        border: 10px solid black;    width: 200px;     height: 200px;
        background-color: yellow;
    }
    
    #box1 {
        /* 
            transition
            : 속성 변화의 중간 과정을 보여준다. 
        */
        transition-property: width, height;
        transition-duration: 10s;
    }
    
    #box1:hover {
        width: 400px;
        height: 400px;
    }
    
    #box2 {
        transition-property: all; /* 모든 속성(*) */
        transition-duration: 0.5s;
    }
    
    #box2:hover {
        /* border: 0px; */
        background-color: red;
        border-radius: 80px;
    }
    
    
    
    #cat1 {
        position: relative;
        left: 0px; top: 0px;
        transtion-property: all;
        transition-duration: 2s;
    }
    
    #cat1:hover {
        left: 500px;
    }
    
    #cat2 {
        transtion-property: all;
        transition-duration: 2s;
    }
    
    #cat2:hover {
        transform: translate(500px, 0px);
    }
    
    
    
    #icon1 {
        transtion-property: all;
        transition-duration: 2s;
    }
    
    #icon1:hover {
        transform: rotate(36000deg);
    }
        
    #tbl1 tr:hover {
        transform: rotate(720deg);
    }
    
    #icon2:hover {
        transform: scale(2, 2);
    }
    
</style>
    
<link rel="stylesheet" type="text/css" href="../jQuery/ui/jquery-ui.css" />
<script type="text/javascript" src="../jQuery/ui/jquery.js"></script>
<script type="text/javascript" src="../jQuery/ui/jquery-ui.js"></script>
 
<script type="text/javascript">
    
    $(document).ready(function() {
        $("#cat3").draggable();
    });
 
</script>
 
 
</head>
<body>
        
        
    <!-- ex07.htm -->
        
        
    
    [ transition ]
    <div id="box1">상자1</div>
    <div id="box2">상자2</div>
    <img src="images/catty01.png" id="cat1" /><br />
    <img src="images/catty02.png" id="cat2" /><br />
    <img src="images/rect_icon01.png" id="icon1" /><br />
    
    <div style="width:126px; height:126px; border:1px solid black; overflow:hidden;">
        <img src="images/rect_icon02.png" id="icon2" /><br />
    </div>
    
        
    <div style="width:300px; height:150px; border:1px solid black; overflow:hidden;"> <!-- auto:스크롤바 -->
        <img src="images/cat02.jpg" id="cat3" />
    </div>
    
    
    
    <table id="tbl1" border="1" width="400">
        <tr>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
        </tr>
        <tr>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
        </tr>
        <tr>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
        </tr>
        <tr>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
        </tr>
        <tr>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
        </tr>
        <tr>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
        </tr>
        <tr>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
        </tr>
        <tr>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
        </tr>
        <tr>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
        </tr>
        <tr>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
        </tr>
        <tr>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
        </tr>
        <tr>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
        </tr>
        <tr>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
        </tr>
        <tr>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
        </tr>
        <tr>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
        </tr>
        <tr>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
        </tr>
        <tr>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
        </tr>
        <tr>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
        </tr>
        <tr>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
        </tr>
        <tr>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
            <td>테이블</td>
        </tr>
    </table>    
    
        
        
</body>
</html>
 
cs


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

배운거 적용시켜보기 예제  (0) 2016.01.22
변형하기 예제2  (0) 2016.01.22
변형하기 translate / scale / rotate / skew  (0) 2016.01.22
box 예제  (0) 2016.01.22
접기,펼치기 / 수치그래프 / 진행률 / 데이터리스트 / 캔버스 태그  (0) 2016.01.22


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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<style type="text/css">
    .box { border: 1px solid black; width: 150px; height: 150px; margin: 20px; }
    /*
        변형, Transform
        - 웹 요소의 위치를 옮기거나 크기를 조절하거나, 회저느 왜곡 시키는 작업
        
        1. translate : 위치 이동(position:relative;)
        2. scale     : 배율(확대, 축소)
        3. rotate     : 회전
        4. skew         : 비틀기
    */
    
    #box1 {
        /* transform: translate(100px, 100px); */
    }
    
    #box1:hover {
        transform: translate(0px, 10px);
    }
    
    #box2:hover {
        /* 0~1~N */
        transform: scale(2, 2);
    }
    /* 고양이 */
    #cat1:hover {
        transform: scale(-1, 1);
    }
    
    #cat2:hover {
        transform: rotate(-20deg);
    }
    
    #cat3:hover {
        transform: skew(30deg);
    }
    
    
    /* 가로메뉴 */
    #menu1 {
        padding: 0px;
        margin: 0px;
    }
    
    #menu1 li {
        padding: 0px;
        margin: 0px;
        
        border: 1px solid black;
        display: inline-block;
        width: 50px;
        font-size: 12px;
        height: 32px;
        text-align: center;
        padding-top: 10px;
        background-color: white;
    }
    
    #menu1 li:hover {
        /* transform: translate(0px, 10px); */
        /* transform: scale(1.3, 1.7); */
        transform: rotate(90deg);
    }
    
    
    
    /* 세로 메뉴 */
    #menu2 {
        padding: 0px;
        margin: 0px;
        margin-left: -60px; /* 메뉴숨기기 */
    }
    
    #menu2 li {
        padding: 0px;
        margin: -1px;
        
        border: 0px solid black;
        width: 50px;
        font-size: 12px;
        height: 75px;
        text-align: center;
        background-color: #ccc;
        padding-top: 15px;
        
        cursor: pointer;
    }
    
    #menu2 li:hover {
        transform: translate(35px, 0px);
    }
    
    #menu2 li:nth-child(1) { border-right: 15px solid red; }
    #menu2 li:nth-child(2) { border-right: 15px solid orange; }
    #menu2 li:nth-child(3) { border-right: 15px solid yellow; }
    #menu2 li:nth-child(4) { border-right: 15px solid orange; }
    #menu2 li:nth-child(5) { border-right: 15px solid red; }
        
    
    #test { width: 520px; }
 
</style>
 
<script type="text/javascript">
 
    function init() {
        //박스 100개
        var test = document.getElementById("test");
        
        for (var i=0; i<99; i++) {
            var div = document.createElement("div");
            div.style.width = "50px";
            div.style.height = "50px";
            div.style.border = "1px solid black";
            div.style.float = "left";
            div.onmouseover = function() {
                event.srcElement.style.transform = "rotate(15deg)";
            }
            div.onmouseout = function() {
                event.srcElement.style.transform = "rotate(0deg)";
            }
            
            test.appendChild(div);
        }
    }
 
</script>
 
</head>
<body onload="init();">
 
 
    <!-- ex06.htm -->
    
    
    
    [ 변형 ]<br />
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    <img src="images/catty01.png" id="cat1" />
    <br />
    <img src="images/catty02.png" id="cat2" />
    <br />
    <img src="images/catty03.png" id="cat3" />
    
    <hr />
    <ul id="menu1">
        <li>홈</li>
        <li>회원</li>
        <li>업무</li>
        <li>게시판</li>
        <li>비고</li>
    </ul>
    
    <br /><br /><br />
    
    <ul id="menu2">
        <li>홈</li>
        <li>회<br />원</li>
        <li>업<br />무</li>
        <li>게<br />시<br />판</li>
        <li>비<br />고</li>
    </ul>
    
    
    <br />
    <div id="test"></div>
    
    
    
    <br /><br /><br />
    
</body>
</html>
 
cs


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

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


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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
 
    <!-- ex03.htm -->
 
 
    
    <!-- 접기/펼치기 -->
    <details>
        <summary>이곳을 누르세요.</summary>
        <p>
            이곳은 처음엔 접혀있는 부분입니다. 이곳은 처음엔 접혀있는 부분입니다.
            이곳은 처음엔 접혀있는 부분입니다.이곳은 처음엔 접혀있는 부분입니다.
            이곳은 처음엔 접혀있는 부분입니다.이곳은 처음엔 접혀있는 부분입니다.
            이곳은 처음엔 접혀있는 부분입니다.이곳은 처음엔 접혀있는 부분입니다.
            이곳은 처음엔 접혀있는 부분입니다.이곳은 처음엔 접혀있는 부분입니다.
        </p>
    </details>
    <br /><br />
    
    
    <!-- 수치률 그래프 -->
    <meter></meter><br />
    <meter value="0.5"></meter><br />
    <meter value="35" min="0" max="100"></meter><br />
    <br /><br />
    
    
    <!-- 진행률 -->
    <progress></progress><br />
    <progress value="0.5"></progress><br />
    <progress value="65" min="0" max="100"></progress><br />
    <br /><br />
 
 
    <!-- 데이터 리스트 -->
    <input type="text" placeholder="이름 입력" list="list1" />
    <datalist id="list1">
        <option value="홍길동"></option>
        <option value="아무게"></option>
        <option value="하하하"></option>
        <option value="호호호"></option>
    </datalist>
    <br /><br />
    
    
    <!--
        캔버스, Canvas 
        - 그림 그리는 도화지(+도구)
        - 자바스크립트를 사용
        - GD, GDI, GDI+ (API.,)
    -->
    <canvas id="canv1" style="width:300px;height:300px;border:1px solid black;"></canvas>
    
    <script type="text/javascript">
        var cav1 = document.getElementById("canv1");
        var content = canv1.getContext("2d");
        context.fillStyle = "#FFFF00";
        context.fillRect(50, 50, 100, 100);
   </script>
    
    
    
    
 
</body>
</html>
cs


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

변형하기 예제  (0) 2016.01.22
변형하기 translate / scale / rotate / skew  (0) 2016.01.22
box 예제  (0) 2016.01.22
시간태그 <time> / <form> 태그  (0) 2016.01.22
html5란 / semantic 태그  (0) 2016.01.22


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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script type="text/javascript">
 
    function test() {
        document.getElementById("rangeValue").innerText = event.srcElement.value;
    }
    
    function test2() {
        //alert(event.srcElement.value);
        document.body.style.backgroundColor = event.srcElement.value; //배경색설정
    }
 
</script>
 
</head>
<body>
 
    
    <!-- ex02.htm -->
    
    
    
    <!--
     
        <time> 태그
        - 날짜/시간
        - 표현이 아닌 데이터(의미)로서의 역할
        
    -->
    
    현재 시간은 <span class="time">5:30</span> 입니다.<br />
    현재 시간은 <time>5:30</time> 입니다.<br />
    현재 시간은 <time datetime="5:30">5시 30분</time>입니다.<br />
    지난번 모임은 <time datetime="2015-02-07">그저께</time> 가졌습니다.<br />
    다음 모임은 <time datetime="2015-02-12t13:30:00">3일뒤 오후</time>로 하겠습니다.
    
    
    <hr />
    
    <!-- 
    
        <form> 관련 태그
        - required : 필수값 검사
        
    -->
    
    <form>
        검색 : <input type="text" size="50" placeholder="이곳에 검색어를 입력하세요." />
        <br /><br />
        암호 : <input type="password" placeholder="암호 입력" />
        <br /><br />
        
        <!-- 의미만  -->
        전화번호 : <input type="tel" />
        <br /><br />
        
        <!-- URL형식만 입력 가능, 장치에 따라 키보드 설정 달라짐 -->
        URL : <input type="url" />
        <br /><br />
        
        <!-- 이메일 -->
        이메일 : <input type="email" />
        <br /><br />
        
        <!-- 숫자 -->
        숫자 : <input type="number" />
        숫자 : <input type="number" min="0" max="10" />
        숫자 : <input type="number" min="0" max="10" step="2" />
        <br /><br />
        
        <!-- 범위 -->
        범위 : <input type="range" onchange="test();" min="0" max="300" step="30" /><span id="rangeValue"></span>
        <br /><br />
        
        <!-- 색상 -->
        색상 : <input type="color" onchange="test2();" />
        <br /><br />
        
        <!-- 날짜/시간 -->
        날짜 : <input type="datetime" /><br />
        날짜 : <input type="date" /><br />
        날짜 : <input type="month" /><br />
        날짜 : <input type="week" /><br />
        날짜 : <input type="time" /><br />
        
        
        <input type="submit" value="테스트" />
    </form>
    
    
    
 
</body>
</html>
cs


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

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


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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<style type="text/css">
    
    body>header {
        border: 10px solid red;
        width: 800px;
        margin: 0px auto;
    }
    
    body>nav {
        border: 10px solid yellow;
        width: 150px;
        height: 400px;
        
        float: left;
    }
    
    body>section {
        border: 10px solid blue;
        width: 630px;
        min-height: 400px;
        height: 400px;
        
        float: left;
    }
    
    body>footer {
        border: 10px solid orange;
        width: 800px;
        height: 100px;
        
        clear: both; /* float 속성 끊기 */
    }
    
    article>header {
        background-color: yellow;
    }
    
    article>section {
        background-color: skyblue;
    }
    
    
    
</style>
 
</head>
<body>
 
 
    <!-- ex01_semantic.htm -->
 
 
 
    <!-- 
    
        HTML5
        - http://html5test.com
        - 브라우저들이 지원 중.,(일부 태그 표준화 진행 중.,)
        
        HTML5 = HTML 4.01 + 추가 태그
        HTML5 = HTML5 + CSS3 + Javascript
    
        
        semantic 태그
        
        
    -->
 
 
 
    <!-- 
        레이아웃 구성.,
        1. 상단 : 주메뉴
        2. 중간 좌측 : 서브메뉴
        3. 중간 우측 : 컨텐츠
        4. 하단 : 기업정보, 저작권.,
    -->    
 
    <!-- 
    <div id="menu">주메뉴</div>
    <div id="sub">서브메뉴</div>
    <div id="cpntent">메인</div>
    <div id="footer">회사정보</div> 
    -->
 
    <!--  
    
        Semantic 태그
        
        1. <header> 태그
        - 머릿말
        - 문서의 상단 부분(페이지마다 공통으로 들어가는 부분)
        - 메뉴, 사이트 로고, 검색창(네이버 등) 등.,
        - <div id="header"></div>
        
        2. <nav> 태그
        - 네비게이션 역할
        - 주메뉴, 서브메뉴, 기타 메뉴 등., 
        
        3. <section> 태그
        - 전체 컨텐츠 영역
        - <header>, <footer> 태그와 동급
        - 페이지가 전달하려는 내용의 출력 영역
        
        4. <article> 태그
        - 실제 컨텐츠를 구분하기 위한 영역
        - 출력 내용끼리 구분해서 묶는 역할(컨텐츠끼리)
        
        5. <aside> 태그
        - 페이지의 주 내용과는 상관없는 부가적인 내용
        
        6. <footer> 태그
        - 하단 부분
        - 회사 정보,
        
    -->
    
    <header>
        <nav>주메뉴</nav>
        <h1>사이트 로고</h1>
    </header>
    <nav>서브메뉴</nav>
    <section>
        <article>
            <header>
                <h2>포스트 제목</h2>
                <nav>포소트 내의 소메뉴</nav>
            </header>
            <section>
                출력 내용
            </section>
        </article>
        <article>
            <header>
                <h2>포스트 제목</h2>
                <nav>포소트 내의 소메뉴</nav>
            </header>
            <section>
                출력 내용
            </section>
        </article>
        <article>
            <header>
                <h2>포스트 제목</h2>
                <nav>포소트 내의 소메뉴</nav>
            </header>
            <section>
                출력 내용
            </section>
        </article>
        <aside>사이드 내용</aside>
    </section>
    
    <footer>
        하단 부분.,
    </footer>
    
 
 
</body>
</html>
cs


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

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

+ Recent posts

티스토리툴바