Conversation
| <div class="login-input"> | ||
| <form> |
| <div> | ||
| <input class=txt-hide id="check-btn" type="checkbox"> | ||
| <label class="lg-continue" for="check-btn"> | ||
| 로그인 상태 유지 | ||
| </label> | ||
| </div> |
There was a problem hiding this comment.
checkbox가 checked되었을 때 위치가 살짝 어긋납니다
| .login-input input { | ||
| width: 472px; | ||
| height: 50px; | ||
|
|
||
| border-radius: 5px; | ||
| border: 1px solid #c4c4c4; | ||
| background: #fff; | ||
| } | ||
|
|
||
| .login-input input::placeholder { | ||
| color: #767676; | ||
| font-size: 16px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: normal; | ||
|
|
||
| padding: 15px; | ||
| } |
There was a problem hiding this comment.
글씨를 입력할 때는 padding 값이 주어지지 않아서 input 자체에 padding을 주는것도 좋을 것 같아요.
width: calc(100% - 30px);
padding: 0 15px;
이런 식으로요!
004.css
Outdated
| .lg-continue input { | ||
| clip-path: inset(50%); | ||
| margin-left: -20px; | ||
| } | ||
|
|
||
| .lg-continue label { | ||
| font-size: 14px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: normal; | ||
| } |
There was a problem hiding this comment.
사용하지 않는 CSS 정리하는게 좋을 것 같습니다!
004.css
Outdated
| .join a:nth-child(1)::after { | ||
| content: "|"; | ||
| margin: 10px 0 10px 10px; | ||
| color: #767676; | ||
| } |
There was a problem hiding this comment.
저도 이 방법으로 구현을 했었는데 | 요 부분까지 클릭하면 링크이동이 되버리더라구요:(
다른 방법을 생각해 봐야 될꺼같아요
| .join_find > a, | ||
| .join_find > p { | ||
| color: #767676; | ||
| font-family: Spoqa Han Sans Neo; | ||
| font-size: 14px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
|
|
||
| padding: 21px 0 10px 0; | ||
| text-align: center; | ||
| } |
There was a problem hiding this comment.
피그마랑 콘텐츠 간격이 달라요!
한번 확인해주세요 :)
merrybmc
left a comment
merrybmc
left a comment
There was a problem hiding this comment.
시하님 첫 pr을 축하드려요. 환영합니다. 🎉👍👍😊
html 태그를 시맨틱하고 가독성 좋게 구현하시고 input과 button을 form으로 묶어주신것도 엄청 잘하셨어요. 👍👍
004.html
Outdated
| <div> | ||
| <input class=txt-hide id="check-btn" type="checkbox"> |
There was a problem hiding this comment.
체크박스를 클릭하면 체크 표시가 되지 않는 오류가 있습니다.
text-hide에 쌍따옴표로 묶어주시면 좋을 것 같아요. 😀
004.css
Outdated
| .lg-continue::before { | ||
| display: inline-block; | ||
| content: ""; | ||
| width: 22px; | ||
| height: 22px; | ||
| margin-right: 10px; | ||
| background: url("/img/check-box.svg") 0 0/22px no-repeat; | ||
|
|
||
| position: relative; | ||
| top: 5px; | ||
| } | ||
|
|
||
| .lg-continue::after { | ||
| content: ""; | ||
| width: 22px; | ||
| height: 22px; | ||
| margin-right: 10px; | ||
| background: url("/img/check-box(2).svg") 0 0/22px no-repeat; | ||
|
|
There was a problem hiding this comment.
체크박스를 클릭하면 체크 표시가 되지 않는 오류가 있습니다.
lg-continue before랑 after 부분의 bacgkround url을 상대경로로 지정해주면 오류를 해결할 수 있을거에요.
/img 앞에 점 하나를 추가해주시면 좋을 것 같아요. 😊
004.css
Outdated
| .join a:nth-child(1)::after { | ||
| content: "|"; | ||
| margin: 10px 0 10px 10px; |
There was a problem hiding this comment.
회원가입 | 아이디/비밀번호 찾기 부분에서 | 이 부분도 커서가 포인터로 변하고 있습니다.
가상요소가 아닌 html에 | 가 포함된 태그를 하나 추가하셔서 커서 a 태그에만 커서가 적용되도록 하는 것도 괜찮을 것 같아요. 😀
| .login-input input { | ||
| width: 472px; | ||
| height: 50px; | ||
|
|
||
| border-radius: 5px; | ||
| border: 1px solid #c4c4c4; | ||
| background: #fff; | ||
| } |
There was a problem hiding this comment.
placeholder에는 input 태그 안에서 왼쪽에 간격이 있는데 입력을 할 때는 완전히 왼쪽에 붙어서 입력이 시작됩니다.
input 태그에 고정값과 padding 을 추가하여 css를 조금만 수정하시면 될 것 같아요. :)
|
css sprite 사용해서 이미지 넣으셨네요!! 고생 많으셨습니다 공유해주셔서 감사해요😊 |
4 participants
로그인/회원가입 모달 레이아웃을 구현하였습니다.