Conversation
There was a problem hiding this comment.
수민님 깔끔하게 잘 마무리 해주셨네요~!! 💯
스타일 파일을 구조화 하시려는 노력도 너무 좋습니다.
요구 사항을 조금만 더 꼼꼼하게 봐주시면 더욱 좋을 거 같습니다!!
새로 고침하면 루트 페이지로 이동해야 하나요?
-> 아닙니다~! 해당 경로 페이지를 그대로 유지하는 것이 일반적입니다.로그인 페이지에서 새로 고침을 하면 로그인 페이지를 유지하는 거죠 :)
commit을 적절하게 작성했을까요? 보통 사용하는 커밋 컨벤션이 따로 있을까요?
-> 네~! 작업 단위로 잘 끊어주셨고, 진행된 작업을 명확하게 표현해 주셨습니다. 컨벤션의 경우 팀이나 회사마다 다릅니다 :)
아래는 구글 컨벤션을 참고로 남겨드립니다!
https://developers.google.com/blockly/guides/contribute/get-started/commits
import와 link로 약간 무분별하게 CSS를 가져온 느낌이 있는데 다른 적절한 방법이 있을까요?
-> 일단 정리가 조금 필요할 거 같아요!
예를 들어 auth의 경우 typography를 import하는데 signin 페이지를 보면 link로 typography와 auth 둘다 불러오고 있습니다. import를 쓰실거라면 단방향으로 적용해 주시면 좋을 거 같아요. 예를 들면 typography나 color는 공통 스타일이니 global에서 모두 import하고 global 하나를 link로 불러올 수 있을 거 같네요!
아니면 import 없이 link로 전부 해결해도 좋습니다. 이 경우 css파일을 너무 작게 쪼개지 않는 게 도움이 되겠죠 :)
(일반적으로 css import는 성능 이슈로 지양되는 기능이긴 합니다.)
지금도 충분히 잘하셨습니다 👍 👍 실무에서는 css만 쓰지 않고 다양한 기술을 함께 쓰게 됩니다. 이후 학습 과정에서는 스타일 파일을 구분하거나 관리하는 게 지금 보다 훨씬 편하실 거에요 :)
| </div> | ||
| <form> | ||
| <div class="input-item"> | ||
| <label for="email">이메일</label> |
| type="password" | ||
| placeholder="비밀번호를 입력해주세요" | ||
| /> | ||
| <img |
There was a problem hiding this comment.
해당 아이콘은 단순 img가 아니라 기능을 가지는 요소입니다~!
접근성을 위해 role="button" 속성을 추가하거나, 버튼으로 감싸주시는 것이 좋습니다 :)
| @@ -46,7 +48,7 @@ <h1 id="banner-top" class="banner-font"> | |||
| </div> | |||
| <div class="section-content"> | |||
| <div class="section-title"> | |||
| <h2 class="section-tag">Hot item</h2> | |||
| <span class="section-tag">Hot item</span> | |||
| <h1> | |||
There was a problem hiding this comment.
h tag 관련해서 계층 구조를 다시 참고해 주시면 좋을 거 같습니다 :)
h1 tag는 페이지당 하나만 사용하는 것을 권장합니다.
https://developer.mozilla.org/ko/docs/Web/HTML/Element/Heading_Elements#사용_일람
씨맨틱은 해석에 따라 달라지기 때문에 애매한 영역이 분명히 있습니다.
명확한 의미에만 씨맨틱을 사용하고 애매하거나 단순 스타일이라면 span, div를 활용하셔도 좋아요 :)
| input::placeholder { | ||
| font-size: var(--text-lg); | ||
| line-height: var(--text-lg); | ||
| color: #1f2937; |
| color: #1f2937; | ||
| } | ||
|
|
||
| input { |
| } | ||
|
|
||
| .auth-switch a { | ||
| line-height: 16.71px; |
There was a problem hiding this comment.
헛 보통 소수점은 잘 사용하지 않아요 :) 피그마를 다시 확인해 주세요~!
| /></a> | ||
| </div> | ||
| <form> | ||
| <div class="input-item"> |
| @@ -27,13 +27,25 @@ img { | |||
|
|
|||
| body { | |||
| width: 100%; | |||
| padding-top: 70px; | |||
| } | |||
|
|
|||
| header { | |||
There was a problem hiding this comment.
해당 파일이 공통 스타일을 정의한다면, 특정 페이지에서만 적용되는 스타일은 제거되는 것이 좋겠네요 :)
header, footer 등은 로그인, 회원가입 페이지에서는 불필요합니다!
요구사항
스프린트 미션 2 시안
기본 요구사항
체크리스트 [기본]
체크리스트 [심화]
주요 변경사항
스프린트 미션 1 리뷰 반영
<html lang="ko">수정멘토에게