Conversation
merrybmc
left a comment
There was a problem hiding this comment.
안녕하세요 예빈님. 첫 pr에 성공하신걸 축하드려요 🎉🎉🎉
아직 프로젝트 상에서 미구현된 부분이 많은데 구현에 특별히 어려운 점이나 궁금한 점이 있으시면 코멘트로 남겨주세요. 도와드리겠습니다. 😊
| .login { | ||
| color: white; | ||
| font-family: 'SpoqaHanSansNeo-Regular'; | ||
| font-size: 18px; | ||
| line-height: 22px; | ||
| font-weight: 700; | ||
| border: #2F80ED; | ||
| border-radius: 5px; | ||
| background: #2F80ED; | ||
| padding: 14px; | ||
| display: block; | ||
| width: 90%; | ||
| } |
There was a problem hiding this comment.
피그마의 요구사항대로 버튼을 다른 요소들과 위치가 맞게 중앙으로 정렬을 해주면 좋을 것 같습니다.
| <div class="join"> | ||
| <a href="">회원가입</a> | ||
| <a href="">아이디/비밀번호 찾기</a> | ||
| </div> |
There was a problem hiding this comment.
a태그끼리 줄바꿈이 일어나고 있습니다. join 클래스에 flex 속성을 주어 가로 정렬을 해주는게 좋을 것 같습니다.
| <header> | ||
| <h3>로그인 또는 회원가입</h3> |
There was a problem hiding this comment.
로그인 또는 회원가입은 시맨틱 태그를 고려하였을 때 h1 태그로 바꾸어 주는 것이 좋을 것 같습니다.
| <input> | ||
| <input> | ||
| <button class="login_state">로그인 상태 유지</button> | ||
| <button class="login">로그인</button> |
There was a problem hiding this comment.
- input과 함께 관련된 button 태그들은 form 태그로 묶어주시는게 웹접근성의 시맨틱 태그나 js의 submit을 구현하는 것을 고려하여 좋습니다.
참고 해보시면 좋아요. :)
https://developer.mozilla.org/ko/docs/Web/HTML/Element/form
-
로그인 상태 유지와 체크박스의 경우 input 태그와 label 태그를 활용하여 구현해주시는 것이 좋습니다.
-
현재 로그인 버튼의 커서가 pointer로 먹히고 있지 않습니다. css 수정이 필요해 보입니다.
| <div class="join"> | ||
| <a href="">회원가입</a> | ||
| <a href="">아이디/비밀번호 찾기</a> | ||
| </div> |
There was a problem hiding this comment.
a태그 사이에 | 구분선이 빠져있습니다.
그리고 구분선을 추가하실 때 구분선까지 cursor가 pointer 되지않게 고려하여서 구현하시면 좋습니다.
|
안녕하세요 예빈님:) html 뼈대는 잘 잡으셨고, 좀 더 세부적으로 들어 갔을때 css는 클래스로 지정해서 설정하는 것이 추후에 html에 추가 혹은 삭제 되어도 어려운 점이나 궁금한 점이 있으시다면, |
로그인 버튼, 소셜 미디어 구현 완료