Conversation
|
우와 호버랑 동작주신 부분 까지 정말 잘하셨는데요! 감탄하고 갑니다! 🙊 |
|
깔끔하네요!! 너무 잘하십니다~ |
|
@kmryuuu @handongsu 경민님 동수님 감사합니당ㅎㅎ🥹 |
css/login.css
Outdated
| input#login-hold{ | ||
| display:none; | ||
| } |
There was a problem hiding this comment.
class="a11y-hidden로 숨김처리를 하셨으니 스크린리더가 읽을 수 있게 삭제하셔도 좋을것 같습니다:)
There was a problem hiding this comment.
앗 제가 a11y-hidden 클래스 적용 후 지운다는게 그대로 둬버렸네요..ㅎㅎ
| .divider::after{ | ||
| content: ""; | ||
| height: 1px; | ||
| width: 100%; | ||
| background-color: #C4C4C4; | ||
| position: absolute; | ||
| top: 0.5em; | ||
| left: 0; | ||
| } | ||
|
|
||
| .divider span { | ||
| font-size: 14px; | ||
| padding: 0 10px; | ||
| background-color: #FFF; | ||
| z-index: 2; | ||
| position: relative; | ||
| } |
There was a problem hiding this comment.
after로 하나의 선을 그려준 뒤 span에 z-index를 활용해서 위로 오게 만드셨군요👍
| } | ||
|
|
||
| .login-btn span { | ||
| margin: auto; |
There was a problem hiding this comment.
저는 텍스트가 당연히 중앙일거라고 생각했는데 지금보니 텍스트가 완벽한 중앙 정렬이 아니었네요
매의 눈이십니다 👍
|
코드,주석,reset.css 정말 깔끔하고 여러 효과까지👍👍
|
merrybmc
left a comment
merrybmc
left a comment
There was a problem hiding this comment.
안녕하세요 소리님! 첫 pr을 축하드려요 🎉🎉🎉
구현 완성도도 엄청 높으신데 자바스크립트까지 구현하셨네요 😮😮👍
| <div class="login-hold"> | ||
| <input type="checkbox" id="login-hold" class="a11y-hidden"> | ||
| <label for="login-hold">로그인 상태 유지</label> | ||
| </div> |
There was a problem hiding this comment.
피그마 체크박스 배치
소리님 체크박스 배치
피그마의 요구사항과 배치가 살짝 어긋나있습니다.
가운데로 맞춰주시면 더 이쁘게 보일 것 같아요.
There was a problem hiding this comment.
안그래도 저게 신경쓰였는데 :before로 css를 주다보니 vertical-align을 적용해도 저게 최선이더라구요.. 🥲 좋은 방법 있을까요??
| <a href="https://google.com" class="login-btn sns-login"> | ||
| <img src="images/Google__G__Logo 1.png" alt="google"> | ||
| <span>구글 계정으로 로그인</span> | ||
| </a> | ||
| <a href="https://facebook.com" class="login-btn sns-login fb-btn"> | ||
| <img src="images/facebook.png" alt="facebook"> | ||
| <span>페이스북 계정으로 로그인</span> | ||
| </a> | ||
| <a href="https://naver.com" class="login-btn sns-login nv-btn"> | ||
| <img src="images/naver-logo.png" alt="naver"> | ||
| <span>네이버 계정으로 로그인</span> | ||
| </a> | ||
| <a href="https://www.kakaocorp.com/page/service/service/KakaoTalk" class="login-btn sns-login kt-btn"> | ||
| <img src="images/message-circle.png" alt="kakaotalk"> | ||
| <span>카카오톡 계정으로 로그인</span> | ||
| </a> |
There was a problem hiding this comment.
로그인 버튼의 경우 목적과 기능을 고려했을 때 button 태그로 바꾸는 것도 고려해보시면 좋을 것 같아요. 😀
There was a problem hiding this comment.
처음에는 <button> 태그로 작성했다가 소셜 로그인의 경우, 해당 페이지로 리다이렉션 된다고 생각해서 <a>태그가 적절하지 않나 하고 바꿔봤습니다... ㅎㅎㅎㅎㅎ 이 부분에 대해서는 검색 해봐야겠어요!
|
자바스크립트 이용해서 잘구현하셨네요...! 소셜로그인 호버 부분도 예뻐서 계속 커서 옮기면서 봤습니다 |
| <div class="underline"></div> | ||
|
|
||
| <main> | ||
| <h2>위니브에서 여러분의 궁금증을 해결하세요! :)</h2> |
There was a problem hiding this comment.
코드 실행에는 문제가 없었지만 특수 문자 ')' 기호를 엔티티 코드 ) 로 바꾼다면 VSCode 상에서 빨간색이 사라져 보기 편할 듯 합니다 :)
|
|
||
| $("#login-btn").click((e) => { | ||
| // 아이디 입력 안됐을 때 | ||
| if (!$("#login-id").val()) { |
There was a problem hiding this comment.
아이디 입력 체크에서 스페이스바를 누르면 true로 처리가 되는데 공백 제거를 위해 trim() 혹은 replace() 사용을 추천 드립니다! 자바스크립트 기능까지 생각하시느라 너무 너무 수고 많으셨습니다 소리님😊👏
There was a problem hiding this comment.
그 부분까지는 생각을 못했는데 처리해줘야겠군요..!!! 감사합니당😊👍
| .login-btn:hover { | ||
| font-weight: 600; | ||
| border-width: 3px; | ||
| } |
There was a problem hiding this comment.
커서가 어떤 버튼 위에 있는지 한 눈에 들어와서 좋았습니다! 그리고 버튼을 눌렀을 때 해당 웹 사이트로 이동하는 센스 재밌었습니다👍
There was a problem hiding this comment.
너무 심심해서 넣어봤어요ㅎㅎㅎ~~ 꼼꼼히 봐주셔서 감사합니당👍👍
|
@AYFG ㅎㅎ좋게 봐주셔서 감사합니다! 저도 잘 부탁드려요!!!👍 |
7 participants
로그인/회원가입 첫번째 레이아웃을 구현했습니다