Conversation
There was a problem hiding this comment.
안녕하세요 수형님!
구현해주신 코드와 배포해주신 사이트 잘 봤습니다! 🤸
전반적으로 반응형도 잘 구현되어있고, 군더더기 없이 잘 만들어주신 것 같아요. 또 grid, reset-css, css variables 등의 다양한 속성을 사용하신 점도 인상깊었어요. 👍
멘토링에서 잠깐 이야기드렸던 commit message 규칙 한번 보시고, 다음 커밋부터는 조금 더 세분화되고 구체적인 커밋 메시지가 있으면 더 좋을 것 같아요!
이외에 몇가지 코멘트 남겨드렸는데, 확인해보시면 좋을 것 같아요.
고생하셨습니다~! 😎
| @@ -0,0 +1,48 @@ | |||
| # 코드잇 스프린트 6기 프로젝트 | |||
| ### 배운점 | ||
|
|
||
| - z-index 사용 시 쌓임 맥락을 주의해야 할 것 같다. | ||
| - Netlify 배포 시 한글이 깨지는 현상이 있었는데, 주의해야 할 것 같다. |
| background-color: var(--main-darker); | ||
| } | ||
|
|
||
| /* 메인 */ |
There was a problem hiding this comment.
주석을 통해 어떤 부분에 대한 스타일인지 나타내어 주신 부분 넘 좋네요. 👍
다음 스텝으로는 더 세부적인 파일 분리도 한번 도전해보시는 것도 좋을 것 같습니당!
| } | ||
| body { |
There was a problem hiding this comment.
가독성 차원에서 각 스타일 사이에 개행이 있으면 더 좋을 것 같아요. 요런 부분은 vscode prettier 설정을 통해 녹여낼 수 있을 것 같아요! 🚗
| @charset "utf-8"; | ||
| @import url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"); | ||
| @import url("https://cdn.jsdelivr.net/npm/fonts-archive-rokafsans/ROKAFSans.css"); |
| align-items: center; | ||
| color: var(--gray700); | ||
| } | ||
| .item:nth-child(2n-1) { |
| <a | ||
| href="https://www.facebook.com/" | ||
| class="facebook" | ||
| aria-label="facebook" | ||
| target="_blank" | ||
| ></a> |
There was a problem hiding this comment.
요런 부분은 self-closing 태그를 사용할 수도 있답니당!
| <a | |
| href="https://www.facebook.com/" | |
| class="facebook" | |
| aria-label="facebook" | |
| target="_blank" | |
| ></a> | |
| <a | |
| href="https://www.facebook.com/" | |
| class="facebook" | |
| aria-label="facebook" | |
| target="_blank" | |
| /> |
| </header> | ||
| <main> | ||
| <div class="visual"> | ||
| <img src="images/panda_top.svg" class="visual__bg" alt="" /> |
There was a problem hiding this comment.
접근성 측면에서 alt tag는 꼭 붙여주는게 좋답니당! 🥹 (관련 아티클)
| html { | ||
| font-size: 10px; | ||
| } | ||
| body { | ||
| overflow-x: hidden; | ||
| font-size: 1rem; | ||
| } |
There was a problem hiding this comment.
rem, px을 함께 사용하셨는데 혹시 어떤 기준으로 px과 rem을 사용하고 계신지 궁금해요! 🙋♀️
| } | ||
| a, | ||
| button { | ||
| color: #666; |
There was a problem hiding this comment.
variables가 요런 부분들에도 적용되면 좋을 것 같아요!
요구사항
기본
심화
주요 변경사항
Netlify 링크
판다마켓