-
Notifications
You must be signed in to change notification settings - Fork 0
/
작업툴.html
125 lines (90 loc) · 5.85 KB
/
작업툴.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>작업툴</title>
<h1>작업툴 소개</h1>
<p class="maintitle">사용된 작업툴 LIST</p>
<style>
@font-face {
font-family: 'SDSamliphopangche_Outline';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/SDSamliphopangche_Outline.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.maintitle {
color: #94cfda;
font-size: 1.5rem;
font-family: 'SDSamliphopangche_Outline';
margin: 1.5rem 0 0.5rem 0;
}
body {
background-color: white;
max-width: 1200px;
width: 100vw;
margin: 0 auto;
}
.container {
display: flex;
background-color: white;
height: 300px;
}
.box {
margin-top: 70px;
margin: 10px;
padding: 15px 10px 10px 15px;
width: 500px;
height: 150;
border: 2px solid #94cfda;
border-radius: 10px;
background-color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" version="1.1" viewBox="0 0 32 32"
height="60px" width="60px" xmlns="http://www.w3.org/2000/svg">
<path
d="M4.665 3.411l2.063 23.176 9.258 2.574 9.284-2.578 2.065-23.172h-22.671zM8.951 8.911l-0.068-0.763h7.107v2.842h-4.005l0.259 2.911h3.746v2.842h-6.341l-0.698-7.833zM22.518 14.665l-0.667 7.483-0.043 0.48-5.822 1.616-5.814-1.616-0.398-4.463h2.849l0.202 2.267 3.163 0.854 3.165-0.856 0.329-3.686h-3.485v-2.842h6.587l-0.069 0.763zM23.032 8.911l-0.129 1.441-0.057 0.639h-6.846v-2.842h7.1l-0.068 0.762z">
</path>
</svg>
<h3>HTML</h3>
<P>기본 골격을 제작하여 큰 틀(뼈대)을 만드는데 사용되었습니다.</P>
</div>
<div class="box">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" version="1.1" viewBox="0 0 32 32"
height="60px" width="60px" xmlns="http://www.w3.org/2000/svg">
<path
d="M16.017 21.044v0zM4.743 3.519l2.049 22.981 9.194 2.552 9.22-2.556 2.051-22.977h-22.514zM23 8.775l-0.693 7.767h-0l-0.48 5.359-0.042 0.476-5.781 1.603-5.773-1.603-0.395-4.426h2.829l0.201 2.248 3.142 0.847 0.008-0.002 0.002-0 3.134-0.846 0.329-3.655-6.579 0-0.056-0.633-0.129-1.429-0.067-0.756 7.081-0 0.258-2.886h-10.786l-0.056-0.634-0.129-1.429-0.067-0.756h14.118l-0.068 0.756z">
</path>
</svg>
<h3>CSS</h3>
<P>html, bootstrap 으로 만든 큰 틀을 꾸밀 때 사용되었습니다.</P>
</div>
<div class="box">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" version="1.1" viewBox="0 0 32 32"
height="60px" width="60px" xmlns="http://www.w3.org/2000/svg">
<path
d="M24.81 6.334h-17.621c-1.391 0-2.517 1.114-2.517 2.488v7.464c0 5.495 4.508 9.951 10.069 9.951h2.518c5.561 0 10.069-4.456 10.069-9.951v-7.464c0-1.374-1.127-2.488-2.517-2.488zM16 22.506c-4.171 0-7.552-3.342-7.552-7.464v-3.732h3.776v3.732c0 2.061 1.69 3.732 3.776 3.732s3.775-1.671 3.775-3.732h3.776c0 4.122-3.381 7.464-7.552 7.464zM23.489 13.798l-3.65-0.933 0.881-3.608 3.713 0.933-0.944 3.607z">
</path>
</svg>
<h3>JQuery</h3>
<P>toggle 방식을 활용하여 overay에 사용하거나 message를 저장하였을 때 동작되도록 만들 때 사용되었습니다.</P>
</div>
<div class="box">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" version="1.1" viewBox="0 0 32 32"
height="60px" width="60px" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.171 4.999c-0.562 0.083-1.237 0.347-1.716 0.675-0.313 0.207-0.717 0.596-0.95 0.901-0.26 0.343-0.577 1.003-0.702 1.456l-0.106 0.377v15.727l0.106 0.377c0.124 0.453 0.441 1.113 0.702 1.456 0.49 0.641 1.245 1.181 2.003 1.426 0.626 0.2 0.313 0.192 8.486 0.192 8.177 0 7.864 0.008 8.486-0.196 0.762-0.245 1.516-0.781 2.003-1.422 0.26-0.347 0.581-1.007 0.705-1.456l0.102-0.377v-15.727l-0.106-0.377c-0.124-0.452-0.441-1.113-0.701-1.456-0.234-0.306-0.637-0.694-0.95-0.901-0.336-0.23-0.883-0.479-1.305-0.596l-0.37-0.102-7.732-0.004c-4.251-0.004-7.834 0.008-7.954 0.026zM18.709 9.159c1.192 0.196 2.006 0.588 2.538 1.222 0.226 0.268 0.49 0.8 0.6 1.196 0.068 0.26 0.079 0.407 0.083 1.056 0.004 0.683-0.004 0.784-0.083 1.052-0.23 0.8-0.732 1.414-1.543 1.89l-0.279 0.162 0.2 0.064c0.305 0.102 0.815 0.366 1.075 0.562 0.649 0.49 1.101 1.252 1.282 2.161 0.087 0.453 0.087 1.422-0.004 1.837-0.358 1.633-1.622 2.768-3.523 3.149-0.728 0.147-0.916 0.155-4.824 0.155h-3.82v-14.6l3.953 0.015c3.538 0.011 3.99 0.019 4.345 0.079zM13.655 13.277v1.72l1.822-0.015c1.709-0.019 1.837-0.023 2.112-0.098 0.86-0.234 1.233-0.728 1.233-1.633 0-0.694-0.245-1.143-0.777-1.407-0.471-0.234-0.981-0.283-2.983-0.287h-1.407v1.72zM13.655 19.176v2.003l1.991-0.015c2.237-0.015 2.312-0.023 2.863-0.29 0.634-0.309 0.916-0.815 0.916-1.641 0-1.063-0.422-1.652-1.395-1.946-0.275-0.087-0.328-0.087-2.327-0.102l-2.048-0.011v2.003z">
</path>
</svg>
<h3>BOOTSTRAP</h3>
<P>font에 주로 사용되며, 그 외 에도 message, message board 등에 사용되었습니다.</P>
</div>
</div>
</body>
</html>