[홍수민] Sprint 1 #57
[홍수민] Sprint 1 #57
Conversation
dongqui
left a comment
dongqui
left a comment
There was a problem hiding this comment.
수민님 미션 하시느냐 고생 많으셨습니다!
스타일을 구조화하신 부분이 굉장히 인상적이네요!! 앞으로도 기대가 됩니다 :)
html 시맨틱, 접근성 부분만 조금 더 신경써주시면 더욱 좋을 거 같습니다~!
1920px 이상일 때와 1920px 이하일 때 동작하는 코드를 알맞게 작성했는지 잘 모르겠습니다..
-> 대체로 잘 해주셨습니다 :) �디자인 시안을 조금만 더 꼼꼼하게 챙겨주시면 더욱 좋을 거 같아요!
위는 수민님이 작업하신 페이지고 아래는 피그마입니다!
banner의 상단과 하단 이미지를 background-image 대신에 img로 나타내고 flex를 사용하여 정렬했는데 괜찮은 방법인가요..?
-> 네~! �잘 하셨습니다 👍 맞는 방법이 있다는 부담을 버리셔도 좋아요! 요구사항에 맞게 구현하시는 것이 중요합니다 :) flex를 사용하시는 것은 좋지만 위 말씀 드린대로 요소간의 간격, 그리고 이미지 크기를 잘 맞춰주시면 좋겠죠! (이미지 크기는 아래 코멘트 참고해 주세요! )
img의 width 나 flex의 gap에서 %를 사용할 때 어림잡아 짐작해서 사용하는 건가요?
-> 감으로 할 수도 있겠지만.. ��일반적인 경우는 아닙니다!
% 단위는 부모 요소를 기준으로 크기를 정할 때 사용됩니다!
예를 들어, 부모 크기의 절반으로 설정하려면 width: 50%를 사용하면 됩니다. 부모 크기가 변해도 항상 상대적인 비율을 유지할 때 유용합니다.
현재 img나 gap에 %를 사용하신 부분을 보면, 부모 요소의 크기가 고정되어 있죠.
이런 경우는 부모의 크기에 따라 유동적으로 변하는 값 보다는 px, rem 등을 활용하시는 것이 더 명확합니다 :)
물론 애매한 경우도 있을 수 있어요! 실무에서 그런 경우 디자이너분과 직접 소통하는 것도 방법입니다 :)
심화는 어떤 방식으로 코드를 작성해나가야 하는지 궁금합니다!
-> 설정 값이 자유로 주어진 만큼, 특정 UI를 목적으로 하기 보다는 다양한 단위(%, vh, vw, max-width, clamp 등)를 사용해 보시며 학습하시는 정도로만 해보셔도 좋아요~!
| @@ -0,0 +1,142 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
There was a problem hiding this comment.
<html lang="ko"> lang에 신경써주세요.
SEO, 접근성에 도움이 됩니다!
| <div class="section-content"> | ||
| <div class="section-title"> | ||
| <h2 class="section-tag">Hot item</h2> | ||
| <h1> |
There was a problem hiding this comment.
h tag 는 계층 구조로 사용하시는 것이 접근성에 좋습니다! h1은 페이지에 하나가 되어야합니다 :)
https://developer.mozilla.org/ko/docs/Web/HTML/Element/Heading_Elements#사용_일람
| @@ -0,0 +1,21 @@ | |||
| :root { | |||
| @@ -0,0 +1,62 @@ | |||
| @import url(../color.css); | |||
There was a problem hiding this comment.
벌써 컴포넌트 단위로 스타일을 정의해 주셨군요!! 😮
| <a | ||
| href="https://www.facebook.com/" | ||
| target="_blank" | ||
| rel="noopener noreferrer" |
There was a problem hiding this comment.
opener, referrer까지 꼼꼼하게 챙겨주셨군요! 💯
2 participants
요구사항
스프린트 미션 1 시안
기본 요구사항
체크리스트 [기본]
체크리스트 [심화]
멘토에게