Skip to content

Commit b9d725d

Browse files
dlwnstjrzzdlwnstjrzz
committed
Design: "html 마크업 및 css 작성"
header와 main(컬럼) 기본 UI 및 메뉴바 구현 assets에 아이콘 및 유저이미지 파일 추가 Related to: #4
1 parent 17e5d4c commit b9d725d

File tree

15 files changed

+977
-1
lines changed

15 files changed

+977
-1
lines changed

‎client/src/assets/icon/closeIcon.png‎

205 Bytes
Loading

‎client/src/assets/icon/menuIcon.png‎

147 Bytes
Loading

‎client/src/assets/icon/plusIcon.png‎

192 Bytes
Loading

‎client/src/assets/imoge/user img.png‎

2.56 KB
Loading

‎client/src/index.html‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>TodoList</title>
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
12+
<link rel="stylesheet" href="./styles/css/main.css">
13+
</head>
14+
15+
<body>
16+
<header>
17+
<h1 class="title">TO-DO LIST</h1>
18+
<button class="menu-icon"><img src="./assets/icon/menuIcon.png" alt=""></button>
19+
<div class="menu-bar">
20+
<button class="close-icon"><img src="./assets/icon/closeIcon.png" alt=""></button>
21+
<ul class="notification-list">
22+
<li>
23+
<div class="user-img"></div>
24+
<div class="user-action">
25+
<p class="user-name">@Jimmy</p>
26+
<p class="event-info">ㅎ하하ㅏㅎddddddㅏ</p>
27+
<p class="update-time">1분 전</p>
28+
</div>
29+
</li>
30+
<li>test2</li>
31+
<li>test3</li>
32+
<li>test4</li>
33+
</ul>
34+
</div>
35+
</header>
36+
37+
<main>
38+
<div class="column">
39+
<div class="column-header">
40+
<div>
41+
<h2 class="column-title">해야할 일</h2>
42+
<span class="item-count">2</span>
43+
</div>
44+
<div>
45+
<button class="plus-icon"><img src="./assets/icon/plusIcon.png" alt=""></button>
46+
<button class="close-icon"><img src="./assets/icon/closeIcon.png" alt=""></button>
47+
</div>
48+
</div>
49+
<ul class="column-list">
50+
<li class="list_item">
51+
<div class="item-info">
52+
<h3 class="item-title">Github 공부하기</h3>
53+
<p class="item-content">본문</p>
54+
<p class="item-caption">주석</p>
55+
</div>
56+
<button class="close-icon"><img src="./assets/icon/closeIcon.png" alt=""></button>
57+
</li>
58+
</ul>
59+
</div>
60+
<div class="column">
61+
<div class="column-header">
62+
<div>
63+
<h2 class="column-title">해야할 일</h2>
64+
<span class="item-count">2</span>
65+
</div>
66+
<div>
67+
<button class="plus-icon"><img src="./assets/icon/plusIcon.png" alt=""></button>
68+
<button class="close-icon"><img src="./assets/icon/closeIcon.png" alt=""></button>
69+
</div>
70+
</div>
71+
<ul class="column-list">
72+
<li class="list_item">
73+
<div class="item-info">
74+
<h3 class="item-title">Github 공부하기</h3>
75+
<p class="item-content">본문</p>
76+
<p class="item-caption">주석</p>
77+
</div>
78+
<button class="close-icon"><img src="./assets/icon/closeIcon.png" alt=""></button>
79+
</li>
80+
<li class="list_item">
81+
<div class="item-info">
82+
<h3 class="item-title">Github 공부하기</h3>
83+
<p class="item-content">본문</p>
84+
<p class="item-caption">주석</p>
85+
</div>
86+
<button class="close-icon"><img src="./assets/icon/closeIcon.png" alt=""></button>
87+
</li>
88+
</ul>
89+
</div>
90+
</main>
91+
</body>
92+
93+
</html>

‎client/src/styles/_variables.scss‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// color
2+
$backbround-color: #f5f5f7;
3+
$white-color: #fff;
4+
$black-color: #000;
5+
6+
$red-color: #ff4343;
7+
$white-red-color: #ffeeec;
8+
9+
$blue-color: #0075de;
10+
$darkblue-color: #00529b;
11+
$lightblue-color: #86c6ff;
12+
13+
$gray3-color: #828282;
14+
$gray4-color: #bdbdbd;
15+
$gray5-color: #e0e0e0;
16+
17+
// font
18+
$font-size-12: 12px;
19+
$font-size-14: 14px;
20+
$font-size-16: 16px;
21+
$font-size-18: 18px;

‎client/src/styles/body/_body.scss‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
$margin: 16px;
2+
$list-width: 308px;
3+
4+
main {
5+
display: flex;
6+
background-color: $backbround-color;
7+
}
8+
9+
.column {
10+
position: absolute;
11+
display: flex;
12+
flex-direction: column;
13+
width: $list-width;
14+
margin-right: $margin;
15+
left: 80px;
16+
top: 136px;
17+
}
18+
19+
.column-header {
20+
display: flex;
21+
justify-content: space-between;
22+
width: 100%;
23+
24+
.column-title {
25+
display: inline-block;
26+
margin-bottom: $margin;
27+
padding: 0 16px;
28+
font-weight: 700;
29+
font-size: $font-size-18;
30+
line-height: 26px;
31+
}
32+
33+
.item-count {
34+
width: 26px;
35+
height: 26px;
36+
border-radius: 50%;
37+
}
38+
39+
.close-icon {
40+
color: $gray4-color;
41+
}
42+
}
43+
44+
.column-list {
45+
.list_item {
46+
display: flex;
47+
margin-bottom: $margin;
48+
padding: 16px;
49+
border-radius: 6px;
50+
background-color: $white-color;
51+
box-shadow: 0px 1px 30px rgba(224, 224, 224, 0.3);
52+
}
53+
54+
.item-info {
55+
width: 252px;
56+
57+
.item-title {
58+
margin-bottom: $margin / 2;
59+
font-size: $font-size-16;
60+
font-weight: 700;
61+
line-height: 23px;
62+
}
63+
64+
.item-content {
65+
margin-bottom: $margin / 2;
66+
font-size: $font-size-14;
67+
line-height: 20px;
68+
}
69+
70+
.item-caption {
71+
font-size: $font-size-12;
72+
line-height: 17px;
73+
color: $gray4-color;
74+
}
75+
76+
.close-icon {
77+
width: 10px;
78+
height: 10px;
79+
background-color: $gray5-color;
80+
}
81+
}
82+
}

‎client/src/styles/common.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// %basic_button_info {
2+
// }
3+
4+
/* button */

‎client/src/styles/css/common.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* button */

0 commit comments

Comments
 (0)