Conversation
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="18" | ||
| height="18" | ||
| viewBox="0 0 18 18" | ||
| fill="none" | ||
| > | ||
| <path d="M1.15918 16.9999L17 1.15915" stroke="#767676" /> | ||
| <path d="M16.8408 16.8408L1.00003 1" stroke="#767676" /> | ||
| </svg> |
There was a problem hiding this comment.
cursor: pointer; 를 주면 더 좋을거 같아요!
There was a problem hiding this comment.
저도 웹접근성을 위해 X 모양 버튼을 클라이언트가 클릭할 수 있는걸 알 수 있게 cursor를 포인터로 바꿔주면 좋을 것 같습니다.
There was a problem hiding this comment.
오 svg에도 적용되는지 덕분에 알게 되었네요.. 두분의 의견 감사합니다!
11-login/login.html
Outdated
| <form> | ||
| <input type="text" class="user-id" placeholder="아이디" /> | ||
| <p class="warning-id">아이디를 입력해 주세요.</p> | ||
| <input type="password" class="user-pw" placeholder="비밀번호" /> |
There was a problem hiding this comment.
아이디와 비밀번호에도 label tag를 추가하는 것도 좋을꺼같습니다!
11-login/css/login.css
Outdated
|
|
||
| /* 로그인 버튼 */ | ||
| .btn-login { | ||
| width: 472px; |
There was a problem hiding this comment.
반응형을 위해 width를 px단위로 잡는 것은 최대한 지양한다고 합니다!
100%로 변경해도 좋을거 같아요:)
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } |
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } |
|
경민님 주석처리로 가독성에 도움을 주셔서 감사합니다:) |
| .warning-id { | ||
| margin: 6px 0 10px; | ||
| } | ||
|
|
||
| .warning-pw { | ||
| margin: 10px 0 13px; | ||
| } |
There was a problem hiding this comment.
margin-left를 살짝 줘도 괜찮을꺼같아요:)
| <li class="icon-gl"> | ||
| <a href="#">구글 계정으로 로그인</a> | ||
| </li> | ||
| <li class="icon-fb"> | ||
| <a href="#">페이스북 계정으로 로그인</a> | ||
| </li> | ||
| <li class="icon-naver"> | ||
| <a href="#">네이버 계정으로 로그인</a> | ||
| </li> | ||
| <li class="icon-kakao"> | ||
| <a href="#">카카오톡 계정으로 로그인</a> | ||
| </li> |
There was a problem hiding this comment.
현재 cursor가 텍스트에만 먹히고 있고 로그인 버튼 전체에는 cursor가 먹히지 않고 있습니다.
그리고 시맨틱한 태그를 위해 로그인에는 단순한 페이지 이동이 아니기 때문에
a태그보단 button 태그가 더 잘 어울릴 것 같습니다.
There was a problem hiding this comment.
오호 시맨틱 태그에 더 신경을 써야겠네요.. 감사합니다! 😃
|
클래스명도 명확하고 주석으로 구분되어있어서 읽기 편했습니다👍 |
4 participants
로그인/회원가입 첫 번째 레이아웃을 구현하였습니다.
To do