Skip to content

Commit

Permalink
signup.html form태그와 label태그로 변경 및 비밀번호 가림 이미지 추가와 그에 맞는 css 적용
Browse files Browse the repository at this point in the history
  • Loading branch information
@CJewon
CJewon committed Nov 6, 2024
1 parent 3816e1b commit be7188f
Show file tree
Hide file tree
Showing 4 changed files with 95 additions and 60 deletions.
54 changes: 35 additions & 19 deletions css/signup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,45 +58,55 @@ h1 {
width: 100%;
}

.input-email__container,
.input-password__container,
.input-nickname__container,
.input-check-password__container {
.form__container {
display: flex;
flex-direction: column;
gap: 24px;
}

.form__group {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
}

.input-email,
.input-password,
.input-nickname,
.input-check-password {
.form__group-input {
height: 56px;
border-radius: 12px;
border: 0px;
background-color: #f3f4f6;
padding: 15px 24px;
width: 100%;
}

.form__group-input:focus {
border: 1px solid #3692ff;
outline: none;
}

.input-email::placeholder,
.input-password::placeholder,
.input-nickname::placeholder,
.input-check-password::placeholder {
.form__group-input::placeholder {
font-size: 16px;
line-height: 26px;
font-weight: 400;
}

.input-email__text,
.input-password__text,
.input-nickname__text,
.input-check-password__text {
.form__group-label {
font-size: 18px;
font-weight: 700;
line-height: 26px;
}

.form__group-input-container {
position: relative;
}

.form__group-img {
position: absolute;
top: 15px;
right: 24px;
}

.signup-button {
width: 100%;
height: 56px;
Expand All @@ -110,9 +120,15 @@ h1 {
font-size: 20px;
line-height: 32px;
font-weight: 600;
border: 0;
}

.signup-button:hover,
.form__group-img:hover {
cursor: pointer;
}

.sns-login__container {
.social-login__container {
display: flex;
justify-content: space-between;
align-items: center;
Expand All @@ -122,14 +138,14 @@ h1 {
background-color: #e6f2ff;
}

.sns-login__icon {
.social-login__icon {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
}

.sns-login__container > p {
.social-login__container > p {
font-size: 16px;
line-height: 26px;
font-weight: 500;
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
/>
<span class="header__logo-text">판다마켓</span>
</a>
<a href="/login" class="header__login-button">로그인</a>
<a href="/login.html" class="header__login-button">로그인</a>
</div>
</header>
<section class="main-banner">
Expand Down
2 changes: 1 addition & 1 deletion login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
</div>
<div class="sign-up__container">
<p>판다마켓이 처음이신가요?</p>
<a href="/signup" class="sign-up__link">회원가입</a>
<a href="/signup.html" class="sign-up__link">회원가입</a>
</div>
</div>
</section>
Expand Down
97 changes: 58 additions & 39 deletions signup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,62 +16,81 @@
<a href="/" class="logo__link"><h1>판다마켓</h1></a>
</header>
<div class="signup__container">
<div class="input-email__container">
<p class="input-email__text">이메일</p>
<input
type="text"
placeholder="이메일을 입력해주세요"
class="input-email"
/>
</div>
<div class="input-nickname__container">
<p class="input-nickname__text">닉네임</p>
<input
type="text"
placeholder="닉네임을 입력해주세요"
class="input-nickname"
/>
</div>
<div class="input-password__container">
<p class="input-password__text">비밀번호</p>
<input
type="password"
placeholder="비밀번호를 입력해주세요"
class="input-password"
id="password"
/>
</div>
<div class="input-check-password__container">
<p class="input-check-password__text">비밀번호확인</p>
<input
type="text"
placeholder="비밀번호를 다시 한 번 입력해주세요"
class="input-check-password"
/>
</div>
<a href="/signup" class="signup-button">회원가입</a>
<div class="sns-login__container">
<form action="/signup" method="POST" class="form__container">
<div class="form__group">
<label class="form__group-label">이메일</label>
<input
type="email"
placeholder="이메일을 입력해주세요"
class="form__group-input"
name="email"
/>
</div>
<div class="form__group">
<label class="form__group-label">닉네임</label>
<input
type="text"
placeholder="닉네임을 입력해주세요"
class="form__group-input"
name="nickname"
/>
</div>
<div class="form__group">
<label class="form__group-label">비밀번호</label>
<div class="form__group-input-container">
<input
type="password"
placeholder="비밀번호를 입력해주세요"
class="form__group-input"
id="password"
/>
<img
src="/img/btn_visibility_on_24px.png"
alt="비밀번호 가림 이미지"
class="form__group-img"
/>
</div>
</div>
<div class="form__group">
<label class="form__group-label">비밀번호확인</label>
<div class="form__group-input-container">
<input
type="password"
name="password"
placeholder="비밀번호를 다시 한 번 입력해주세요"
class="form__group-input"
/>
<img
src="/img/btn_visibility_on_24px.png"
alt="비밀번호 가림 이미지"
class="form__group-img"
/>
</div>
</div>
<button type="submit" class="signup-button">회원가입</button>
</form>
<div class="social-login__container">
<p>간편 로그인하기</p>
<div class="sns-login__icon">
<div class="social-login__icon">
<a href="https://www.google.com/">
<img
src="/img/google-icon.png"
alt="구글 아이콘"
class="sns-login__google-icon"
class="social-login__google-icon"
/>
</a>
<a href="“https://www.kakaocorp.com/page/">
<img
src="/img/kakaotalk-icon.png"
alt="카카오톡 아이콘"
class="sns-login__kakao-icon"
class="social-login__kakao-icon"
/>
</a>
</div>
</div>
<div class="login__container">
<p>이미 회원이신가요?</p>
<a href="/login" class="login__link">로그인</a>
<a href="/login.html" class="login__link">로그인</a>
</div>
</div>
</section>
Expand Down

0 comments on commit be7188f

Please sign in to comment.