[나예진] sprint 2 #21
+261
−45
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,40 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="ko"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <link rel="stylesheet" href="sign.css"> | ||
| <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" /> | ||
| <title>로그인</title> | ||
| </head> | ||
| <body> | ||
| <a href="/"><img src="image/logo_large.png" alt="로그인 로고" class="sign-logo"></a> | ||
| <form class="sign-form"> | ||
| <div class="sign-form-label"> | ||
|
There was a problem hiding this comment. 크게 상관은 없지만.. 굳이 div로 감싸지 않고 label에 직접 스타일을 주셔도 될 거 같습니다 :) |
||
| <label for="login-email">이메일</label> | ||
|
|
||
| </div> | ||
| <input id="login-email" name="email" type="email" | ||
| placeholder="이메일을 입력해주세요" class="sign-form-input" required /> | ||
|
|
||
| <div class="sign-form-label"> | ||
| <label for="login-pwd" >비밀번호</label> | ||
| </div> | ||
| <div class="password-container"> | ||
| <input id="login-pwd" name="pwd" type="password" | ||
| placeholder="비밀번호를 입력해주세요" class="sign-form-input" required/> | ||
| <img src="image/visibility_off.png" class="visibility-off" alt="비밀번호 숨기기"> | ||
| </div> | ||
| <button class="sign-btn">로그인</button> | ||
|
|
||
| </form> | ||
| <div class="simple-login-div"> | ||
| <div class="simple-login-txt">간편 로그인하기</div> | ||
| <div class="simple-login-icon"> | ||
| <a href="https://www.google.com/"><img src="image/google_icon.png"class="google-icon" alt="구글 간편로그인 아이콘"></a> | ||
| <a href="https://www.kakaocorp.com/page/"><img src="image/kakao_icon.png" class="kakao-icon" alt="카카오 간편로그인 아이콘"></a> | ||
| </div> | ||
| </div> | ||
| <div class="footer">판다마켓이 처음이신가요? | ||
| <a href="/signup.html" class="footer-signup-link">회원가입</a> | ||
| </div> | ||
| </body> | ||
| </html> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| :root { | ||
|
|
||
| --gray900 : #111827; | ||
|
There was a problem hiding this comment. 앱 전체에서 공통으로 사용될 가능성이 크다면, 파일을 따로 분리하셔서 관리하시는 것도 좋습니다 :) |
||
| --gray800 : #1f2937; | ||
| --gray700 : #374151; | ||
| --gray600 : #4b5563; | ||
| --gray500 : #6b7280; | ||
| --gray400 : #9ca3af; | ||
| --gray200 : #e5e7eb; | ||
| --gray100 : #f3f4f6; | ||
| --gray50 : #f9fafb; | ||
| --blue:#3692ff; | ||
| } | ||
|
|
||
| body { | ||
| font-family: "pretendard", sans-serif; | ||
| margin: 0 auto; | ||
| width: 640px; | ||
| margin-top: 231px; | ||
| } | ||
|
|
||
| .sign-logo { | ||
| display: block; | ||
| width: 396px; | ||
| height: 132px; | ||
| margin: 0 auto; | ||
| margin-bottom: 40px; | ||
| } | ||
|
|
||
| .sign-form-label { | ||
| font-size: 18px; | ||
| font-weight: 700; | ||
| line-height: 26px; | ||
| color: var(--gray800); | ||
| margin-bottom: 16px; | ||
| } | ||
|
|
||
| .sign-form-input { | ||
| width: 100%; | ||
| height: 56px; | ||
| border: none; | ||
| border-radius: 12px; | ||
| background-color: var(--gray100); | ||
| padding : 16px 24px; | ||
| margin-bottom: 24px; | ||
| } | ||
|
|
||
| .sign-form-input:focus { | ||
| outline-color: var(--blue); | ||
| } | ||
|
|
||
| .sign-form-input::placeholder { | ||
| font-size: 16px; | ||
| line-height: 26px; | ||
| font-weight: 300; | ||
| color: var(--gray400); | ||
| } | ||
|
|
||
| .password-container { | ||
| position: relative; | ||
| } | ||
|
|
||
| .visibility-off { | ||
| position:absolute; | ||
| width: 24px; | ||
| height: 24px; | ||
| top: 16px; | ||
| bottom: 16px; | ||
| right: 24px; | ||
| } | ||
|
|
||
| .sign-btn { | ||
| width: 100%; | ||
| border: none; | ||
| border-radius: 40px; | ||
| padding: 16px 124px; | ||
| background-color: var(--gray400); | ||
| font-size: 20px; | ||
| font-weight: 500; | ||
| color: var(--gray100); | ||
| cursor:pointer; | ||
| } | ||
|
|
||
| .sign-btn:hover { | ||
| background-color: var(--blue); | ||
| } | ||
|
|
||
| .simple-login-div { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| margin: 24px 0; | ||
| padding :16px 23px; | ||
| width: 100%; | ||
| background-color: #e6f2ff; | ||
| } | ||
|
|
||
| .simple-login-txt { | ||
| font-size: 16px; | ||
| font-weight: 500; | ||
| color: var(--gray800); | ||
| } | ||
|
|
||
| .simple-login-icon { | ||
| display: flex; | ||
| gap: 16px; | ||
| } | ||
|
|
||
| .simple-login-icon img{ | ||
| width: 42px; | ||
| height: 42px; | ||
| } | ||
|
|
||
| .footer { | ||
| display: flex; | ||
| justify-content: center; | ||
| font-size: 14px; | ||
| color: var(--gray800); | ||
| gap: 4px; | ||
| } | ||
|
|
||
| .footer-signup-link { | ||
| color: var(--blue); | ||
| } | ||
|
|
||
|
|
||
| .footer-signup-link:hover { | ||
| color : #1251aa | ||
| } | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="ko"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <link rel="stylesheet" href="sign.css"> | ||
| <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" /> | ||
| <title>회원가입</title> | ||
| </head> | ||
| <body> | ||
| <a href="/"><img src="image/logo_large.png" alt="회원가입 로고" class="sign-logo"></a> | ||
| <form class="sign-form"> | ||
| <div class="sign-form-label"> | ||
| <label for="login-email">이메일</label> | ||
| </div> | ||
| <input id="login-email" name="email" type="email" | ||
| placeholder="이메일을 입력해주세요" class="sign-form-input" required /> | ||
|
|
||
| <div class="sign-form-label"> | ||
| <label for="login-nickname">닉네임</label> | ||
| </div> | ||
| <input id="login-nickname" name="nickname" | ||
| placeholder="닉네임을 입력해주세요" class="sign-form-input" required /> | ||
|
|
||
| <div class="sign-form-label"> | ||
| <label for="login-pwd" >비밀번호</label> | ||
| </div> | ||
| <div class="password-container"> | ||
| <input id="login-pwd" name="pwd" type="password" | ||
| placeholder="비밀번호를 입력해주세요" class="sign-form-input" required/> | ||
| <img src="image/visibility_off.png" class="visibility-off" alt="비밀번호 숨기기"> | ||
| </div> | ||
|
|
||
| <div class="sign-form-label"> | ||
| <label for="login-pwd-confirm" >비밀번호 확인</label> | ||
| </div> | ||
| <div class="password-container"> | ||
| <input id="login-pwd-confirm" name="pwd-confirm" type="password" | ||
| placeholder="비밀번호를 다시 한 번 입력해주세요" class="sign-form-input" required/> | ||
| <img src="image/visibility_off.png" class="visibility-off" alt="비밀번호 숨기기"> | ||
| </div> | ||
|
|
||
| <button class="sign-btn">회원가입</button> | ||
|
|
||
| </form> | ||
| <div class="simple-login-div"> | ||
| <div class="simple-login-txt">간편 로그인하기</div> | ||
| <div class="simple-login-icon"> | ||
| <a href="https://www.google.com/"><img src="image/google_icon.png"class="google-icon" alt="구글 간편로그인 아이콘"></a> | ||
| <a href="https://www.kakaocorp.com/page/"><img src="image/kakao_icon.png" class="kakao-icon" alt="카카오 간편로그인 아이콘"></a> | ||
| </div> | ||
| </div> | ||
| <div class="footer">이미 회원이신가요? | ||
| <a href="/login.html" class="footer-signup-link">로그인</a> | ||
| </div> | ||
| </body> | ||
| </html> |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
as는 preload를 지정했을 때만 사용됩니다 :) 다시 한 번 확인해주세요!
https://developer.mozilla.org/ko/docs/Web/HTML/Element/link#%ED%8A%B9%EC%84%B1