[전수영]Sprint2#158
Hidden character warning
Conversation
dongqui
left a comment
dongqui
left a comment
There was a problem hiding this comment.
수영님! 미션 하시냐느고 고생 많으셨습니다 :)
요구 사항을 꼼꼼하게 잘 챙겨주셨네요 💯 다음 미션도 화이팅입니다!
| <form action=""> | ||
| <div class="login_area_box"> | ||
| <div class="input_box"> | ||
| <label for="input_email" class="label">이메일</label> |
| <div class="social_group"> | ||
| <a | ||
| href="https://www.google.com/" | ||
| target="_blank" |
There was a problem hiding this comment.
외부 링크를 target="_blank" 속성을 사용하여 새 탭에서 열리도록 설정되어 있습니다. 이 경우 보안상 rel="noopener noreferrer" 속성을 추가하는 것이 좋습니다.
https://velog.io/@parkseonup/noopener%EC%99%80-noreferrer
요즘 현대 브라우저는 기본으로 처리 되긴 하지만.. 참고해 주세요 🤣
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <link | ||
| rel="stylesheet" | ||
| as="style" |
There was a problem hiding this comment.
as는 preload를 지정했을 때만 사용됩니다 :) 다시 한 번 확인해주세요!
https://developer.mozilla.org/ko/docs/Web/HTML/Element/link#%ED%8A%B9%EC%84%B1
| <span>로그인</span> | ||
| </button> | ||
| <div class="blue_box"> | ||
| <p>간편 로그인하기</p> |
| html { | ||
| height: 100%; | ||
| } | ||
| .login_page { |
There was a problem hiding this comment.
공통 부분과 각 페이지 별로 css를 나눠주시면 좋습니다 :) 현재는 각 페이지 마다 불필요한 css도 같이 받아지고 있어요!
| <p>간편 로그인하기</p> | ||
| <div class="social_group"> | ||
| <a | ||
| href="https://www.google.com/" |
There was a problem hiding this comment.
외부 링크를 target="_blank" 속성을 사용하여 새 탭에서 열리도록 설정되어 있습니다. 이 경우 보안상 rel="noopener noreferrer" 속성을 추가하는 것이 좋습니다.
https://velog.io/@parkseonup/noopener%EC%99%80-noreferrer
요즘 현대 브라우저는 기본으로 처리 되긴 하지만.. 참고해 주세요 🤣
| margin-top: 12.3214vw; | ||
| } | ||
| .center_box { | ||
| gap: 5.7143vw; |
There was a problem hiding this comment.
유연하게 대처해 주시는 것은 좋지만, 이 여백이 실제로 몇 px일지" 직관적으로 알기 어렵고 디자이너가 원하는 고정 간격간에 오차가 나기 쉬울 거 같습니다 :)
당장 다 바꾸실 필요는 없지만, 과도한 vw, % 사용은 주의해 주세요!
| placeholder="비밀번호를 입력해주세요" | ||
| /> | ||
| <button type="button" class="btn btn_pw"> | ||
| <span>비밀번호 보이기</span> |
There was a problem hiding this comment.
접근성을 위해 넣어주신 건가요~!? 👍
aria-label 같은 속성을 사용하는 방법도 있습니다 :)
2 participants
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게