Conversation
There was a problem hiding this comment.
안녕하세요! 우기님~
이번 스프린트 어떠셨나요! 구현하시느라 고생많으셨어요~👍
구현해주신 페이지와 코드 모두 잘 확인했구요, 몇가지 코멘트 남겨두었어요!
질문에 대한 답변은 아래에 해드리도록 하겠습니다.
반응형 처리를 할 때 화면의 너비가 줄어들수록 페이지의 각 요소들의 크기가 줄어들도록 설정했는데 맞는건지 모르겠습니다..
일단 스프린트에서 따로 반응형 화면이 주어지지 않은 것 같아요. 정답이 있는 부분이 아니라, 제 생각에는 잘 구현해주신 것 같은데요! 작은 화면에서도 깨지지 않고 정보를 잘 전달해주고 있으니까요.
다만 제가 생각했을 때에는 고민하시는 부분이 화면마다 media-query를 통해 px로 값을 조절하고 있기 때문에 그런 부분에 있어 다소 어색하게 느끼시는 걸로 보여요. 이런 부분들은 px로 해결하기보다는 max-width, width: 100% 등을 통해 화면이 몇 px인지에 관계 없이 전체 영역을 가져가게 함으로써 해결할 수 있을 것 같아요. 한번 요렇게도 도전해보세요! 조금 더 smooth한 느낌의 반응형 페이지를 만드실 수 있을거에요.
CSS의 class명을 설정할 때 너무 막 작성한 것 같아서 더 나은 작성법이나 기준이 있는지 궁금합니다!!
원래 네이밍이 어렵죠.. 흑흑 😢
너무 범용적인 네이밍(ex) <button class='btn'>) 보다는 semantic한 네이밍 사용하면 좋아요.
그리고 보통 camel case 대신 kebab case 많이 사용하고, 대문자는 잘 사용하지 않아요.
�그 외의 네이밍 기준들에 대해서는 아래에 몇가지 아티클 남겨둘테니, 한번 살펴보시면 좋을 것 같아요!
- CSS naming conventions
- 네이밍 컨벤션 중에 BEM 컨벤션 이라는 것도 있어요!
마지막으로 commit message 규칙도 한번 살펴보시구 적용해보시면 좋을 것 같아요! 👍
고생 많으셨구, 더 궁금하신 게 있으시다면 언제든지 알려주십쇼!
화이팅입니다~!! 🚗
| <script src="https://kit.fontawesome.com/f284e76b1d.js" crossorigin="anonymous"> | ||
| </script> |
There was a problem hiding this comment.
알고계시면 좋을 것 같아서 적어봐용!
script 태그의 위치에 따라 페이지 로드 속도가 조금씩 달라질 수도 있답니다! 페이지 로드시 script 태그를 만나면 html 로드가 일시중지되고 js파일부터 로드되기 때문이에요. 상황에 맞추어 사용해주시면 될 것 같아요! 관심있으시다면 더 나아가서 async, defer attribute를 살펴보시는 것도 추천드려요! 👍
| </a> | ||
| </div> | ||
| <div class="login-btn"> | ||
| <a href="http://127.0.0.1:5500/login.html"><button class="login-btn">로그인</button></a> |
There was a problem hiding this comment.
허걱순! 이렇게 적어주시면 배포 후 링크가 로컬 링크로 연결되는 문제가 있어요. 상대경로로 변경해주시면 페이지 이동이 원활하게 잘 될 것 같아용! 🥹
|
|
||
| <section class="section-reverse container"> | ||
| <div class="section-reverse-img"> | ||
| <img src="./assets/home02.png" alt="섹션1 이미지"> |
There was a problem hiding this comment.
이미지가 다른데 alt 텍스트는 섹션1 이미지로 위 home01 이미지와 같은 텍스트를 사용하고 있네요!
대체텍스트는 접근성 측면에서 중요한 부분이어서, 잘 작성해주시면 좋아요. 관련 아티클 한번 읽어보시는 것두 추천드려용! ✨
| <a href="http://127.0.0.1:5500/privacy.html"> | ||
| <p>Privacy Policy</p> | ||
| </a> | ||
| <a href="http://127.0.0.1:5500/faq.html"> | ||
| <p>FAQ</p> | ||
| </a> |
| </footer> | ||
| </body> | ||
|
|
||
| </html> |
There was a problem hiding this comment.
end of file 이슈가 있네요! 지금 파일 실행에는 이슈가 없지만 관행적으로 쓰이는 부분이라 확인해주시면 좋을 것 같아요! vscode prettier 설정에서 마지막에 개행을 넣어주는 설정 사용하시면 요런 부분들은 쉽게 없앨 수 있어요 :) 😆
| --hoverblue: #1967D6; | ||
| --clickblue: #1251AA; | ||
| --inactivecolor:#9CA3AF; | ||
| --backgroundblue:#CFE5FF; |
There was a problem hiding this comment.
hover-blue / click-blue 처럼 kebab case로 사용해보시는 건 어떨까요? 더 읽기 편해질 것 같아용! 🚀
| a{ | ||
| text-decoration: none; | ||
| color: #fff; | ||
| } |
There was a problem hiding this comment.
이런 부분들은 reset.css 한번 살펴보셔도 좋을 것 같아요! ✨
| <div class="login-btn"> | ||
| <a href="http://127.0.0.1:5500/login.html"><button class="login-btn">로그인</button></a> |
There was a problem hiding this comment.
login-btn class가 2번 들어갔는데 (div, button tag) 두 속성 모두 같은 style을 주시려고 했던게 맞을까용?
아래 css 파일을 보니, .login-btn button {} 에 스타일을 따로 주시고 계셔서, 궁금했어요!
There was a problem hiding this comment.
button에는 class를 작성할 필요가 없었습니다. 제 실수에요😂
| footer .policy-container a{ | ||
| display: none; | ||
| } | ||
| } |
There was a problem hiding this comment.
여기도 end of file 한번 신경써주시면 좋을 것 같아용! 🦖
| .section-reverse .section-reverse-description p{ | ||
| font-weight: 700; | ||
| font-size: 14px; | ||
| } | ||
| .section .section-description h2, | ||
| .section-reverse .section-reverse-description h2{ | ||
| font-size: 1.75rem; | ||
| } | ||
| .section .section-description h3, | ||
| .section-reverse .section-reverse-description h3{ | ||
| font-size: 1.25rem; | ||
| } |
There was a problem hiding this comment.
전반적으로 rem과 px을 혼용해서 사용해주시고 계신데, 혹시 어떤 기준으로 사용하고 계신지 궁금해요! 🤔
There was a problem hiding this comment.
특별한 기준이 있어서라기 보단 그냥 하나의 박스 안에 있는 문장들이라 박스 내에서는 rem을 써서 글자 크기의 간격을 설정하고자 했던 것 같습니다. px를 사용한건 원래 rem이었는데.. figma에 글자 크기가 정해져있다는 것을 코드를 작성한 후에 알아서.. 미처 나머지를 생각하지 못한거 같아요 😢
요구사항
기본
https://woogi-panda-market.netlify.app/
심화
주요 변경사항
스크린샷
멘토에게