구현 과제 - 로그인/회원가입 모달 - 재웅 #16
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="ko"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>login</title> | ||
| <link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css' rel='stylesheet' type='text/css'> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| </head> | ||
| <body> | ||
| <div class="wrapper"> | ||
| <header class="header"> | ||
| <h2>로그인 또는 회원가입</h2> | ||
| <img src="./images/close.png" alt="닫기 버튼"> | ||
| </header> | ||
|
|
||
| <content class="content"> | ||
| <h1 class="welcome">위니브에서 여러분의 궁금증을 해결하세요! :)</h1> | ||
|
Collaborator
There was a problem hiding this comment. h1>h2>h3 순서로 사용하라고 배웠던거 같아서 찾아봤더니 |
||
|
|
||
| <form class="input-idpw"> | ||
| <input id="id" class="input id" placeholder="아이디" type="text" /> | ||
| <label for="id"></label> | ||
| <strong class="strong one">아이디를 입력해 주세요.</strong> | ||
|
Collaborator
There was a problem hiding this comment. 재웅님 코드 figma figma하고 여기 "아이디를 입력해주세요." 경고메세지 하단 부분의 padding이 맞지 않고 아래의 input 박스하고 |
||
| <input id="password" class="input pw" placeholder="비밀번호" type="password" /> | ||
| <label for="password"></label> | ||
| <strong class="strong two">아이디 혹은 비밀번호가 일치하지 않습니다.</strong> | ||
|
|
||
|
|
||
| <input class="inp-Hold txt-hide" type="checkbox" id="inpHold" /> | ||
| <label class="labl-hold" for="inpHold">로그인 상태 유지</label> | ||
| <button class="btn-login" type="button">로그인</button> | ||
| <div class="Atag"> | ||
| <a href="#">회원가입</a> | ||
| <span>|</span> | ||
| <a href="#">아이디/비밀번호 찾기</a> | ||
| </div> | ||
| </form> | ||
| <div class="or"> | ||
| <hr class="rectangle rec-left"></hr> | ||
| <p class="or-text">또는</p> | ||
| <hr class="rectangle rec-right"></hr> | ||
| </div> | ||
| <form class="another-login"> | ||
|
Collaborator
There was a problem hiding this comment. 전송할 양식이 없을때는 디자인을 위한 div 태그를 쓰는걸 어떨까요? |
||
| <button class="icon-google">구글 계정으로 로그인</button> | ||
| <button class="icon-facebook">페이스북 계정으로 로그인</button> | ||
| <button class="icon-naver">네이버 계정으로 로그인</button> | ||
| <button class="icon-kakao">카카오톡 계정으로 로그인</button> | ||
| </form> | ||
| </content> | ||
| </div> | ||
| </body> | ||
| </html> | ||
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.
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.
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 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,255 @@ | ||
| h1, | ||
| h2, | ||
| p, | ||
| strong { | ||
| margin: inherit; | ||
| font: inherit; | ||
| } | ||
| button, | ||
| hr { | ||
| background: none; | ||
| border: none; | ||
| font: inherit; | ||
| color: inherit; | ||
| } | ||
| a { | ||
| text-decoration: none; | ||
| color: inherit; | ||
| } | ||
| input { | ||
| border: none; | ||
| } | ||
| body { | ||
| display: flex; | ||
| height: 100vh; | ||
| font-family: "Spoqa Han Sans Neo", "sans-serif"; | ||
| } | ||
| .wrapper { | ||
| width: 520px; | ||
| margin: auto auto; | ||
| border-radius: 10px; | ||
| border: 1px solid var(--c-4-c-4-c-4, #c4c4c4); | ||
| background: #fff; | ||
| /* display: flex; */ | ||
| flex-direction: column; | ||
| align-items: center; | ||
| position: relative; | ||
| } | ||
| .header { | ||
| display: flex; | ||
| /* justify-content: space-between; */ | ||
| margin: auto; | ||
| /* background-image: url(./images/close.png); | ||
| background-repeat: no-repeat; | ||
| background-position: 480px; | ||
| background-size: 16px; */ | ||
| padding-top: 20px; | ||
| padding-bottom: 18px; | ||
| border-bottom: 1px solid #c4c4c4; | ||
| font-weight: 500; | ||
| } | ||
| .header img { | ||
| cursor: pointer; | ||
| width: 16px; | ||
| height: 16px; | ||
| position: absolute; | ||
| top: 22px; | ||
| right: 22px; | ||
| } | ||
| .welcome { | ||
| width: fit-content; | ||
| height: 24px; | ||
| font-size: 20px; | ||
| font-weight: 500; | ||
| line-height: 24px; | ||
| margin: 24px; | ||
| } | ||
|
|
||
| .content { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
| .input-idpw { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
| .input { | ||
| width: 472px; | ||
| height: 50px; | ||
| margin-left: 24px; | ||
| border-radius: 5px; | ||
| font-size: 16px; | ||
| } | ||
| .id { | ||
| padding-left: 16px; | ||
| box-sizing: border-box; | ||
| font-weight: 400; | ||
| border: 1px solid #c4c4c4; | ||
| } | ||
| .input:focus.id { | ||
| outline: 1px solid red; | ||
| } | ||
| .input:focus.pw { | ||
| outline: 1px solid red; | ||
| } | ||
| .pw { | ||
| padding-left: 16px; | ||
| border: 1px solid #c4c4c4; | ||
| box-sizing: border-box; | ||
| font-weight: 500; | ||
| } | ||
| .strong { | ||
| height: 10px; | ||
| /* color: #f4492e; | ||
| font-size: 14px; | ||
| font-weight: 400; | ||
| margin-left: 28px; */ | ||
| opacity: 0; | ||
| } | ||
| .id:focus ~ .strong.one { | ||
| color: #f4492e; | ||
| font-size: 14px; | ||
| font-weight: 400; | ||
| margin-left: 28px; | ||
| padding: 6px 0 20px; | ||
| opacity: 1; | ||
| } | ||
| .pw:focus ~ .strong.two { | ||
| color: #f4492e; | ||
| font-size: 14px; | ||
| font-weight: 400; | ||
| margin-left: 28px; | ||
| padding: 10px 0 12px; | ||
| opacity: 1; | ||
| } | ||
| .txt-hide { | ||
| width: 1px; | ||
| height: 1px; | ||
| overflow: hidden; | ||
| clip-path: inset(50%); | ||
| } | ||
| .labl-hold { | ||
| display: inline block; | ||
| position: relative; | ||
| color: #767676; | ||
| /* cursor: pointer; */ | ||
| } | ||
|
|
||
| .labl-hold::before { | ||
| display: inline-block; | ||
| content: ""; | ||
| width: 22px; | ||
| height: 22px; | ||
| margin-right: 10px; | ||
| margin-left: 28px; | ||
| background: url(./images/check-box-off.png) 0 0/22px no-repeat; | ||
| cursor: pointer; | ||
| vertical-align: -5px; | ||
| } | ||
|
|
||
| .labl-hold::after { | ||
| position: absolute; | ||
| margin-left: 28px; | ||
| left: 20px; | ||
| content: ""; | ||
| width: 22px; | ||
| height: 22px; | ||
| opacity: 0; | ||
| background: url(./images/check-box-on.png) 0 0/22px no-repeat; | ||
| cursor: pointer; | ||
| transition: all 0.1s ease; | ||
|
|
||
| } | ||
| .inp-Hold:checked + .labl-hold::after { | ||
| top: 0.3px; | ||
| left: 0.2px; | ||
| opacity: 1; | ||
| } | ||
| .inp-Hold:checked + .labl-hold::before { | ||
| opacity: 0; | ||
| } | ||
|
|
||
| .btn-login { | ||
| width: 472px; | ||
| background-color: #2f80ed; | ||
| color: #ffffff; | ||
| height: 50px; | ||
| font-size: 18px; | ||
| font-weight: 700; | ||
| margin-left: 24px; | ||
| margin-top: 21px; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| } | ||
| .Atag { | ||
| display: flex; | ||
| color: #767676; | ||
| justify-content: center; | ||
| font-size: 14px; | ||
| font-weight: 400; | ||
| margin: 20px; | ||
| gap: 10px; | ||
| } | ||
| .Atag a { | ||
| cursor: pointer; | ||
| } | ||
| .or { | ||
| display: flex; | ||
| text-align: center; | ||
| font-size: 14px; | ||
| font-weight: 400; | ||
| color: #767676; | ||
| } | ||
|
|
||
| .or .rectangle { | ||
| width: 210px; | ||
| height: 1px; | ||
| background-color: #c4c4c4; | ||
| } | ||
|
|
||
| /* footer */ | ||
| .another-login { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 10px; | ||
| color: #767676; | ||
| width: 472px; | ||
| text-align: center; | ||
| margin: 20px 0 20px 25px; | ||
| font-weight: 500; | ||
| } | ||
| .icon-google { | ||
| cursor: pointer; | ||
| padding: 15px; | ||
| background-repeat: no-repeat; | ||
| border: 1px solid #767676; | ||
| border-radius: 5px; | ||
| background-image: url(./images/Google__G__Logo\ 1.png); | ||
| background-position: 12px; | ||
| } | ||
| .icon-facebook { | ||
| cursor: pointer; | ||
| padding: 15px; | ||
| background-repeat: no-repeat; | ||
| border: 1px solid #2d9cdb; | ||
| border-radius: 5px; | ||
| background-image: url(./images/facebook.png); | ||
| background-position: 12px; | ||
| } | ||
| .icon-naver { | ||
| cursor: pointer; | ||
| padding: 15px; | ||
| background-repeat: no-repeat; | ||
| border: 1px solid #00bf18; | ||
| border-radius: 5px; | ||
| background-position: 12px; | ||
| background-image: url(./images/naver-logo.png); | ||
| } | ||
| .icon-kakao { | ||
| cursor: pointer; | ||
| padding: 15px; | ||
| background-repeat: no-repeat; | ||
| background-position: 12px; | ||
| border: 1px solid #f2c94c; | ||
| border-radius: 5px; | ||
| background-image: url(./images/message-circle.png); | ||
| } | ||
|
Comment on lines
+220
to
+255
Collaborator
There was a problem hiding this comment. 공통되는 CSS를 하나로 묶는다면 코드량도 좋고 가독성도 좋을꺼같아요!
Author
There was a problem hiding this comment. 맞아요 중복되는 코드가 좀 많았는데 얼레벌레 넘어가버렸어요..꼬집어주셔서 감사합니다!! |
||
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.
로그인 또는 회원가입은 h1 태그로 쓰면 더 시맨틱한 태그가 될 것 같아요. :)