Conversation
There was a problem hiding this comment.
안녕하세요 서향님!
1주간 너무 고생하셨고, 과제도 열심히 해주신점 너무 고생하셨습니다👍
리뷰 확인 부탁드리며, 작은 수정 필요사항 몇 가지 있는데 참고하여 수정해주세요. 😄
전체적으로 리뷰가 필요한 부분은 여기서 추가로 알려드릴게요!
- 클래스명을 가독성 있도록 잘 지어주셨어요👏
여기에 BEM방법론도 참고하셔서 추가해보는것도 더 좋을 것 같습니다! - 시맨틱 태그들을 적절히 넣어주신점 👍 입니다.
- image들을 폴더 구조를 사용해서 관리하신 것 처럼 html도 폴더구조를 사용을 어떻게 해볼까 고민해보시는것도 좋을것 같습니다!
화면 너비에 따라 변경은 되나 1920px의 범위가 적용되지는 않았습니다.이부분은 반응형 디자인에 대해 알아보시면 많이 나올 것 같습니다. 반응형 디자인을 하는 방법은 여러가지가 있을텐데요, 여기서 구현하는 방법으론 calc을 활용하거나 media-query를 사용하는 등이 있을 것 같아요!- Netlify는 어떤 문제가 있는지 알려주시면 같이 확인해보면 좋을 것 같습니다 :)
이번 한주간 너무 고생하셨고 이번주도 화이팅입니다!!
| </div> | ||
| </footer> | ||
| </body> | ||
| </html> |
There was a problem hiding this comment.
현재 filechanged를 보시면 아래 사진처럼 하나의 오류가 나오게 됩니다.
이는 "End Of Line(EOL)" 이 없다는 경고입니다. 이를 없애려면 파일 내 코드 마지막 줄 뒤에 개행을 해주셔야 해요.
이 블로그를 보시면서 왜 마지막 줄에 개행이 없을 때 깃헙에서 오류를 보여주는지 확인해보시고, 사용하시는 코드에디터에서 설정을 해보시는 것을 추천드립니다! (물론 해결을 안해도 코드상에선 문제가 없지만, 코드리뷰할 때 불필요하게 이것에 한번 더 눈이 가는것을 줄일 수 있습니다!)
| @@ -0,0 +1,11 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
There was a problem hiding this comment.
main에는 ko로 잘 넣어주신 것을 보니 자동완성 되는것을 그대로 사용한것 같아요! 확인 한번 부탁드립니다!
There was a problem hiding this comment.
폴더구조를 잘 사용하셨어요!👏
image안에 있고, 확장자로 image라는것을 알 수 있어서 image가 붙어야하나? 라는 생각을 해봤습니다. (logo는 image가 안붙었길래요!)
| <a href="/market.html" class="banner-button">구경하러 가기</a> | ||
| <img src="/images/main-banner-image.png" alt="상단 배너 이미지" class="banner-img"> | ||
| </section> | ||
|
|
There was a problem hiding this comment.
현재 안보이는 인덴트(띄어쓰기)가 존재하네요!
저는 이런 부분을 확인하기 위해 TrailingSpaces라는 익스텐션을 vsc에서 사용하고 있습니다. 또한 설정에서도 저장 시 자동으로 불필요한 띄어쓰기는 삭제 처리를 해주고 있답니다~
서향님도 이런 부분은 설정을 셋팅해서 자동으로 삭제하게 한다면 신경쓰지 않고 코딩할 수 있을 것 같아요!
| } | ||
|
|
||
| .feature>img{ | ||
| width: 40%; |
| </section> | ||
| <!--feature2--> | ||
| <section class="feature" id="section-center"> | ||
| <img src="/images/feature2-image.png" alt="섹션2 이미지"> |
There was a problem hiding this comment.
alt값을 넣어서 웹접근성을 높여주셨어요!
그런데 센션2 이미지라고 만 되어있다면 정확히 어떤 이미지인지 알기 어려울것같습니다. 이 이미지에서는 돋보기 이미지와 같은 alt는 어떨까요?
| </div> | ||
| </section> | ||
| <!--feature2--> | ||
| <section class="feature" id="section-center"> |
There was a problem hiding this comment.
위에서section-title은 class로 정의되었는데 section-center는 id로 되어있는것이 통일성이 조금 없어보입니다!
HTML의 태그에서 하나가 여러개의 class를 가질 수 있고, 이를 css에서 적용을 할 수 있습니다. 이부분을 한번 참고해보세요!!
| <body> | ||
| <header> | ||
| <!--로고 로그인버튼--> | ||
| <a href="/main.html" alt="판다마켓 메인"><img src="/images/panda-market-logo.png" id="panda-logo" alt="판다 마켓 로고"></a> |
There was a problem hiding this comment.
| <a href="/main.html" alt="판다마켓 메인"><img src="/images/panda-market-logo.png" id="panda-logo" alt="판다 마켓 로고"></a> | |
| <a href="/main.html"><img src="/images/panda-market-logo.png" id="panda-logo" alt="판다 마켓 로고"></a> |
alt는 img태그에 들어가게 됩니다!
| <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css"> | ||
| <link rel="stylesheet" type="text/css" href='https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'> |
There was a problem hiding this comment.
pretendard가 중복으로 처리되는것 같은데 연유가 있으실까요??
요구사항
기본
심화
-[] 사용자의 브라우저가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 보세요.(설정값은 자유입니다)
주요 변경사항
스크린샷
멘토에게