[이유진] sprint2 #42
There are no files selected for viewing
This file contains hidden or 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 hidden or 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 hidden or 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,49 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="ko"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>판다마켓 - 회원가입</title> | ||
| <link rel="stylesheet" href="../resource/css/style.css"> | ||
| </head> | ||
| <body> | ||
| <div class="layout-sign"> | ||
| <div class="contents"> | ||
| <div class="logo-area"> | ||
| <a href="../index.html"><img src="../resource/img/login_logo.png" alt="판다마켓 로고"></a> | ||
| </div> | ||
| <div class="sign-form"> | ||
| <form> | ||
| <div class="input-box el-txt-input"> | ||
| <label for="signup-email">이메일</label> | ||
| <input id="signup-email" type="email" placeholder="이메일을 입력해주세요"> | ||
| </div> | ||
| <div class="input-box el-txt-input"> | ||
| <label for="signup-name">닉네임</label> | ||
| <input id="signup-name" type="text" placeholder="닉네임임을 입력해주세요"> | ||
| </div> | ||
| <div class="input-box el-txt-input"> | ||
| <label for="signup-password">비밀번호</label> | ||
| <input id="signup-password" type="password" placeholder="비밀번호를 입력해주세요"> | ||
| <button type="button" class="el-btn btn-password"></button> | ||
| </div> | ||
| <div class="input-box el-txt-input"> | ||
| <label for="signup-password-chk">비밀번호</label> | ||
| <input id="signup-password-chk" type="password" placeholder="비밀번호를 다시 한 번 입력해주세요"> | ||
| <button type="button" class="el-btn btn-password"></button> | ||
| </div> | ||
| <button type="submit" class="el-btn btn-l" disabled>회원가입</button> | ||
| </form> | ||
| </div> | ||
| <div class="sns-login"> | ||
| <span class="login-tit">간편 로그인하기</span> | ||
| <ul class="sns-login-link"> | ||
| <li><a href="https://www.google.com/"><img src="../resource/img/ic_google.png" alt="구글 로그인"></a></li> | ||
| <li><a href="https://www.kakaocorp.com/page/"><img src="../resource/img/ic_kakao.png" alt="카카오톡 로그인"></a></li> | ||
| </ul> | ||
| </div> | ||
| <p class="sign-msg">이미 회원이신가요? <a href="./login.html" class="link-txt">로그인</a></p> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
This file contains hidden or 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,202 @@ | ||
| @charset "utf-8"; | ||
|
|
||
| /* ############################################################## | ||
| font #폰트 | ||
| ############################################################## */ | ||
| @font-face { | ||
| font-family: 'Pretendard'; | ||
| src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Bold.woff') format('woff'); | ||
| font-weight: bold; | ||
| font-style: normal; | ||
| } | ||
| @font-face { | ||
| font-family: 'Pretendard'; | ||
| src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-SemiBold.woff') format('woff'); | ||
| font-weight: 800; | ||
| font-style: normal; | ||
| } | ||
| @font-face { | ||
| font-family: 'Pretendard'; | ||
| src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Medium.woff') format('woff'); | ||
| font-weight: 500; | ||
| font-style: normal; | ||
| } | ||
| @font-face { | ||
| font-family: 'Pretendard'; | ||
| src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff'); | ||
| font-weight: 400; | ||
| font-style: normal; | ||
| } | ||
|
|
||
|
|
||
|
|
||
| /* ############################################################## | ||
| reset #리셋 | ||
| ############################################################## */ | ||
| /* http://meyerweb.com/eric/tools/css/reset/ | ||
| v2.0 | 20110126 | ||
| License: none (public domain) | ||
| */ | ||
| html, body, div, span, applet, object, iframe, | ||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | ||
| a, abbr, acronym, address, big, cite, code, | ||
| del, dfn, em, img, ins, kbd, q, s, samp, | ||
| small, strike, strong, sub, sup, tt, var, | ||
| b, u, i, center, | ||
| dl, dt, dd, ol, ul, li, | ||
| fieldset, form, label, legend, | ||
| table, caption, tbody, tfoot, thead, tr, th, td, | ||
| article, aside, canvas, details, embed, | ||
| figure, figcaption, footer, header, hgroup, | ||
| menu, nav, output, ruby, section, summary, | ||
| time, mark, audio, video { | ||
| margin: 0; | ||
| padding: 0; | ||
| border: 0; | ||
| font-size: 100%; | ||
| font: inherit; | ||
| vertical-align: baseline; | ||
| } | ||
| /* HTML5 display-role reset for older browsers */ | ||
| article, aside, details, figcaption, figure, | ||
| footer, header, hgroup, menu, nav, section { | ||
| display: block; | ||
| } | ||
| body { | ||
| line-height: 1; | ||
| } | ||
| ol, ul { | ||
| list-style: none; | ||
| } | ||
| blockquote, q { | ||
| quotes: none; | ||
| } | ||
| blockquote:before, blockquote:after, | ||
| q:before, q:after { | ||
| content: ''; | ||
| content: none; | ||
| } | ||
| table { | ||
| border-collapse: collapse; | ||
| border-spacing: 0; | ||
| } | ||
|
|
||
|
|
||
|
|
||
| /* ############################################################## | ||
| Reset override #리셋 오버라이드 | ||
| ############################################################## */ | ||
| body { font-family: 'Pretendard', 'malgun gothic', 'sans-serif', 'dotum'; font-size: 24px; word-break: keep-all; line-height: 1.4; } | ||
| button, input, textarea, select, a { font-family: 'Pretendard', 'malgun gothic', 'sans-serif', 'dotum'; font-size: 24px; } | ||
| a, a:link, a:visited, a:hover { text-decoration: none; color: inherit; cursor: pointer;} | ||
| button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px solid #303030; } | ||
| *:-moz-focusring { outline: 1px solid #303030; } | ||
| * {box-sizing: border-box;} | ||
|
|
||
|
|
||
|
|
||
| /* ############################################################## | ||
| Component #컴포넌트 | ||
|
|
||
| ############################################################## */ | ||
| /* | ||
| button | ||
| */ | ||
| a.el-btn, | ||
| button.el-btn { | ||
| display: block; | ||
| padding: 0; | ||
| width: 100%; | ||
| font-weight: 800; | ||
| text-align: center; | ||
| background-color: var(--color-primary-100); | ||
| color: var(--color-gray100); | ||
| border: none; | ||
| cursor: pointer; | ||
| } | ||
| .el-btn:hover { | ||
| background-color: var(--color-primary-200); | ||
| } | ||
| .el-btn:active { | ||
| background-color: var(--color-primary-300); | ||
| } | ||
| .el-btn:disabled { | ||
| background-color: var(--color-gray400); | ||
| } | ||
|
|
||
| /* btn size */ | ||
| .el-btn.btn-l { | ||
| border-radius: 40px; | ||
| font-size: var(--text-xl); | ||
| line-height: 56px; | ||
| } | ||
| .el-btn.btn-m { | ||
| border-radius: 40px; | ||
| font-size: var(--text-2lg); | ||
| line-height: 48px; | ||
| } | ||
| .el-btn.btn-sm { | ||
| padding: 0 30px; | ||
| line-height: 48px; | ||
| border-radius: 8px; | ||
| font-size: var(--text-lg); | ||
| } | ||
| .el-btn.btn-s { | ||
| padding: 0 23px; | ||
| line-height: 42px; | ||
| border-radius: 8px; | ||
| font-size: var(--text-lg); | ||
| } | ||
|
|
||
| /* icon-btn */ | ||
| .el-btn.btn-password { | ||
| width: 24px; | ||
| height: 24px; | ||
| background: transparent url('../img/btn_vis.png') no-repeat center/24px; | ||
| } | ||
| .el-btn.btn-password.on { | ||
| background-image: url('../img/btn_vis_on.png'); | ||
| } | ||
|
|
||
|
|
||
|
|
||
| /* | ||
| input | ||
| */ | ||
| /* text */ | ||
| .el-txt-input { | ||
| position: relative; | ||
| } | ||
| .el-txt-input label { | ||
| display: block; | ||
| font-size: var(--text-2lg); | ||
| font-weight: bold; | ||
| text-align: left; | ||
| color: var(--color-gray800); | ||
| } | ||
| .el-txt-input input { | ||
| padding: 15px 50px 15px 24px; | ||
| width: 100%; | ||
| font-size: var(--text-lg); | ||
| border: 2px solid transparent; | ||
| border-radius: 12px; | ||
| background-color: var(--color-gray100); | ||
| color: var(--color-gray800); | ||
| } | ||
| .el-txt-input input::placeholder { | ||
| font-size: var(--text-lg); | ||
| color: var(--color-gray400); | ||
| } | ||
| .el-txt-input input:focus { | ||
| border: 2px solid #3692ff; | ||
| } | ||
| .el-txt-input input:focus-visible { | ||
| outline: none; | ||
| } | ||
| .el-txt-input label + input { | ||
| margin-top: 16px; | ||
| } | ||
| .el-txt-input .el-btn { | ||
| position: absolute; | ||
| bottom: 14px; | ||
| right: 24px; | ||
| } | ||
Empty file.
This file contains hidden or 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,40 @@ | ||
| @charset "utf-8"; | ||
|
|
||
| :root { | ||
| /* color */ | ||
| --color-primary-100: #3692FF; | ||
| --color-primary-200 : #1967D6; | ||
| --color-primary-300 : #1251AA; | ||
| --color-error : #F74747; | ||
|
|
||
| --color-gray50 : #F9FAFB; | ||
| --color-gray100 : #F3F4F6; | ||
| --color-gray200 : #E5E7EB; | ||
| --color-gray400 : #9CA3AF; | ||
| --color-gray500 : #6B7280; | ||
| --color-gray600 : #4B5563; | ||
| --color-gray700 : #374151; | ||
| --color-gray800 : #1F2937; | ||
| --color-gray900 : #111827; | ||
|
|
||
|
|
||
| /* font-size */ | ||
| --text-xs: 12px; | ||
| --text-sm: 13px; | ||
| --text-md: 14px; | ||
| --text-lg: 16px; | ||
| --text-2lg: 18px; | ||
| --text-xl: 20px; | ||
| --text-2xl: 24px; | ||
| --text-3xl: 32px; | ||
|
|
||
| /* line-heiht */ | ||
| --line-height-xs : 1.5; | ||
| --line-height-sm : 1.69; | ||
| --line-height-md : 1.71; | ||
| --line-height-lg : 1.625; | ||
| --line-height-2lg : 1.556; | ||
| --line-height-xl : 1.6; | ||
| --line-height-2xl : 1.333; | ||
| --line-height-3xl : 1.313; | ||
| } |
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.
label을 잘 적용해주셨네요! 👍