Skip to content

Commit 704288b

Browse files
addiescode-sjaddiescode-sj
authored
Merge pull request #125 from Sea0Soda/Basic-정해성-sprint3
[정해성] sprint3
2 parents 170c96e + 3b56e6c commit 704288b

File tree

6 files changed

+659
-63
lines changed

6 files changed

+659
-63
lines changed

‎.github/pull_request_template.md‎

Lines changed: 38 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,54 @@
22

33
### 기본
44

5-
- [x]
6-
- []
7-
- []
5+
- [x] Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
6+
- [x] 피그마 디자인에 맞게 페이지를 만들어 주세요.
7+
- [x] React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.
88

9-
### 심화
9+
### 체크리스트 [기본]
1010

11-
- [x]
12-
- []
11+
#### 공통
12+
13+
- [x] Viewport 너비 기준 반응형 디자인 적용
14+
- [x] PC: 1200px 이상
15+
- [x] Tablet: 768px 이상 ~ 1199px 이하
16+
- [x] Mobile: 375px 이상 ~ 767px 이하
17+
- [x] 375px 미만 사이즈는 고려하지 않음
18+
19+
#### 랜딩 페이지
20+
21+
- [x] Tablet: 로고 좌측 24px, 로그인 버튼 우측 24px 여백 유지
22+
- [x] Mobile: 로고 좌측 16px, 로그인 버튼 우측 16px 여백 유지
23+
- [x] 화면이 줄어들면 푸터 영역 간격이 줄어듦
24+
25+
#### 로그인 & 회원가입 페이지 공통
26+
27+
- [x] Tablet: PC 디자인 동일하게 유지
28+
- [x] Mobile: 좌우 여백 16px, 요소 최대 너비 400px 제한
29+
30+
### 체크리스트 [심화]
31+
32+
- [x] 랜딩 페이지에 Open Graph 메타 태그 적용
33+
- [ ] 제목: “판다 마켓”
34+
- [ ] 설명: “일상의 모든 물건을 거래해보세요”
35+
- [ ] 주소/이미지: 자유 설정
36+
37+
---
1338

1439
## 주요 변경사항
1540

16-
-
17-
-
41+
- 반응형 레이아웃 구현
42+
- 메타 태그 설정 (OG 태그)
43+
- 모바일 최적화 스타일링 반영
44+
45+
---
1846

1947
## 스크린샷
2048

2149
![image](이미지url)
2250

51+
---
52+
2353
## 멘토에게
2454

2555
-

‎index.html‎

Lines changed: 82 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -9,27 +9,30 @@
99
<body>
1010
<header>
1111
<div class="header-inner">
12-
<a class="logo" href="/" aria-label="홈페이지로 이동합니다">
13-
<img
14-
class="logo_img"
15-
src="./assets/icons/panda_logo.svg"
16-
alt="판다마켓 로고 이미지"
17-
/>
18-
<h1>판다마켓</h1>
19-
</a>
20-
<a class="login" href="/login">로그인</a>
21-
</div>
12+
<a class="logo" href="/" aria-label="홈페이지로 이동합니다">
13+
<img
14+
class="logo_img"
15+
src="./assets/icons/panda_logo.svg"
16+
alt="판다마켓 로고 이미지"
17+
/>
18+
<h1>판다마켓</h1>
19+
</a>
20+
<a class="login" href="/login">로그인</a>
21+
</div>
2222
</header>
2323
<div class="banner">
2424
<div class="banner-container">
2525
<div class="banner-content">
2626
<p class="banner-text">
27-
일상의 모든 물건을<br />
28-
거래해 보세요
27+
일상의 모든 물건을<br class="line-break-main" />거래해 보세요
2928
</p>
3029
<a href="href_link/item.html" class="button">구경하러 가기</a>
3130
</div>
32-
<img src="assets/images/banner.png" alt="판다마켓 상품 홍보 배너" />
31+
<img
32+
src="assets/images/banner.png"
33+
alt="판다마켓 상품 홍보 배너"
34+
class="first_banner_img"
35+
/>
3336
</div>
3437
</div>
3538
<div class="banner_2">
@@ -44,11 +47,12 @@ <h1>판다마켓</h1>
4447
<div class="banner-text-right">
4548
<div class="hot_logo">Hot Item</div>
4649
<div class="hot_main">
47-
인기 상품을<br />
50+
인기 상품을<span class="line-break"> <br /> </span>
4851
확인해 보세요
4952
</div>
5053
<div class="hot_footer">
51-
가장 HOT한 중고거래 물품을 판다 마켓에서 확인해 보세요
54+
가장 HOT한 중고거래 물품을 <br />
55+
판다 마켓에서 확인해 보세요
5256
</div>
5357
</div>
5458
</div>
@@ -58,7 +62,7 @@ <h1>판다마켓</h1>
5862
<div class="search-section">
5963
<div class="banner3-search">Search</div>
6064
<div class="banner3-main">
61-
구매를 원하는<br />
65+
구매를 원하는<span class="line-break"> <br /> </span>
6266
상품을 검색하세요
6367
</div>
6468
<div class="banner3-footer">
@@ -67,7 +71,11 @@ <h1>판다마켓</h1>
6771
</div>
6872
</div>
6973
<div class="banner3-right">
70-
<img src="assets/images/Img_home_02.png" alt="상품 검색 배너" />
74+
<img
75+
src="assets/images/Img_home_02.png"
76+
alt="상품 검색 배너"
77+
class="banner3_img"
78+
/>
7179
</div>
7280
</div>
7381
</div>
@@ -81,44 +89,79 @@ <h1>판다마켓</h1>
8189
<div class="register-section">
8290
Register
8391
<div class="banner4_main">
84-
판매를 원하는<br />
92+
판매를 원하는<span class="line-break"> <br /> </span>
8593
상품을 등록하세요
8694
</div>
8795
<div class="banner4_footer">
88-
어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요
96+
어떤 물건이든 판매하고 싶은 상품을<br />
97+
쉽게 등록하세요
8998
</div>
9099
</div>
91100
</div>
92101
</div>
93102
<div class="banner5">
94103
<div class="banner5_container">
95-
<div class="banner5_left">믿을 수 있는<br> 판다마켓 중고 거래</div>
96-
<img src="assets/images/Img_home_bottom.png" alt="팬더둘이 서로 손흔들며 소통하고있는 사진" />
104+
<div class="banner5_left">
105+
믿을 수 있는<br />
106+
판다마켓 중고 거래
97107
</div>
108+
<img
109+
src="assets/images/Img_home_bottom.png"
110+
alt="팬더둘이 서로 손흔들며 소통하고있는 사진"
111+
class="banner5_img"
112+
loading="lazy"
113+
/>
98114
</div>
99115
</div>
116+
100117
<footer>
101118
<div class="footer_container">
102119
<div class="footer_content">
103120
<span>©codeit - 2024</span>
104-
<div class="footer_center">
105-
<a class="privacy" href="href_link/privacy_policy.html">Privacy Policy</a>
106-
<a class="faq" href="href_link/FAQ.html">FAQ</a>
107-
</div>
108-
<div class="footer_icons">
109-
<a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer">
110-
<img src="assets/icons/ic_facebook.png" alt="페이스북으로 이동하는 아이콘">
111-
</a>
112-
<a href="https://x.com/" target="_blank" rel="noopener noreferrer">
113-
<img src="assets/icons/ic_twitter.png" alt="트위터로 이동하는 아이콘">
114-
</a>
115-
<a href="https://youtube.com/" target="_blank" rel="noopener noreferrer">
116-
<img src="assets/icons/ic_youtube.png" alt="유튜브로 이동하는 아이콘">
117-
</a>
118-
<a href="https://instagram.com/" target="_blank" rel="noopener noreferrer">
119-
<img src="assets/icons/ic_instagram.png" alt="인스타그램으로 이동하는 아이콘">
120-
</a>
121-
</div>
121+
<div class="footer_center">
122+
<a class="privacy" href="href_link/privacy_policy.html"
123+
>Privacy Policy</a
124+
>
125+
<a class="faq" href="href_link/FAQ.html">FAQ</a>
126+
</div>
127+
<div class="footer_icons">
128+
<a
129+
href="https://www.facebook.com/"
130+
target="_blank"
131+
rel="noopener noreferrer"
132+
>
133+
<img
134+
src="assets/icons/ic_facebook.png"
135+
alt="페이스북으로 이동하는 아이콘"
136+
/>
137+
</a>
138+
<a href="https://x.com/" target="_blank" rel="noopener noreferrer">
139+
<img
140+
src="assets/icons/ic_twitter.png"
141+
alt="트위터로 이동하는 아이콘"
142+
/>
143+
</a>
144+
<a
145+
href="https://youtube.com/"
146+
target="_blank"
147+
rel="noopener noreferrer"
148+
>
149+
<img
150+
src="assets/icons/ic_youtube.png"
151+
alt="유튜브로 이동하는 아이콘"
152+
/>
153+
</a>
154+
<a
155+
href="https://instagram.com/"
156+
target="_blank"
157+
rel="noopener noreferrer"
158+
>
159+
<img
160+
src="assets/icons/ic_instagram.png"
161+
alt="인스타그램으로 이동하는 아이콘"
162+
/>
163+
</a>
164+
</div>
122165
</div>
123166
</div>
124167
</footer>

‎login/index.html‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,11 @@
1010
<div class="page-wrapper">
1111
<div class="login_container">
1212
<a href="/" class="login_logo">
13-
<img src="/assets/icons/판다 얼굴.png" />
13+
<img
14+
src="/assets/icons/판다 얼굴.png"
15+
class="logo_img"
16+
alt="판다 로고"
17+
/>
1418
<span class="logo_text">판다마켓</span>
1519
</a>
1620
<form class="login_form_container">
@@ -21,7 +25,7 @@
2125
name="email"
2226
type="email"
2327
class="login_input"
24-
placeholder="codeit@email.com"
28+
placeholder="이메일을 입력해주세요"
2529
autocomplete="email"
2630
/>
2731
<label for="password" class="password_label">비밀번호</label>
@@ -31,7 +35,7 @@
3135
id="password"
3236
name="password"
3337
class="login_input"
34-
placeholder="●●●●●●●●"
38+
placeholder="비밀번호를 입력해주세요"
3539
/>
3640
<button
3741
type="button"

‎login/login.css‎

Lines changed: 50 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,18 @@ html {
33
font-family: 'Pretendard-Regular';
44
}
55

6+
:root {
7+
--container-max-width: 400px;
8+
--container-padding: 0 16px;
9+
}
10+
11+
@media (min-width: 768px) and (max-width: 1199px) {
12+
:root {
13+
--container-max-width: 640px;
14+
--container-padding: 0 24px;
15+
}
16+
}
17+
618
.page-wrapper {
719
display: flex;
820
align-items: center;
@@ -162,11 +174,10 @@ html {
162174
}
163175

164176
.login_footer {
165-
margin-bottom: 0;
177+
margin-top: 8px;
166178
text-align: center;
167179
font-size: 12px;
168180
color: var(--gray500);
169-
position: absolute;
170181
bottom: 16px;
171182
}
172183

@@ -209,10 +220,45 @@ html {
209220
}
210221

211222
.signup_container .login_footer {
212-
position: absolute;
213-
bottom: -30px;
214223
width: 100%;
215224
text-align: center;
216225
font-size: 12px;
217226
color: var(--gray500);
218227
}
228+
229+
/* 모바일 화면 (최대 767px)용 반응형 스타일 */
230+
231+
@media (max-width: 767px) {
232+
.login_container,
233+
.signup_container {
234+
width: 100%;
235+
max-width: 400px;
236+
padding: 0 16px;
237+
box-sizing: border-box;
238+
}
239+
.logo_img {
240+
width: 52px;
241+
height: 52px;
242+
object-fit: contain;
243+
}
244+
245+
.logo_text {
246+
font-size: 33.17px;
247+
margin-left: 8px;
248+
}
249+
250+
.login_logo {
251+
display: flex;
252+
align-items: center;
253+
gap: 0;
254+
width: fit-content;
255+
}
256+
}
257+
258+
@media (min-width: 768px) and (max-width: 1199px) {
259+
.login_container,
260+
.signup_container {
261+
padding: 0 24px;
262+
max-width: 640px;
263+
}
264+
}

0 commit comments

Comments
 (0)