Skip to content

Commit a521c89

Browse files
jeonghwan-kimjeonghwan-kim
committed
html, css로 ui 만들기
0 parents  commit a521c89

File tree

2 files changed

+150
-0
lines changed

2 files changed

+150
-0
lines changed

‎css/style.css

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
*, html, body {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
body {
6+
background-color: rgb(81, 152, 57);
7+
font-size: 12px;
8+
}
9+
a {
10+
color: white;
11+
}
12+
ul {
13+
list-style: none;
14+
padding: 0;
15+
margin: 0 8px;
16+
}
17+
header {
18+
background-color: rgba(0,0,0,.15);
19+
line-height: 44px;
20+
height: 44px;
21+
text-align: center;
22+
margin-bottom: 8px;
23+
}
24+
header .title {
25+
color: rgba(255, 255, 255, .5);
26+
}
27+
nav {
28+
margin-bottom: 8px;
29+
text-align: right;
30+
}
31+
.container {
32+
margin: 0 8px;
33+
}
34+
.board {
35+
background-color: #E2E4E6;
36+
width: 270px;
37+
border-radius: 4px;
38+
display: inline-block;
39+
margin-right: 8px;
40+
}
41+
.board .title {
42+
font-size: 140%;
43+
margin: 0 8px;
44+
padding: 8px 0;
45+
color: rgb(77, 77, 77);
46+
}
47+
.card-list {
48+
margin-bottom: 8px;
49+
}
50+
.card {
51+
background-color: white;
52+
border-radius: 4px;
53+
padding: 6px;
54+
}
55+
.card-title {
56+
font-size: 120%;
57+
}
58+
.label {
59+
width: 42px;
60+
height: 8px;
61+
border-radius: 3px;
62+
display: inline-block;
63+
}
64+
.label-green {
65+
background-color: #61BD4F;
66+
}
67+
.comment {
68+
color: #8c8c8c;
69+
}
70+
.add-card {
71+
margin: 0 8px;
72+
padding-bottom: 8px;
73+
}
74+
.add-card a {
75+
color: rgb(140, 140, 140);
76+
}

‎index.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
<head>
4+
<title>Trelno</title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link href="css/style.css" rel="stylesheet">
8+
</head>
9+
<body>
10+
<header>
11+
<div class="container">
12+
<h1 class="title">Trelno</h1>
13+
</div>
14+
</header>
15+
<div class="container">
16+
<nav><a href="#" >Show Menu</a></nav>
17+
<section>
18+
<div class="board">
19+
<h2 class="title">To Do</h2>
20+
<ul class="card-list">
21+
<li class="card">
22+
<div class="label-list">
23+
<span class="label label-green">&nbsp;</span>
24+
</div>
25+
<div class="card-title">계획 세우기</div>
26+
<div class="comment">
27+
<span class="comment-count">1</span>
28+
</div>
29+
</li>
30+
</ul>
31+
<div class="add-card">
32+
<a href="#" class="add-card-link">Add a card...</a>
33+
</div>
34+
</div>
35+
36+
<div class="board">
37+
<h2 class="title">Doing</h2>
38+
<ul class="card-list">
39+
<li class="card">
40+
<div class="label-list">
41+
<span class="label label-green">&nbsp;</span>
42+
</div>
43+
<div class="card-title">계획 세우기</div>
44+
<div class="comment">
45+
<span class="comment-count">1</span>
46+
</div>
47+
</li>
48+
</ul>
49+
<div class="add-card">
50+
<a href="#" class="add-card-link">Add a card...</a>
51+
</div>
52+
</div>
53+
54+
<div class="board">
55+
<h2 class="title">Done</h2>
56+
<ul class="card-list">
57+
<li class="card">
58+
<div class="label-list">
59+
<span class="label label-green">&nbsp;</span>
60+
</div>
61+
<div class="card-title">계획 세우기</div>
62+
<div class="comment">
63+
<span class="comment-count">1</span>
64+
</div>
65+
</li>
66+
</ul>
67+
<div class="add-card">
68+
<a href="#" class="add-card-link">Add a card...</a>
69+
</div>
70+
</div>
71+
</section>
72+
</div>
73+
</body>
74+
</html>

0 commit comments

Comments
 (0)