Skip to content

Commit 0d70d95

Browse files
ho0010ho0010
authored
Merge pull request #36 from Konkuk-KUIT/jisungs
[2주차] 당근마켓 화면1 미션
2 parents 37333ac + 693f447 commit 0d70d95

File tree

5 files changed

+928
-0
lines changed

5 files changed

+928
-0
lines changed

‎week2/jisung/danggn1.css

+201
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
/* Global Styles */
2+
button {
3+
background: none;
4+
border: none;
5+
padding: 0;
6+
cursor: pointer;
7+
outline: inherit;
8+
}
9+
10+
/* Daangn Styles */
11+
/* 헤더 */
12+
.home-header {
13+
display: flex;
14+
justify-content: space-between;
15+
align-items: center;
16+
padding: 12px 16px; /* 위아래 좌우 */
17+
box-sizing: border-box;
18+
border-bottom: 1px solid #eee;
19+
position: fixed;
20+
top: 0;
21+
width: 100%;
22+
/* position에 fixed속성을 주고 width를 명시하지 않으면 너비가 줄어듦... */
23+
/* position: fixed속성을 사용하면 요소가 viewport에서 상대적으로 위치하며,
24+
이때 부모 요소의 컨텍스트에서 벗어나므로 너비가 content에 맞춰 자동으로 결정됨
25+
따라서 부모의 너비에 맞추려면 width를 명시적으로 100%로 설정해야 함 */
26+
/* z-index: 1; */
27+
background-color: #fff;
28+
/*
29+
padding: 부모 요소에 적용해서 내부 여백을 설정하는 것이 일반적
30+
padding: 요소 내부의 content와 border 사이
31+
margin: 요소와 요소 사이 또는 요소와 부모 사이
32+
margin: 자식 요소에 적용해서 자식 요소가 다른 요소나 부모 요소와의 간격을 설정하는 것이 일반적
33+
*/
34+
35+
}
36+
37+
.home-header .header-location span {
38+
font-family: Inter;
39+
font-size: 18px;
40+
font-weight: 700;
41+
line-height: 28px;
42+
text-align: left;
43+
margin-right: 6px;
44+
}
45+
46+
.home-header .header-buttons {
47+
display: flex;
48+
gap: 16px;
49+
/* gap은 요소 사이에만 margin을 적용하므로 이럴 때 유용함
50+
만약 margin-right로 16px의 공백을 주면 가장 오른쪽 button에도 공백이 적용됨 */
51+
}
52+
53+
54+
/* 게시글 정보 */
55+
.home-body {
56+
display: flex;
57+
flex-direction: column;
58+
/* column으로 설정하면 home-body의 너비가 자동으로 width: 100%로 설정됨 */
59+
/* column이 아니라 row일 때는 자식 contents의 너비만큼 width가 설정됨 */
60+
margin-top: 53px;
61+
margin-bottom: 58px;
62+
}
63+
64+
.body-product {
65+
display: flex;
66+
/* product-img와 product-info가 가로로 배열됨 */
67+
padding: 16px;
68+
border-bottom: 1px solid #eee;
69+
/* 피그마처럼 양쪽이 끊긴 상태로 구현하려면 어떻게? */
70+
}
71+
72+
.post-button {
73+
display: flex;
74+
width: 100%;
75+
}
76+
77+
.body-product .product-img img {
78+
width: 110px;
79+
height: 110px;
80+
border-radius: 4px;
81+
}
82+
83+
.product-info {
84+
display: flex;
85+
flex-direction: column;
86+
/* product-content와 product-commentsAndLikes가 세로로 배열됨 */
87+
width: 100%;
88+
/* justify-content: space-between; */
89+
/* product-content와 product-commentsAndLikes 사이에 공백 생성 */
90+
padding-left: 16px;
91+
padding-top: 2px;
92+
gap: 27px; /* product-img를 button으로 감싸니까 product-info의 justify-content가 안먹혀서 gap으로 명시적으로 간격 띄움 */
93+
}
94+
95+
.product-info .product-content {
96+
display: flex;
97+
flex-direction: column;
98+
gap: 4px;
99+
}
100+
101+
.product-content .product-title {
102+
font-family: Inter;
103+
font-size: 16px;
104+
font-weight: 400;
105+
line-height: 20px;
106+
text-align: left;
107+
}
108+
109+
.product-content .product-locationAndUpdatedTime {
110+
font-family: Inter;
111+
font-size: 12px;
112+
font-weight: 400;
113+
line-height: 16px;
114+
text-align: left;
115+
color: #8C8C8C;
116+
}
117+
118+
.product-content .product-price {
119+
font-family: Inter;
120+
font-size: 15px;
121+
font-weight: 700;
122+
line-height: 22px;
123+
text-align: left;
124+
color: #FF7E36;
125+
}
126+
127+
.product-info .product-commentsAndLikes {
128+
display: flex;
129+
justify-content: flex-end;
130+
align-items: center;
131+
gap: 4px;
132+
}
133+
134+
.product-commentsAndLikes img {
135+
width: 16px;
136+
height: 16px;
137+
}
138+
139+
.product-commentsAndLikes span {
140+
font-family: Inter;
141+
font-size: 12px;
142+
font-weight: 400;
143+
line-height: 16px;
144+
text-align: left;
145+
color: #8C8C8C
146+
}
147+
148+
.product-postInfo {
149+
display: flex;
150+
align-items: center;
151+
gap: 2px;
152+
}
153+
154+
/* 게시글 추가 버튼 */
155+
.home-addPostButton {
156+
position: fixed;
157+
right: 18px;
158+
bottom: 90px;
159+
}
160+
161+
.home-addPostButton .orangeCircleButton {
162+
width: 48px;
163+
height: 48px;
164+
background-color: #FF7E36;
165+
border-radius: 100%;
166+
padding-top: 2px;
167+
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
168+
}
169+
170+
/* 하단 탭 바 */
171+
.home-footer {
172+
display: flex;
173+
justify-content: space-between;
174+
position: fixed;
175+
bottom: 0;
176+
width: 100%;
177+
background-color: #fff;
178+
border-top: 1px solid #eee;
179+
padding: 8px 0px;
180+
}
181+
182+
.home-footer .footer-tabButton {
183+
align-items: center;
184+
padding: 0px 27px;
185+
height: 42px;
186+
}
187+
188+
.home-footer .footer-tabButton button {
189+
display: flex;
190+
flex-direction: column;
191+
align-items: center; /* 수직 방향 중앙 정렬 */
192+
justify-content: center; /* 수평 방향 중앙 정렬 */
193+
}
194+
195+
.footer-tabButton button span {
196+
font-family: Inter;
197+
font-size: 10px;
198+
font-weight: 400;
199+
line-height: 14px;
200+
text-align: left;
201+
}

0 commit comments

Comments
 (0)