Skip to content

[심예진] sprint3 #72

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
baeggmin merged 8 commits into from
Jun 16, 2025
Merged

[심예진] sprint3 #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
983460c
Add z-index at header
Jun 11, 2025
ada2d15
Eliminate body style in global.css
Jun 11, 2025
37ffef9
Change the name of box
Jun 11, 2025
84d78ba
Change the image's name
Jun 11, 2025
f5534d4
Change the images
Jun 11, 2025
03e0069
Responsive web design 1 at homepage
Jun 13, 2025
12cf5cf
Responsive web design 1 at login/signup page
Jun 13, 2025
879d476
Mission3 complete
Jun 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 14 additions & 5 deletions global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,29 @@ html, body {
width: 100%;
height: 100%;
font-family: 'Noto Sans KR', sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

a {
text-decoration: none;
color: #3692FF;
}

form {
/* form {
Copy link
Collaborator

@baeggmin baeggmin Jun 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

학습 단계에서는 큰 상관 없지만, 나중에 협업이나 실무할 때 dead code 는 제거해주시는게 원칙입니다!

display: flex;
flex-direction: column;
justify-content: space-around;
gap: 16px;
width: 100%;
} */

/* PC: 1200px 이상 */
@media (min-width: 1200px) {
}

/* Tablet: 768px 이상 ~ 1199px 이하 */
@media (min-width: 768px) and (max-width: 1199px) {
}

/* Mobile: 375px 이상 ~ 767px 이하 */
@media (min-width: 375px) and (max-width: 767px) {
}
0 image/Img_home_bottom.png → image/home/bottomPanda_home.png
View file
Open in desktop
File renamed without changes
0 image/Img_home_01.png → image/home/itemBox_home.png
View file
Open in desktop
File renamed without changes
0 image/Img_home_03.png → image/home/registerBox_home.png
View file
Open in desktop
File renamed without changes
0 image/Img_home_02.png → image/home/searchBox_home.png
View file
Open in desktop
File renamed without changes
0 image/Img_home_top.png → image/home/topPanda_home.png
View file
Open in desktop
File renamed without changes
0 login/login-image/eyeclosed.png → image/icon/eyeclosed_icon.png
View file
Open in desktop
File renamed without changes
0 signup/signup-image/eyeopen.png → image/icon/eyeopen_icon.png
View file
Open in desktop
File renamed without changes
0 image/ic_facebook.png → image/icon/facebook_icon.png
View file
Open in desktop
File renamed without changes
0 login/login-image/google.png → image/icon/google_icon.png
View file
Open in desktop
File renamed without changes
0 image/ic_instagram.png → image/icon/insta_icon.png
View file
Open in desktop
File renamed without changes
0 login/login-image/kakaotalk.png → image/icon/kakaotalk_icon.png
View file
Open in desktop
File renamed without changes
0 image/ic_x.png → image/icon/x_icon.png
View file
Open in desktop
File renamed without changes
0 image/ic_youtube.png → image/icon/youtube_icon.png
View file
Open in desktop
File renamed without changes
Binary file removed image/login-top.png
View file
Open in desktop
Binary file not shown.
0 image/Panda=lg.png → image/logo/pandaHome_logo.png
View file
Open in desktop
File renamed without changes
0 login/login-image/pandalogo.png → image/logo/pandaLogin_logo.png
View file
Open in desktop
File renamed without changes
Binary file added image/meta/meta_FuBao.jpg
View file
Open in desktop
Copy link
Collaborator

@baeggmin baeggmin Jun 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

앗 귀엽네요!🥹

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed image/show.png
View file
Open in desktop
Binary file not shown.
45 changes: 32 additions & 13 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,30 @@
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="global.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:[email protected]&display=swap" rel="stylesheet">
<title>판다마켓</title>
<!-- Open Graph (페북, 카카오, 디스코드)-->
<meta property="og:title" content="판다 마켓">
Copy link
Collaborator

@baeggmin baeggmin Jun 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

메타 태그 꼼꼼히 잘 적용해주셨습니다! 👏

<meta property="og:description" content="일상의 모든 것을 거래해보세요.">
<meta property="og:image" content="https://yejinshim.github.io/17-SPRINT-MISSION/image/meta/meta_FuBao.jpg">
<meta property="og:url" content="https://yejinshim.github.io/17-SPRINT-MISSION">
<meta property="og:type" content="website">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="판다 마켓" />
<meta name="twitter:description" content="일상의 모든 물건을 거래해보세요" />
<meta name="twitter:image" content="https://yejinshim.github.io/17-SPRINT-MISSION/image/meta/meta_FuBao.jpg">
</head>
<body>
<!-- <div class="allContent"> -->
<header>
<a href="/" class="logo-link">
<img class="logo-container" src="image/Panda=lg.png" alt="판다마켓로고">
<img class="logo-container" src="image/logo/pandaHome_logo.png" alt="판다마켓로고">
</a>
<a href="/login" class="login-button">로그인</a>
</header>
Expand All @@ -20,34 +34,36 @@
<h1 class="top_text">일상의 모든 물건을<br>거래해보세요</h1>
<a href="/items" class="looking-button">구경하러 가기</a>
</div>
<img class="hi" src="image/Img_home_top.png" alt="상단배경">
<div class="ppanda">
Copy link
Collaborator

@baeggmin baeggmin Jun 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ppanda -> 오타인거같아요!
그리고 사소하지만 .hi .bye .twoppanda 등의 클래스 명은 의미가 조금 모호한 것 같아요. 조금 더 역할 기반 네이밍을 해주시면 좋을 듯 합니다. (ex: panda-top-image, panda-bottom-image 등)

<img class="hi" src="/image/home/topPanda_home.png" alt="상단배경">
</div>
</div>
</div>

<div class="middle">
<section class="box1">
<section class="itembox">
<div class="hot-item-pc">
<img class="items" src="image/Img_home_01.png" alt="상품확인">
<img class="items" src="/image/home/itemBox_home.png" alt="상품확인">
</div>
<div class="hot-item-container">
<span class="blue item"><b>Hot item</b></span>
<h1 class="content">인기 상품을<br>확인해 보세요</h1>
<p class="content2">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</p>
</div>
</section>
<section class="box2">
<section class="searchbox">
<div class="search-container">
<span class="blue search"><b>Search</b></span>
<h1 class="content">구매를 원하는<br>상품을 검색하세요</h1>
<p class="content2">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
</div>
<div class="search-pc">
<img class="items" src="image/Img_home_02.png" alt="상품검색">
<img class="items" src="/image/home/searchBox_home.png" alt="상품검색">
</div>
</section>
<section class="box3">
<section class="registerbox">
<div class="register-pc">
<img class="items" src="image/Img_home_03.png" alt="상품등록">
<img class="items" src="/image/home/registerBox_home.png" alt="상품등록">
</div>
<div class="register-container">
<span class="blue register"><b>Resister</b></span>
Expand All @@ -61,7 +77,9 @@ <h1 class="content">판매를 원하는<br>상품을 등록하세요</h1>
<div class="bottom">
<div class="bottom-center">
<h1 class="bottom_text">믿을 수 있는<br>판다마켓 중고 거래</h1>
<img class="twopanda" src="image/Img_home_bottom.png" alt="하단배경">
<div class="twoppanda">
<img class="bye" src="/image/home/bottomPanda_home.png" alt="하단배경">
</div>
</div>
</div>

Expand All @@ -75,18 +93,19 @@ <h1 class="bottom_text">믿을 수 있는<br>판다마켓 중고 거래</h1>
</div>
<div class="social">
<a href="https://www.facebook.com" target="_blank">
<img src="image/ic_facebook.png" alt="페이스북">
<img src="image/icon/facebook_icon.png" alt="페이스북">
</a>
<a href="https://x.com" target="_blank">
<img src="image/ic_x.png" alt="트위터">
<img src="image/icon/x_icon.png" alt="트위터">
</a>
<a href="https://www.youtube.com" target="_blank">
<img src="image/ic_youtube.png" alt="유튜브">
<img src="image/icon/youtube_icon.png" alt="유튜브">
</a>
<a href="https://www.instagram.com" target="_blank">
<img src="image/ic_instagram.png" alt="인스타그램">
<img src="image//icon/insta_icon.png" alt="인스타그램">
</a>
</div>
</footer>
<!-- </div> -->
</body>
</html>
44 changes: 41 additions & 3 deletions login/login.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,37 @@
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 700px;
height: auto;
margin-top: 150px;
margin-bottom: 150px;
}

form {
display: flex;
flex-direction: column;
justify-content: space-around;
gap: 16px;
width: 100%;
}

@media (max-width: 767px) {
.container {
padding: 0 16px;
width: 100%;
max-width: 700px;
}
}

.pandalogo {
width: 266px;
height: 90px;
Expand All @@ -9,6 +43,7 @@
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}

label {
Expand All @@ -17,7 +52,8 @@ label {
}

input {
width: 640px;
width: 100%;
/* width: 640px; */
Copy link
Collaborator

@baeggmin baeggmin Jun 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기도 dead code 가 보이네요!
PR 후에 File changed 목록을 쭉 훑어보면서 dead code가 있는지 확인해보는 습관을 들이면 실수 방지에 도움이 됩니다!

height: 56px;
background-color: #F3F4F6;
border: 1px solid #F3F4F6;
Expand All @@ -42,7 +78,8 @@ input {
display: flex;
justify-content: center;
align-items: center;
width: 640px;
width: 100%;
/* width: 640px; */
height: 56px;
background-color: #3692FF;
margin-top: 24px;
Expand All @@ -55,7 +92,8 @@ input {
.simple-login {
display: flex;
flex-direction: column;
width: 640px;
width: 100%;;
Copy link
Collaborator

@baeggmin baeggmin Jun 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

세미콜론이 이중으로 들어간 것 같네용

Copy link
Collaborator

@baeggmin baeggmin Jun 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고정값(640px)을 줄이고 width: 100% 사용해서 유연한 레이아웃으로 리팩토링한 점 훌륭합니다! 👏

/* width: 640px; */
height: 74px;
background-color: #E6F2FF;
margin: 24px;
Expand Down
10 changes: 6 additions & 4 deletions login/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@
<title>로그인</title>
</head>
<body>
<div class="container">
<header>
<img class="pandalogo" src="login-image/pandalogo.png" alt="판다마켓로고">
<img class="pandalogo" src="/image/logo/pandaLogin_logo.png" alt="판다마켓로고">
</header>
<form>
<div class="email-container">
Expand All @@ -22,7 +23,7 @@
<label for="login-password">비밀번호<br></label>
<div class="input-wrapper">
<input id="login-password" name="password" type="password" placeholder="비밀번호를 입력하세요.">
<img src="/login/login-image/eyeclosed.png" alt="비밀번호 보기" class="eyeclosed-icon">
<img src="/image/icon/eyeclosed_icon.png" alt="비밀번호 보기" class="eyeclosed-icon">
</div>
</div>
</form>
Expand All @@ -31,15 +32,16 @@
<p class="simple-text">간편 로그인하기</p>
<div class="social-container">
<a href="https://www.google.com/" target="_blank" class="social-icon">
<img src="/login/login-image/google.png" target="_blank">
<img src="/image/icon/google_icon.png" target="_blank">
</a>
<a href="https://www.kakaocorp.com/page/" target="_blank">
<img src="/login/login-image/kakaotalk.png" target="_blank" class="social-icon">
<img src="/image/icon/kakaotalk_icon.png" target="_blank" class="social-icon">
</a>
</div>
</div>
<footer>
<p>판다마켓이 처음이신가요? <a href="/signup">회원가입</a></p>
</footer>
</div>
</body>
</html>
Binary file removed signup/signup-image/eyeclosed.png
View file
Open in desktop
Binary file not shown.
Binary file removed signup/signup-image/google.png
View file
Open in desktop
Binary file not shown.
Binary file removed signup/signup-image/kakaotalk.png
View file
Open in desktop
Binary file not shown.
Binary file removed signup/signup-image/pandalogo.png
View file
Open in desktop
Binary file not shown.
40 changes: 37 additions & 3 deletions signup/signup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,32 @@
body {
display: flex;
justify-content: center;
align-items: center;
}

.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 700px;
margin-top: 120px;
}

.pandalogo {
width: 266px;
height: 90px;
margin-bottom: 40px;
}

@media (max-width: 767px) {
.container {
padding: 0 16px;
width: 100%;
max-width: 700px;
}
}

.email-container,
.nickname-container,
.password-container,
Expand All @@ -13,13 +36,22 @@
gap: 10px;
}

form {
display: flex;
flex-direction: column;
justify-content: space-around;
gap: 16px;
width: 100%;
}

label {
font-weight: 500;
font-size: 16px;
}

input {
width: 640px;
width: 100%;
/* width: 640px; */
height: 56px;
background-color: #F3F4F6;
border: 1px solid #F3F4F6;
Expand Down Expand Up @@ -53,7 +85,8 @@ input {
display: flex;
justify-content: center;
align-items: center;
width: 640px;
width: 100%;
/* width: 640px; */
height: 56px;
background-color: #3692FF;
margin-top: 24px;
Expand All @@ -66,7 +99,8 @@ input {
.simple-login {
display: flex;
flex-direction: column;
width: 640px;
width: 100%;
/* width: 640px; */
height: 74px;
background-color: #E6F2FF;
margin: 24px;
Expand Down
12 changes: 7 additions & 5 deletions signup/signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@
<title>회원가입</title>
</head>
<body>
<div class="container">
<header>
<img class="pandalogo" src="signup-image/pandalogo.png" alt="판다마켓로고">
<img class="pandalogo" src="/image/logo/pandaLogin_logo.png" alt="판다마켓로고">
</header>
<form>
<div class="email-container">
Expand All @@ -26,14 +27,14 @@
<label for="signup-password">비밀번호<br></label>
<div class="input-wrapper">
<input id="signup-password" name="password" type="password" placeholder="비밀번호를 입력하세요.">
<img src="signup-image/eyeclosed.png" alt="비밀번호 보기" class="eyeclosed-icon">
<img src="/image/icon/eyeclosed_icon.png" alt="비밀번호 보기" class="eyeclosed-icon">
</div>
</div>
<div class="password-check-container">
<label for="signup-password-check">비밀번호 확인<br></label>
<div class="input-wrapper">
<input id="signup-password-check" name="password-check" type="password" placeholder="비밀번호를 확인해주세요.">
<img src="signup-image/eyeopen.png" alt="비밀번호 확인하기" class="eyeopen-icon">
<img src="/image/icon/eyeopen_icon.png" alt="비밀번호 확인하기" class="eyeopen-icon">
</div>
</div>
</form>
Expand All @@ -42,15 +43,16 @@
<p class="simple-text">간편 로그인하기</p>
<div class="social-container">
<a href="https://www.google.com/" target="_blank" class="social-icon">
<img src="/login/login-image/google.png" target="_blank">
<img src="/image/icon/google_icon.png" target="_blank">
</a>
<a href="https://www.kakaocorp.com/page/" target="_blank">
<img src="/login/login-image/kakaotalk.png" target="_blank" class="social-icon">
<img src="/image/icon/kakaotalk_icon.png" target="_blank" class="social-icon">
</a>
</div>
</div>
<footer>
<p>이미 회원이신가요? <a href="/login">로그인</a></p>
</footer>
</div>
</body>
</html>
Loading
Loading