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

[장혁수] sprint3 #100

Merged
merged 7 commits into from
Jun 10, 2024
Merged

[장혁수] sprint3 #100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9406e5e
feat(style,form): color값들 css변수로 등록
hyeoksuJ Jun 6, 2024
561ea9d
feat(index, style): Pretendard 글꼴 적용
hyeoksuJ Jun 6, 2024
b321cbe
feat(login, signup, form): 로그인과 회원가입 html 파일을 폼과 인풋 태그 사용해서 수정, css 파…
hyeoksuJ Jun 6, 2024
994e946
feat(form): 인풋 요소가 focus in일 때 파란 테두리 생기는 기능
hyeoksuJ Jun 6, 2024
d033ec6
feat(login, signup, form): 로그인, 회원가입 페이지 리팩토링 및 비밀번호 인풋에 아이콘 추가
hyeoksuJ Jun 6, 2024
8d735d0
Merge branch 'Basic-장혁수-sprint2' into Basic-장혁수-sprint3
hyeoksuJ Jun 7, 2024
3ae1199
png 파일 추가
hyeoksuJ Jun 8, 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
Binary file added images/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/logo_text.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/on_visibility.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>판다마켓</title>
<link rel="stylesheet" href="./stylesheets/style.css">
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

font 적용 방법이 이렇게 CDN을 이용해서 다운로드 받는 방식이 있고,
font 파일을 프로젝트에 함께 두고 font-face로 설정하는 방법도 있습니다.

시간이 되실때 font-face로 설정하는 방법도 적용해보시면 좋을것같아요! :-)

</head>
<body>
<div class="header">
Expand Down
1 change: 1 addition & 0 deletions items.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
</head>
<body>
items 페이지
Expand Down
70 changes: 35 additions & 35 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./stylesheets/form.css">
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
</head>
<body>
<div class="logo-wrap">
Expand All @@ -13,41 +14,40 @@
<h1 class="name">판다마켓</h1>
</a>
</div>
<div class="container">
<form class="wrap">
<div class="login-wrap">
<h5 class="email">이메일</h5>
<div class="input">
<p class="text">이메일을 입력해주세요</p>
</div>
<h5 class="password">비밀번호</h5>
<div class="input">
<p class="text">비밀번호를 입력해주세요</p>
<img src="./images/non_visibility.png" alt="눈 가림 아이콘">
</div>
<a href="#" class="login-button">로그인</a>
<form>
<div class="input-item">
<label for="login-email">이메일</label>
<input id="login-email" name="email" type="email" placeholder="이메일을 입력해주세요" required autocomplete="on">
Copy link
Collaborator

Choose a reason for hiding this comment

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

오! input으로 잘 바꿔주셨네요! :-)

</div>
<div class="input-item">
<label for="login-password">비밀번호</label>
<div class="input-wrap">
<input id="login-password" name="password" type="password" placeholder="비밀번호를 입력해주세요" required>
<img src="./images/non_visibility.png" class="password-icon" alt="눈 모양 아이콘">
</div>

<div class="easy-login">
<p class="text">간편 로그인하기</p>
<ul class="icon-wrap">
<li>
<a href="https://google.com/">
<img src="./images/ic_google.png.png" alt="구글 아이콘">
</a>
</li>
<li>
<a href="https://kakaocorp.com/page/">
<img src="./images/ic_kakao.png.png" alt="카카오톡 아이콘">
</a>
</li>
</ul>
</div>
<div class="help">
<p class="text">판다마켓이 처음이신가요?</p>
<a href="/signup.html" class="signup">회원가입</a>
</div>
</form>
</div>
</div>
<button class="form-button">
로그인
</button>
<div class="easy-login">
<p class="text">간편 로그인하기</p>
<ul class="icon-wrap">
<li>
<a href="https://google.com/">
<img src="./images/ic_google.png.png" alt="구글 아이콘">
</a>
</li>
<li>
<a href="https://kakaocorp.com/page/">
<img src="./images/ic_kakao.png.png" alt="카카오톡 아이콘">
</a>
</li>
</ul>
</div>
<div class="help">
<p class="text">판다마켓이 처음이신가요?</p>
<a href="/signup.html" class="signup">회원가입</a>
</div>
</form>
</body>
</html>
1 change: 1 addition & 0 deletions privacy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
</head>
<body>
privacy 페이지
Expand Down
88 changes: 45 additions & 43 deletions signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./stylesheets/form.css">
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
</head>
<body>
<div class="logo-wrap">
Expand All @@ -13,50 +14,51 @@
<h1 class="name">판다마켓</h1>
</a>
</div>
<div class="container">
<form class="wrap">
<div class="signup-wrap">
<h5 class="email">이메일</h5>
<div class="input">
<p class="text">이메일을 입력해주세요</p>
</div>
<h5 class="nickname">닉네임</h5>
<div class="input">
<p class="text">닉네임을 입력해주세요</p>
</div>
<h5 class="password">비밀번호</h5>
<div class="input">
<p class="text">비밀번호를 입력해주세요</p>
<img src="./images/non_visibility.png" alt="눈 가림 아이콘">
</div>
<h5 class="confirm-password">비밀번호 확인</h5>
<div class="input">
<p class="text">비밀번호를 다시 한 번 입력해주세요</p>
<img src="./images/non_visibility.png" alt="눈 가림 아이콘">
</div>
<a href="#" class="login-button">로그인</a>
<form>
<div class="input-item">
<label for="signup-email">이메일</label>
<input id="signup-email" name="email" type="email" placeholder="이메일을 입력해주세요" required autocomplete="on">
</div>
<div class="input-item">
<label for="signup-nickname">닉네임</label>
<input id="signup-nickname" name="nickname" type="text" placeholder="닉네임을 입력해주세요">
</div>
<div class="input-item">
<label for="signup-password">비밀번호</label>
<div class="input-wrap">
<input id="signup-password" name="password" type="password" placeholder="비밀번호를 입력해주세요" required>
<img src="./images/non_visibility.png" class="password-icon" alt="눈 모양 아이콘">
</div>

<div class="easy-login">
<p class="text">간편 로그인하기</p>
<ul class="icon-wrap">
<li>
<a href="https://google.com/">
<img src="./images/ic_google.png.png" alt="구글 아이콘">
</a>
</li>
<li>
<a href="https://kakaocorp.com/page/">
<img src="./images/ic_kakao.png.png" alt="카카오톡 아이콘">
</a>
</li>
</ul>
</div>
<div class="input-item">
<label for="signup-password-confirm">비밀번호 확인</label>
<div class="input-wrap">
<input id="signup-password-confirm" name="password-confirm" type="password" placeholder="비밀번호를 다시 한 번 입력해주세요">
<img src="./images/non_visibility.png" class="password-icon" alt="눈 모양 아이콘">
</div>
<div class="help">
<p class="text">이미 회원이신가요?</p>
<a href="/login.html" class="signup">로그인</a>
</div>
</form>
</div>
</div>
<button class="form-button">
회원가입
</button>
<div class="easy-login">
<p class="text">간편 로그인하기</p>
<ul class="icon-wrap">
<li>
<a href="https://google.com/">
<img src="./images/ic_google.png.png" alt="구글 아이콘">
</a>
</li>
<li>
<a href="https://kakaocorp.com/page/">
<img src="./images/ic_kakao.png.png" alt="카카오톡 아이콘">
</a>
</li>
</ul>
</div>
<div class="help">
<p class="text">이미 회원이신가요?</p>
<a href="/login.html" class="login">로그인</a>
</div>
</form>
</body>
</html>
99 changes: 66 additions & 33 deletions stylesheets/form.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,33 @@
:root {
--blue: #3692ff;
--red: #f74747;
--gray900: #111827;
--gray800: #1f2937;
--gray700: #374151;
--gray600: #4b5563;
--gray500: #6b7280;
--gray400: #9ca3af;
--gray200: #e5e7eb;
--gray100: #f3f4f6;
--gray50: #f9fafb;
--white: #ffffff;
}
Comment on lines +1 to +14
Copy link
Collaborator

Choose a reason for hiding this comment

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

컬러 변수 설정 잘 해주셨네요!
같은 gray여도 색이 다른 gray라는것도 잘 알 수 있게 변수 설정 잘 해주셨습니다 👍🏻


* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.logo-wrap {
body {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
font-family: 'Pretendard';
}

/* 판다마켓 로고 */
.logo-wrap {
margin-top: 60px;
}

Expand All @@ -28,70 +49,80 @@ h1.name {
font-size: 66.34px;
line-height: 89.56px;
font-weight: 700;
color: #3692ff;
color: var(--blue);
}

.container {
display: flex;
justify-content: center;
}

form.wrap {
/* 폼 */
form {
display: flex;
flex-direction: column;
margin-top: 40px;
width: 640px;
gap: 24px;
}

.login-wrap, .signup-wrap {
.input-item {
display: flex;
flex-direction: column;
gap: 24px;
}

.email,
.nickname,
.password,
.confirm-password {
font-size: 18px;
line-height: 21.48px;
font-weight: 700;
color: #1f2937;
}

.input {
.input-wrap {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}

input {
height: 56px;
width: 100%;
padding: 16px 24px;
border-radius: 12px;
background-color: #f3f4f6;
padding-left: 24px;
padding-right: 24px;
background-color: var(--gray100);
}

.input > .text {
input::placeholder {
color: var(--gray400);
font-size: 16px;
line-height: 24px;
font-weight: 400;
color: #9ca3af;
}

a.login-button {
input:focus {
outline: 2px solid var(--blue);
}

.password-icon {
position: absolute;
right: 24px;
}

label {
color: var(--gray800);
font-size: 18px;
line-height: 21.48px;
font-weight: 700;
}

.form-button {
display: flex;
justify-content: center;
height: 56px;
border-radius: 40px;
padding: 16px 124px;
background-color: #9ca3af;
color: #ffffff;
background-color: var(--gray400);
color: var(--white);
font-size: 20px;
line-height: 24px;
font-weight: 600;
text-decoration: none;
}

input,
button {
border: none;
}

/* 간편 로그인 */
.easy-login {
display: flex;
justify-content: space-between;
Expand All @@ -111,6 +142,7 @@ ul.icon-wrap {
list-style-type: none;
}

/* 헬퍼 */
.help {
display: flex;
justify-content: center;
Expand All @@ -119,7 +151,8 @@ ul.icon-wrap {
margin-bottom: 60px;
}

a.signup {
color: #3182f6;
.help > a {
margin-left: 8px;
color: var(--blue);
}

Loading
Loading