Conversation
kwonjin2
requested review from
withyj-codeit and
dongqui
and removed request for
withyj-codeit
kwonjin2
added
순한맛🐑
There was a problem hiding this comment.
권진님 고생 많으셨습니다~!
대체로 잘 구현해주셨고 접근성이나 시멘틱을 좀 더 신경써주시면 더욱 좋을 거 같아요 :)
심화 미션을 미디어 쿼리 없이 구현하려고 단위를 px에서 rem, %, vh, vw등으로 변환하려고 시도했다가 건드리지 말아야 할 것을 건드렸다는 생각에 포기하고 중도에 제출합니다.. 미디어 쿼리 없이 구현하려면 어떻게 하는지 궁금합니다!
-> 우선 미디어 쿼리와 rem, %, vh, vw 등은 서로 상호 보완하는 관계이지 서로 대체하는 관계는 아닙니다 ㅎ 미디어 쿼리와 상관 없이 우선 각 단위가 어떤 식으로 동작하는지 명확하게 파악하시는 게 중요할 거 같아요! 부모 요소를 중심으로 크기를 맞추는지, 뷰포트를 중심으로 크기를 맞추는지, 여기서 뷰포트가 의미하는 것은 무엇인지 등 작은 것부터 학습해보시면 좋을 거 같습니다! 각 단위에 대한 학습이 이루어졌다면 요구 사항을 잘 살펴보세요. 요구 사항을 봤을 대 해당 요소의 크기나 간격이 고정되어야 할지, 아니면 화면 크기나 부모 요소의 크기에 따라 유동적이어야 하는지 판단하셔야 합니다 :)
제가 잘 못한거 같은데 어떤 걸 잘못했는지 감이 잡히지 않아요. width, height, padding, margin, gap등등 어떨 때 px을 쓰고 어떨 때 %쓰고 이러한 단위를 적절하게 사용하는 방법을 모르겠어요..!
-> 대체로 잘 하셨습니다! 사실 정답은 없습니다ㅎ 결과는 한 가지인데 방법은 많죠!
다만 확신을 가지시기 위해서는 위에 말씀드린대로 작은 것부터 명확하게 학습하시고 정말 권진님의 의도대로 되었는지 판단하실 수 있어야 합니다 :) 계속 감이 안 잡히면 같이 해보셔도 좋아요~
| @@ -0,0 +1,132 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
There was a problem hiding this comment.
<html lang="ko"> lang에 신경써주세요.
SEO, 접근성에 도움이 됩니다!
| <a href="/items.html" class="See">구경하러 가기</a> | ||
| </div> | ||
| </div> | ||
| <img src="./assets/main.png" alt="" class="main-img" /> |
There was a problem hiding this comment.
img를 쓰실 때 alt를 넣어주시는 것이 접근성에 좋습니다!
| <div class="second-page"> | ||
| <img src="./assets/hot-item.png" alt="" /> | ||
| <div class="text-box"> | ||
| <p><span class="event-text">Hot item</span></p> |
There was a problem hiding this comment.
P는 문단을 나타내기 위해 사용됩니다! 여기서는 부적절한 거 같네요!
| <section> | ||
| <div class="landing-page"> | ||
| <div class="landing-page-text"> | ||
| <h2 class="large-text">일상의 모든 물건을 <br />거래해보세요</h2> |
There was a problem hiding this comment.
h tag 는 계층 구조로 사용하시는 것이 접근성에 좋습니다! 지금은 h1 없이 h2가 바로 나왔네요 🤔
https://developer.mozilla.org/ko/docs/Web/HTML/Element/Heading_Elements#사용_일람
| </div> | ||
| </section> | ||
|
|
||
| <section> |
There was a problem hiding this comment.
section은 테마성을 가진 컨텐츠를 그룹핑할 때 사용됩니다! 단순레이아웃 요소라면 div를 써주세요!
|
|
||
| <footer> | ||
| <div class="footer"> | ||
| <p><span class="design">©codeit - 2024</span></p> |
| } | ||
|
|
||
| .panda-logo-image { | ||
| width: 9.563rem; |
There was a problem hiding this comment.
rem 계산을 쉽계 하기 위해
html {
font-size: 62.5%;
}
이런식으로 root의 font size를 설정해서 쓰기도 합니다~ :)
| } | ||
|
|
||
| section { | ||
| padding: 0.1px; |
| <div class="landing-page"> | ||
| <div class="landing-page-text"> | ||
| <h2 class="large-text">일상의 모든 물건을 <br />거래해보세요</h2> | ||
| <div class="Seeflex"> |
There was a problem hiding this comment.
케이스는 한 가지로 통일 하시는 것이 좋습니다 :)
see-flex이런 식으로요! 그리고 좀 더 유의미한 클래스명을 지어주세요~!
| gap: 10px; | ||
| } | ||
|
|
||
| #JACJAC { |
|
main이 아니라 권진님 이름이 있는 브랜치로 pr 주셔야 합니다:) 이번엔 제가 수정했어요~~ |
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게