Skip to content

Commit c5014e7

Browse files
Turtle-HwanTurtle-Hwan
authored
Merge pull request #28 from Konkuk-KUIT/heeyong
[2주차] 당근마켓 화면1 미션
2 parents 6742122 + 0dbaddb commit c5014e7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+1980
-0
lines changed

‎week1/heeedragon/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,6 @@
1212
<div>MBTI : ESFJ</div>
1313
<div>하고 싶은 말 : 본격적으로 이렇게 개발을 해보는건 처음인데 열심히 잘 배워나가겠습니다~~</div>
1414
<div>하고 싶은 말2 : 한학기동안 잘부탁드립니다~~!</div>
15+
<div>dasdfasdfadsf</div>
1516
</body>
1617
</html>

‎week1/heeyong/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=devise-width, initial-scale=1.0" />
6+
<title>1주차 실습 : heeedragon 자기소개</title>
7+
</head>
8+
<body>
9+
<div>안녕하세요 김희용입니다!</div>
10+
<div>학과 : 스마트ICT융합공학과</div>
11+
<div>학년 : 3학년 1학기 재학중</div>
12+
<div>MBTI : ESFJ</div>
13+
<div>하고 싶은 말 : 본격적으로 이렇게 개발을 해보는건 처음인데 열심히 잘 배워나가겠습니다~~</div>
14+
<div>하고 싶은 말2 : 한학기동안 잘부탁드립니다~~!</div>
15+
<div>branch 확인용</div>
16+
</body>
17+
</html>

‎week2/heeedragon/daangn/기존 구현 파일/index.css

+288
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,288 @@
1+
/* global styles */
2+
button {
3+
background: none;
4+
border: none;
5+
padding: 0;
6+
cursor: pointer;
7+
outline: inherit;
8+
}
9+
10+
/*local*/
11+
.post-header {
12+
position: relative;
13+
}
14+
15+
.post-header header {
16+
width: 100%;
17+
justify-content: space-between;
18+
position: absolute;
19+
display: flex;
20+
padding: 14px 16px;
21+
box-sizing: border-box;
22+
}
23+
24+
.post-header .post-header__icon-container {
25+
display: flex;
26+
gap: 16px;
27+
align-items: center;
28+
}
29+
30+
.post-header .post__image-container .post__image {
31+
max-width: 100%;
32+
max-height: 100%;
33+
}
34+
35+
.post {
36+
padding: 0 16px;
37+
padding-bottom: 54px;
38+
}
39+
40+
/* post 바로 아래 계층까지만 적용 */
41+
.post>section {
42+
padding: 16px 0;
43+
border-bottom: 1px solid #eee;
44+
}
45+
46+
.post>section:last-child {
47+
padding: 16px 0;
48+
border-bottom: none;
49+
}
50+
51+
.post__header {
52+
display: flex;
53+
justify-content: space-between;
54+
align-items: center;
55+
}
56+
57+
.post__header .header__user {
58+
display: flex;
59+
align-items: center;
60+
gap: 8px;
61+
}
62+
63+
.header__user .user__profile-img {
64+
width: 40px;
65+
height: 40px;
66+
border-radius: 100%;
67+
}
68+
69+
.header__user .user__info {
70+
display: flex;
71+
flex-direction: column;
72+
}
73+
74+
.header__user .user__info .user__name {
75+
color: #000;
76+
font-family: Inter;
77+
font-size: 14px;
78+
font-style: normal;
79+
font-weight: 700;
80+
line-height: 18px;
81+
margin-bottom: 4px;
82+
}
83+
84+
.header__user .user__info .user__address {
85+
color: #4F4F4F;
86+
font-family: Inter;
87+
font-size: 12px;
88+
font-style: normal;
89+
font-weight: 400;
90+
line-height: 16px;
91+
}
92+
93+
.post__header .header__temperature {
94+
display: flex;
95+
flex-direction: column;
96+
align-items: flex-end;
97+
}
98+
99+
.header__temperature .temperature__desc {
100+
color: #8C8C8C;
101+
font-family: Inter;
102+
font-size: 10px;
103+
font-style: normal;
104+
font-weight: 400;
105+
line-height: 12px;
106+
/* 120% */
107+
text-decoration-line: underline;
108+
}
109+
110+
.header__temperature .temperature__container {
111+
display: flex;
112+
margin-bottom: 4px;
113+
align-items: center;
114+
}
115+
116+
.temperature__container .temperature__indicator {
117+
color: #8C8C8C;
118+
font-family: Inter;
119+
font-size: 10px;
120+
font-style: normal;
121+
font-weight: 400;
122+
line-height: 12px;
123+
margin-right: 4px;
124+
}
125+
126+
.temperature__indicator .temperature__bar {
127+
width: 100%;
128+
height: 2px;
129+
background-color: #d9d9d9;
130+
border-radius: 10px;
131+
132+
.temperature__bar--value {
133+
height: 2px;
134+
width: 37%;
135+
background-color: #4ac1db;
136+
border-radius: 10px;
137+
}
138+
}
139+
140+
.post__content .post__title {
141+
margin-bottom: 8px;
142+
color: #000;
143+
font-family: Inter;
144+
font-size: 18px;
145+
font-style: normal;
146+
font-weight: 700;
147+
line-height: 28px;
148+
}
149+
150+
.desc__container {
151+
display: flex;
152+
gap: 2px;
153+
154+
color: #8C8C8C;
155+
font-family: Inter;
156+
font-size: 12px;
157+
font-style: normal;
158+
font-weight: 400;
159+
line-height: 16px;
160+
161+
.desc--clickable {
162+
text-decoration-line: underline;
163+
display: flex;
164+
gap: 2px;
165+
166+
color: #8C8C8C;
167+
font-family: Inter;
168+
font-size: 12px;
169+
font-style: normal;
170+
font-weight: 400;
171+
line-height: 16px;
172+
}
173+
}
174+
175+
.post__content .post__text {
176+
margin: 16px 0;
177+
color: #000;
178+
font-family: Inter;
179+
font-size: 14px;
180+
font-style: normal;
181+
font-weight: 400;
182+
line-height: 18px;
183+
}
184+
185+
.post .section__header {
186+
display: flex;
187+
justify-content: space-between;
188+
align-items: center;
189+
width: 100%;
190+
191+
.section__title {
192+
color: #000;
193+
font-family: Inter;
194+
font-size: 14px;
195+
font-style: normal;
196+
font-weight: 700;
197+
line-height: 20px;
198+
}
199+
}
200+
201+
.post .products__grid {
202+
display: grid;
203+
grid-template-columns: 1fr 1fr;
204+
gap: 24px 16px;
205+
margin: 16px 0 8px;
206+
}
207+
208+
.product__container {
209+
display: flex;
210+
flex-direction: column;
211+
gap: 8px;
212+
}
213+
214+
.product__container .product__img {
215+
width: 100%;
216+
max-height: 118px;
217+
object-fit: cover;
218+
border-radius: 4px;
219+
}
220+
221+
.product__container .product__name {
222+
color: #000;
223+
font-family: Inter;
224+
font-size: 14px;
225+
font-style: normal;
226+
font-weight: 400;
227+
line-height: 18px;
228+
}
229+
230+
.product__price {
231+
color: #000;
232+
font-family: Inter;
233+
font-size: 14px;
234+
font-style: normal;
235+
font-weight: 700;
236+
line-height: 18px;
237+
}
238+
239+
.bottom-bar {
240+
display: flex;
241+
justify-content: space-between;
242+
position: fixed;
243+
bottom: 0;
244+
width: 100%;
245+
background-color: #fff;
246+
padding: 8px 16px 12px;
247+
border-top: 1px solid #d9d9d9;
248+
box-sizing: border-box;
249+
}
250+
251+
.bottom-bar .bar__chat-btn {
252+
border-radius: 4px;
253+
background-color: #ff7e36;
254+
padding: 8px 14px;
255+
color: var(--white, #FFF);
256+
font-family: Inter;
257+
font-size: 14px;
258+
font-style: normal;
259+
font-weight: 700;
260+
line-height: 18px;
261+
}
262+
263+
.bar__info-container {
264+
display: flex;
265+
justify-content: space-between;
266+
align-items: center;
267+
gap: 16px;
268+
269+
.divider {
270+
width: 1px;
271+
align-self: stretch;
272+
background-color: #eee;
273+
}
274+
}
275+
276+
.bar__info-container .bar__info {
277+
display: flex;
278+
flex-direction: column;
279+
280+
.product__desc {
281+
color: #8C8C8C;
282+
font-family: Inter;
283+
font-size: 12px;
284+
font-style: normal;
285+
font-weight: 700;
286+
line-height: 18px;
287+
}
288+
}

0 commit comments

Comments
 (0)