[천권희] Sprint2 #80
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,8 +2,87 @@ | |
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta | ||
| name="viewport" | ||
| content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" | ||
| /> | ||
| <link rel="stylesheet" href="/styles/variables.css" /> | ||
| <link rel="stylesheet" href="/styles/reset.css" /> | ||
| <link rel="stylesheet" href="/styles/auth.css" /> | ||
| <link | ||
| rel="stylesheet" | ||
| type="text/css" | ||
| href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" | ||
| /> | ||
| <title>판다마켓</title> | ||
| </head> | ||
| <body> | ||
| <div class="logo"> | ||
| <a href="/"> | ||
| <img | ||
| width="396" | ||
| height="132" | ||
| src="/assets/icon/main-logo.svg" | ||
| alt="logo" | ||
| /></a> | ||
| </div> | ||
|
|
||
| <form class="login-form"> | ||
|
There was a problem hiding this comment. form 요소 내에 input들과 submit button 을 잘 넣어서 시맨틱한 form을 잘 만들어주셨어요 👍 |
||
| <div class="form__block"> | ||
| <label for="email">이메일</label> | ||
| <input | ||
| id="email" | ||
| name="email" | ||
| type="email" | ||
| placeholder="이메일을 입력해주세요" | ||
| /> | ||
| </div> | ||
|
|
||
| <div class="form__block"> | ||
| <label for="password">비밀번호</label> | ||
| <div class="password-container"> | ||
| <input | ||
| id="password" | ||
| name="password" | ||
| type="password" | ||
| placeholder="비밀번호를 입력해주세요" | ||
| /> | ||
|
Comment on lines
+42
to
+49
There was a problem hiding this comment. label과 input을 잘 연관시키셨네요! 👍 이렇게 연관시키면, label 클릭 시 연관된 input에 focus 가게 되어 사용성이 더 좋아집니다. 웹접근성에도 도움이 되구요.
참고: https://developer.mozilla.org/ko/docs/Web/HTML/Element/label |
||
| <img | ||
| class="password-eye" | ||
| src="assets/icon/password_eye.svg" | ||
| alt="password-eye" | ||
| /> | ||
|
Comment on lines
+50
to
+54
There was a problem hiding this comment. 이미지의 height 속성과 width 속성은 언제나 명시하는 것이 좋습니다. 이 속성들이 명시되어 있으면 웹 페이지가 로드될 때 브라우저가 해당 이미지를 위한 적절한 공간을 남겨둘 수 있지만, 이 속성들이 명시되어 있지 않으면 브라우저는 이미지의 크기를 알 수 없어 필요한 공간을 남겨둘 수 없게 됩니다. 따라서 이미지가 로딩되는 순간 페이지의 레이아웃이 변경되는 결과를 초래할 수 있습니다. There was a problem hiding this comment. fix: sprint2 수정 사항 반영 로딩 시 레이아웃이 변경될 수도 있다는 것을 배웠습니다! |
||
| </div> | ||
| </div> | ||
|
|
||
| <div class="form__block"> | ||
| <button class="form__submit-btn">로그인</button> | ||
|
There was a problem hiding this comment. button 태그의 type 속성의 기본값은 submit입니다. 양식 제출용 버튼이 아니라면 type 특성을 button으로 지정하는걸 잊지 마세요. 기본값에서는 버튼을 눌렀을 때 양식 데이터를 제출하고, (존재하지 않는) 응답을 불러오려고 시도하는 과정에서 문서의 현재 상태가 사라질 수 있습니다. 참고로 이 경우 form 요소 내에서 사용하는 form submit용 button 역할인 거 같은데, 그렇다면 생략해도 되지만 type="submit"으로 명시하는 것이 의도를 알 수 있어 더 좋습니다.
There was a problem hiding this comment. fix: sprint2 수정 사항 반영 넵 명시하는 것이 의도를 더 드러낼 수 있겠네요! |
||
| </div> | ||
|
|
||
| <div class="form__block"> | ||
| <div class="form__easy-login"> | ||
| <span>간편 로그인하기</span> | ||
| <a | ||
| href="https://www.google.com/" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
|
Comment on lines
+65
to
+69
|
||
| <img src="/assets/icon/ic_google.svg" alt="google-icon" /> | ||
| </a> | ||
| <a | ||
| href="https://www.kakaocorp.com/page/" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <img src="/assets/icon/ic_kakao.svg" alt="kakao-icon" /> | ||
| </a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="form__block form__link"> | ||
| <span>판다마켓이 처음이신가요?</span> | ||
| <a href="/signup.html">회원가입</a> | ||
| </div> | ||
| </form> | ||
| </body> | ||
| </html> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta | ||
| name="viewport" | ||
| content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" | ||
| /> | ||
| <link rel="stylesheet" href="/styles/variables.css" /> | ||
| <link rel="stylesheet" href="/styles/reset.css" /> | ||
| <link rel="stylesheet" href="/styles/auth.css" /> | ||
|
|
||
| <link | ||
| rel="stylesheet" | ||
| type="text/css" | ||
| href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" | ||
| /> | ||
| <title>판다마켓</title> | ||
| </head> | ||
| <body> | ||
| <div class="logo"> | ||
| <a href="/"> | ||
| <img | ||
| width="396" | ||
| height="132" | ||
| src="/assets/icon/main-logo.svg" | ||
| alt="logo" | ||
| /></a> | ||
| </div> | ||
|
|
||
| <form class="signup-form"> | ||
| <div class="form__block"> | ||
| <label for="email">이메일</label> | ||
| <input | ||
| id="email" | ||
| name="email" | ||
| type="email" | ||
|
There was a problem hiding this comment. input의 type에도 여러 가지 종류가 있죠. |
||
| placeholder="이메일을 입력해주세요" | ||
| /> | ||
| </div> | ||
|
|
||
| <div class="form__block"> | ||
| <label for="username">닉네임</label> | ||
| <input | ||
| id="username" | ||
| name="username" | ||
| type="text" | ||
| placeholder="닉네임을 입력해주세요" | ||
| /> | ||
| </div> | ||
|
|
||
| <div class="form__block"> | ||
| <label for="password">비밀번호</label> | ||
| <div class="password-container"> | ||
| <input | ||
| id="password" | ||
| name="password" | ||
| type="password" | ||
|
|
||
| placeholder="비밀번호를 입력해주세요" | ||
| /> | ||
| <img | ||
| class="password-eye" | ||
| src="assets/icon/password_eye.svg" | ||
| alt="password-eye" | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="form__block"> | ||
| <label for="password-confirm">비밀번호 확인</label> | ||
| <div class="password-container"> | ||
| <input | ||
| id="password-confirm" | ||
| name="password-confirm" | ||
| type="password" | ||
| placeholder="비밀번호를 다시 한 번 입력해주세요" | ||
| /> | ||
|
Comment on lines
+72
to
+77
There was a problem hiding this comment. autocomplete 라는 속성도 있어요. ㅎㅎ 내용 확인해보시고 필요한 경우에 적용해보세요. UX에 도움이 됩니다. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password#allowing_autocomplete There was a problem hiding this comment. 넵 autocomplete 속성을 배우게 되었습니다 개발 시에 자동으로 채워지는 것이 채워진 이전의 스타일을 확인할 수가 없어 추가적으로 각 input 태그에 required 속성이 필요할 것 같아 적용했습니다! |
||
| <img | ||
| class="password-eye" | ||
| src="assets/icon/password_eye.svg" | ||
| alt="password-eye" | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="form__block"> | ||
| <button class="form__submit-btn">회원가입</button> | ||
| </div> | ||
|
|
||
| <div class="form__block"> | ||
| <div class="form__easy-login"> | ||
| <span>간편 로그인하기</span> | ||
| <a | ||
| href="https://www.google.com/" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <img src="/assets/icon/ic_google.svg" alt="google-icon" /> | ||
| </a> | ||
| <a | ||
| href="https://www.kakaocorp.com/page/" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <img src="/assets/icon/ic_kakao.svg" alt="kakao-icon" /> | ||
| </a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="form__block form__link"> | ||
| <span>이미 회원이신가요?</span> | ||
| <a href="/login.html">로그인</a> | ||
| </div> | ||
| </form> | ||
| </body> | ||
| </html> | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ko 로 변경해주세요 😄
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fix: sprint2 수정 사항 반영
또 까먹었네요!
매번 꼼꼼하게 봐주셔서 감사합니다 :)