[박지선] 스프린트 미션 1,2 완료#14
Hidden character warning
Conversation
| <header class="header"> | ||
| <div class="container"> | ||
| <div class="header__inner"> | ||
| <a href="/" class="header__logo" aria-label="판다마켓 홈으로 이동"> |
There was a problem hiding this comment.
aria-label을 활용해서 접근성까지 고려해주신 부분 좋습니다! 👍
| @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-std.min.css"); | ||
| @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"); | ||
|
|
||
| :root { |
There was a problem hiding this comment.
:root에 CSS 변수를 체계적으로 정의해주신 부분 좋습니다. 색상 관리가 한 곳에서 되니까 나중에 유지보수할 때 편해요. 👍
| } | ||
|
|
||
| .header__logo .header__logo-text { | ||
| color: #3692ff; |
There was a problem hiding this comment.
--Primary-100을 :root에 정의해두셨는데 여기서는 #3692ff를 직접 사용하고 있네요. 변수를 활용하시면 일관성이 높아집니다.
| .login-form__input:focus, | ||
| .register-form__input:focus { | ||
| outline: none; | ||
| border: 1px solid #3692ff; |
There was a problem hiding this comment.
focus 테두리 색상도 var(--Primary-100) 변수를 사용하면 좋을 것 같아요.
| border: 1px solid #3692ff; | ||
| } | ||
|
|
||
| .login-form:has(.login-form__input:focus) .login-form__submit { |
There was a problem hiding this comment.
:has() 셀렉터를 활용해서 input focus 시 submit 버튼 색상을 변경한 부분 인상적입니다. 😄 다만 :has()는 비교적 최근에 지원된 셀렉터라 구형 브라우저 호환이 필요한 경우 주의가 필요해요.
| <meta http-equiv="X-UA-Compatible" content="ie=edge" /> | ||
| <link rel="stylesheet" href="assets/base.css" /> | ||
| <link rel="stylesheet" href="assets/auth.css" /> | ||
| <title>Login</title> |
There was a problem hiding this comment.
<title>Login</title>으로 되어 있는데, 다른 페이지와 일관되게 한국어(로그인)로 작성하면 좋을 것 같아요.
| scroll-padding-top: var(--header-height); | ||
| -webkit-text-size-adjust: 100%; | ||
| height: 100%; | ||
| font-size: 16px; |
There was a problem hiding this comment.
html에 font-size: 16px을 고정하셨는데, 심화 요구사항의 브라우저 기본 폰트 크기 대응을 위해서는 이 값을 100%나 62.5%로 설정하는 것이 좋습니다. 고정 px는 사용자의 브라우저 폰트 크기 설정을 무시하게 돼요.
| </div> | ||
| </div> | ||
| </section> | ||
| <section class="featured-products featured-products--reverse"> |
There was a problem hiding this comment.
featured-products--reverse 같은 modifier 패턴으로 섹션 방향을 바꾸는 방식 잘 하셨습니다. BEM 활용을 잘 이해하고 계시네요. 😁
| @@ -1,50 +1,64 @@ | |||
| # 🐼 판다마켓 프로젝트 | |||
| # 🐼 판다마켓 | |||
There was a problem hiding this comment.
README에 프로젝트 구조와 파일별 역할을 표로 정리해주신 부분 좋습니다. 👍
|
지선님, BEM 네이밍 컨벤션을 일관되게 적용하고, CSS를 역할별로 모듈 분리한 점, 그리고 aria-label이나 label for 같은 접근성 요소를 챙긴 부분이 좋았습니다. 커밋이 2개로 파일 수 대비 적은 편이에요. 이번 작업의 특성상 다양한 이미지 에셋에 대한 추가가 있는데 에셋 부분은 별도의 커밋으로 분리해서 올리면 협업 시에 서로가 리뷰할 때 에셋 커밋은 제외하고 확인할 수 있어 활용해 보시면 좋을 것 같습니다. 궁금한 점 있으면 편하게 질문해주세요! 😁 |
There was a problem hiding this comment.
통상적으로 CSS 파일은 별도 폴더를 사용할 때 styles 네이밍을 사용하는 경우가 많아 참고해 보시면 좋을 것 같습니다.
2 participants
스프린트 미션 요구사항 체크리스트
랜딩 페이지 - 기본
/)로 설정/)로 이동/login)로 이동/items로 이동/privacy,/faq로 이동cursor: pointer설정랜딩 페이지 - 심화
공통 - 기본
로그인/회원가입 페이지 - 기본
/)로 이동#3692FF/signup으로 이동/login으로 이동로그인/회원가입 페이지 - 심화
강사님에게 드리고 싶은 말씀은 개인적인 내용이 있어서 메세지로 남겨두도록 하겠습니다!