Skip to content
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

[송효정] sprint2 #51

Merged
merged 2 commits into from
May 7, 2024
Merged

[송효정] sprint2 #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3678e93
sprint1 modify
ylem76 May 3, 2024
b80f284
sprint2 mission
ylem76 May 3, 2024
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
61 changes: 35 additions & 26 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,30 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓</title>
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" />
<link rel="stylesheet" href="./src/css/reset.css" />
<link rel="stylesheet" href="./src/css/style.css" />
<link rel="stylesheet" href="./src/css/global.css" />
<link rel="stylesheet" href="./src/css/home.css" />
</head>
<body>
<header>
<nav class="gnb">
<a href="/" class="logo"><img src="./src/img/common/logo.png" alt="판다마켓" /></a>
<a href="/" class="logo"><img src="./src/img/common/logo_small.png" alt="판다마켓" /></a>
Copy link
Collaborator

Choose a reason for hiding this comment

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

상대경로보다는 절대경로를 써주시면 좋을 것 같습니다.
프로젝트가 커지면서 리팩토링을 할 때 유리해서요.

<a href="/login" class="btn btn_small">로그인</a>
</nav>
</header>
<div class="kv">
<div class="inner">
<img src="./src/img/main/img_home_top.png" alt="" />
<h1>일상의 모든 물건을 <br />거래해 보세요</h1>
<a class="btn btn_large" href="/items">구경하러 가기</a>
</div>
</div>

<main>
<section class="hero">
<div class="inner">
<img src="./src/img/main/img_home_top.png" alt="인사하는 판다 일러스트" />
<h1>일상의 모든 물건을 <br />거래해 보세요</h1>
<a class="btn btn_large" href="/items">구경하러 가기</a>
</div>
</section>
<div class="wrapper">
<section class="inner">
<img src="./src/img/main/img_home_01.png" alt="" />
<img src="./src/img/main/img_home_01.png" alt="물건을 구경하는 판다 일러스트" />
<div class="desc">
<h2>
<span>Hot item</span>
Expand All @@ -33,7 +36,7 @@ <h2>
</div>
</section>
<section class="inner">
<img src="./src/img/main/img_home_02.png" alt="" />
<img src="./src/img/main/img_home_02.png" alt="돋보기 일러스트" />
<div class="desc">
<h2>
<span>Search</span>
Expand All @@ -43,7 +46,7 @@ <h2>
</div>
</section>
<section class="inner">
<img src="./src/img/main/img_home_03.png" alt="" />
<img src="./src/img/main/img_home_03.png" alt="카테고리 일러스트" />
<div class="desc">
<h2>
<span>Register</span>
Expand All @@ -53,7 +56,7 @@ <h2>
</div>
</section>
</div>
<div class="bv">
<div class="banner">
<div class="inner">
<div class="desc">
<h2>
Expand All @@ -63,7 +66,7 @@ <h2>
</div>
</div>

<img src="./src/img/main/img_home_bottom.png" alt="" />
<img src="./src/img/main/img_home_bottom.png" alt="대화하는 판다 일러스트" />
</div>
</main>
<footer>
Expand All @@ -74,20 +77,26 @@ <h2>
<li><a href="/faq">FAQ</a></li>
</ul>
<ul class="sns">
<li
><a target="_blank" href="https://www.facebook.com">
<img src="./src/img/common/ic_facebook.svg" alt="facebook logo" />
<li>
<a target="_blank" rel="noopener noreferrer" href="https://www.facebook.com">
Copy link
Collaborator

Choose a reason for hiding this comment

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

마침 멘토링 때 소개할까 고민했는데 noopener, noreferrer을 넣어주셨네요. 👍👍
보안, 성능상 유리해서 별도 프레임워크 없이 작성할 때는 작성해주는 것이 좋은 것 같습니다.

<img src="./src/img/common/ic_facebook.svg" alt="페이스북 로고" />
</a>
</li>
<li>
<a target="_blank" rel="noopener noreferrer" href="https://www.twitter.com">
<img src="./src/img/common/ic_twitter.svg" alt="트위터 로고" />
</a>
</li>
<li>
<a target="_blank" rel="noopener noreferrer" href="https://www.youtube.com">
<img src="./src/img/common/ic_youtube.svg" alt="유튜브 로고" />
</a>
</li>
<li>
<a target="_blank" rel="noopener noreferrer" href="https://www.instagram.com">
<img src="./src/img/common/ic_instagram.svg" alt="인스타그램 로고" />
</a>
</li>
<li
><a target="_blank" href="https://www.twitter.com"> <img src="./src/img/common/ic_twitter.svg" alt="twitter logo" /> </a
></li>
<li
><a target="_blank" href="https://www.youtube.com"> <img src="./src/img/common/ic_youtube.svg" alt="youtube logo" /> </a
></li>
<li
><a target="_blank" href="https://www.instagram.com"> <img src="./src/img/common/ic_instagram.svg" alt="instagram logo" /> </a
></li>
</ul>
</div>
</footer>
Expand Down
51 changes: 51 additions & 0 deletions login/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓</title>
Copy link
Collaborator

Choose a reason for hiding this comment

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

많은 웹사이트에서 어떤 사이트인지는 favicon으로 표현하고 개별 페이지에 대해서는 별도의 타이틀을 주고 있습니다.
단순히 판다마켓 보다는 로그인 또는 판다마켓: 로그인 처럼 써주시면 더 좋을 것 같습니다.

<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" />
<link rel="stylesheet" href="/src/css/reset.css" />
<link rel="stylesheet" href="/src/css/global.css" />
<link rel="stylesheet" href="/src/css/login.css" />
</head>
<body>
<div class="logo">
<a href="/">
<img src="../src/img/common/logo.png" alt="판다마켓" width="396" />
</a>
</div>
<main>
<div class="wrapper">
<form action="">
<label for="loginEmail">이메일</label>
<input type="email" id="loginEmail" placeholder="이메일을 입력해주세요" />
<label for="loginPW">비밀번호</label>
<div class="input_wrapper">
<input type="password" id="signUpPW" placeholder="비밀번호를 입력해주세요" />
<button class="btn_visibility open">
<img class="visibility_close" src="../src/img/login/btn_visibility_close.svg" alt="비밀번호 숨기기" />
<img class="visibility_open" src="../src/img/login/btn_visibility_open.svg" alt="비밀번호 보이기" />
</button>
</div>
<button id="btnLogin" class="btn btn_large">로그인</button>
</form>
<div class="social_login">
간편 로그인하기
<ul>
<li>
<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">
<img src="../src/img/login/social_login_google.png" alt="구글 간편 로그인" />
</a>
</li>
<li>
<a href="https://www.kakaocorp.com/page/" target="_blank" rel="noopener noreferrer">
<img src="../src/img/login/social_login_kakao.png" alt="카카오톡 간편 로그인" />
</a>
</li>
</ul>
</div>
<p class="bottom_text">판다마켓이 처음이신가요? <a href="/signup/" class="">회원가입</a></p>
</div>
</main>
</body>
</html>
59 changes: 59 additions & 0 deletions signup/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓</title>
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" />
<link rel="stylesheet" href="/src/css/reset.css" />
<link rel="stylesheet" href="/src/css/global.css" />
<link rel="stylesheet" href="/src/css/login.css" />
</head>
<body>
<div class="logo">
<a href="/">
<img src="../src/img/common/logo.png" alt="판다마켓" width="396" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
<img src="../src/img/common/logo.png" alt="판다마켓" width="396" />
<img src="../src/img/common/logo.png" alt="판다마켓" />

img 태그에서 width를 주는 것보다 별도의 css로 너비를 조절하는 방식을 추천드립니다.
현재는 css 관련 살펴보아야 할 포인트가 두 군데입니다. 또한 개별 img 태그에 적용 된 width 값을 수정하려면 일일이 모든 html 파일을 찾아 값을 수정해야 합니다. 반면에 공통 css 파일로 속성을 관리하면 한 번의 수정으로 여러 군데에 있는 값을 수정할 수 있어서요!

</a>
</div>
<main>
<div class="wrapper">
<form action="">
<label for="signupEmail">이메일</label>
<input type="email" id="signupEmail" placeholder="이메일을 입력해주세요" />
<label for="signUpPW">비밀번호</label>
<div class="input_wrapper">
<input type="password" id="signUpPW" placeholder="비밀번호를 입력해주세요" />
<button class="btn_visibility close">
<img src="../src/img/login/btn_visibility_close.svg" alt="비밀번호 숨기기" />
<img src="../src/img/login/btn_visibility_open.svg" alt="비밀번호 보이기" visibility="hidden" />
</button>
</div>
<label for="signUpPWCheck">비밀번호 확인</label>
<div class="input_wrapper">
<input type="text" id="signUpPWCheck" placeholder="비밀번호를 다시 한 번 입력해주세요" />
<button class="btn_visibility close">
<img class="visibility_close" src="../src/img/login/btn_visibility_close.svg" alt="비밀번호 숨기기" />
<img class="visibility_open" src="../src/img/login/btn_visibility_open.svg" alt="비밀번호 보이기" />
</button>
</div>
<button id="btnLogin" class="btn btn_large">회원가입</button>
</form>
<div class="social_login">
간편 로그인하기
<ul>
<li>
<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">
<img src="../src/img/login/social_login_google.png" alt="구글 간편 로그인" />
</a>
</li>
<li>
<a href="https://www.kakaocorp.com/page/" target="_blank" rel="noopener noreferrer">
<img src="../src/img/login/social_login_kakao.png" alt="카카오톡 간편 로그인" />
</a>
</li>
</ul>
</div>
<p class="bottom_text">이미 회원이신가요? <a href="/login/" class="">로그인</a></p>
</div>
</main>
</body>
</html>
131 changes: 131 additions & 0 deletions src/css/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
:root {
--white: #fff;
--gray900: #1b1d1f;
--gray800: #26282b;
--gray600: #454c53;
--gray500: #72787f;
--gray400: #9ea4a8;
--gray200: #e5e7eb;
--gray100: #e8ebed;
--gray50: #f7f7f8;
--blue: #3692ff;
--skyblue: #cfe5ff;
--red: #f74747;
--deepblue: #1967d6;
}

body {
overflow-x: hidden;
}

/* common */
.inner {
max-width: 1200px;
margin: 0 auto;
}
/* gnb */
header {
border-bottom: 1px solid var(--gray100);
margin-bottom: 70px;
}
.gnb {
width: 100%;
height: 70px;
display: flex;
justify-content: space-between;
max-width: 1520px;
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
max-width: 1520px;

max-width 속성은 제외하시는 게 좋을 것 같습니다. width 속성을 덮어쓰면서 gnb의 너비를 제한해 넓은 모니터에서 gnb가 잘려 보일 것 같아요

margin: 0;
align-items: center;
position: fixed;
z-index: 2;
padding: 0 200px;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

gnb에 대해 background-color가 필요해 보입니다. 별도의 색상이 없어 스크롤를 내리다 보면 뒤에 있는 요소와 겹쳐 보이고 있어서요.

Copy link
Collaborator

Choose a reason for hiding this comment

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

position: fixed 설정 이후에
top:0, left:0 도 설정해 주시면 좋을 것 같습니다. 명시적으로 최상단에 고정함을 확실히하고 크로스 브라우징에도 유리해서요.


/* button default style */
.btn {
display: flex;
justify-content: center;
align-items: center;
background: var(--blue);
color: var(--white);
font-weight: 600;
font-size: 16px;
line-height: 1;
border: 0;
}

.btn:hover {
background: var(--deepblue);
}

.btn_small {
width: 128px;
height: 48px;
border-radius: 8px;
}

.btn_large {
/* width: 360px; */
width: 100%;
height: 56px;
border-radius: 40px;
font-size: 20px;
}

/* input default style */
.input_wrapper {
position: relative;
}
input {
Copy link
Collaborator

Choose a reason for hiding this comment

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

로그인과 회원가입에 쓰이는 input을 공통 css 요소로 잘 처리해 주셨습니다. 👍👍
이번 과제에서 가장 중요한 부분 중에 하나라고 볼 수 있을 것 같은데요. 다만 전체 input 보다는 별도의 클래스를 이용해 스타일링을 해주시는게 더 좋을 것 같습니다. input은 너무 흔하게 쓰이는 태그라 사이트가 커질 수록 다른 형태의 input로 필요해 질 것 같아서요!

display: block;
background-color: var(--gray100);
border: 0;
width: 100%;
border-radius: 12px;
height: 56px;
margin: 14px 0 24px;
padding: 0 24px;
font-size: 16px;
line-height: 24px;
}

input:focus {
outline-color: var(--blue);
/* border-color:
border-color:red; */
}

input::placeholder {
color: var(--gray400);
}
.btn_visibility {
position: absolute;
top: 16px;
right: 24px;
border: 0;
width: 24px;
height: 24px;
background: none;
cursor: pointer;
padding: 0;
}

.btn_visibility > img {
position: absolute;
top: 0;
right: 0;
}

.btn_visibility.open .visibility_open,
.btn_visibility.close .visibility_close {
display: none;
visibility: hidden;
}

label {
display: block;
font-weight: 700;
font-size: 18px;
line-height: 21.8px;
margin: 24px 0 14px;
}
Loading
Loading