Conversation
merrybmc
left a comment
merrybmc
left a comment
There was a problem hiding this comment.
안녕하세요 동수님! 첫 PR에 성공하신걸 축하드립니다. 🎉"
체크박스가 체크되었을 때 이미지 위치가 약간 올바르지 않아요. 조금만 내려주셔서 맞춰주시면 괜찮을 것 같아요.
피그마의 로그인 버튼 레이아웃엔 border가 없는데 이 부분을 수정해주시면 좋을 것 같아요.
h1 태그에 피그마의 font가 적용되지 않았는데 css 수정이 필요할 것 같아요.
| <div class="or"> | ||
| <hr class="hr-left" /> | ||
| <span>또는</span> | ||
| <hr class="hr-right" /> | ||
| </div> |
There was a problem hiding this comment.
hr로도 선을 커스텀해서 구현해줄 수 있군요. 😮
그리고 저랑 class 명이 같으시네요 😆
There was a problem hiding this comment.
HTML5부터 hr 태그는 주제의 흐름 변경(thematic break)을 의미한다고 합니다.
좋은 시멘틱 활용의 예시인거 같아요👍
There was a problem hiding this comment.
HTML5부터 hr 태그는 주제의 흐름 변경(thematic break)을 의미한다고 합니다.
좋은 시멘틱 활용의 예시인거 같아요👍
오 저는 div로 태그로 선을 계속 그었는데 앞으로 hr 태그로 해봐야겠어요. 감사합니다 예린님 👍
| <script> | ||
| $(document).ready(function(){ | ||
| $('.btn-login').on('click',function(){ | ||
| if($("#inputId").val() == ""){ | ||
| $('.findPw').empty(); | ||
| $('#inputPwd').css("border", "1px solid #c4c4c4"); | ||
|
|
||
| $('.findId').text('아이디를 입력해주세요'); | ||
| $('#inputId').css("border", "2px solid #F4492E"); | ||
|
|
||
| }else if($("#inputPwd").val()==""){ | ||
| $('.findId').empty(); | ||
| $("#inputId").css("border", "1px solid #c4c4c4"); | ||
|
|
||
| $('.findPw').text('비밀번호를 입력해주세요.'); | ||
| $('#inputPwd').css("border", "2px solid #F4492E"); | ||
|
|
||
| }else{ | ||
| $('.findPw').text('아이디 혹은 비밀번호가 일치하지 않습니다.'); | ||
| $('#inputPwd').css("border", "1px solid #c4c4c4"); | ||
| $("#inputId").css("border", "1px solid #c4c4c4"); | ||
| } | ||
|
|
||
| }) | ||
| }) | ||
| </script> |
There was a problem hiding this comment.
가상 선택자를 쓰지 않고 벌써 자바스크립트로 버튼을 구현하셨다니.. 실력자셨네요 동수님😲
$으로 클래스랑 id를 선택하고 if문으로 경고창이 뜨도록 구현해주셨네요.
There was a problem hiding this comment.
CSS display:none 과 jQuery hide(),show()를 사용하지 않고 empty()를 사용하는 방법이 있군요!
There was a problem hiding this comment.
일단 만드는 javascript에서 배운 jQuery가 있어서 천천히 읽으면서 해석할 수 있어서 얼마나 다행인지 하하..
정말 잘 구현하셨네요😍 공유해주셔서 감사합니다!!
다른건 다 적용했는데 맥북에선 체크박스가 정상으로 보여요. 환경에 따라 다른거 같아서 체크를 해봐야할거 같습니다 |
login.css
Outdated
| body{ | ||
| font-family: 'Noto Sans KR', sans-serif; | ||
| } |
There was a problem hiding this comment.
바디에 font-family: "Spoqa Han Sans Neo";를 적용하면 페이지 전체에 적용 되니 변경하는건 어떨까요?
그럼 다른 클래스에 적용하지 않아도 되니 코드량이 줄꺼같아요!
login.css
Outdated
| .input{ | ||
| width: 472px; | ||
| height: 50px; | ||
| border-radius: 5px; | ||
| border: 1px solid #c4c4c4; | ||
| color: #767676; | ||
| } | ||
| .inputId{ | ||
| margin-top: 24px; | ||
| margin-bottom: 10px; | ||
| box-sizing: border-box; | ||
| } | ||
| .inputPwd{ | ||
| margin-bottom: 17px; | ||
| } | ||
|
|
||
| .input:placeholder-shown{ | ||
| padding-left: 16px; | ||
| } |
There was a problem hiding this comment.
placeholder일때는 padding-left가 있고,
사용자가 입력했을 때 padding-left가 사라지는걸 의도하신게 아니라면
.input 자체에 padding-left:16px 를 주시면 placeholder-shown을 사용하지 않고도 해결할 수 있을거 같습니다!
|
동수님 역시 실력자.. 잘 짜셨네용👍 예진님 말씀대로 input 자체에 padding-left 주는 것, 아이디 입력하고 버튼 누르면 경고 없애는 코드 추가해보시면 좋을거 같아요~~! |
5 participants
로그인/회원가입 레이아웃을 구현하였습니다.
#To do