Conversation
There was a problem hiding this comment.
미션 하느라 수고많으셨어요~👏🏻
스프린트 미션에 적혀있던 판다로고, 로그인 버튼 두개의 여백 관련해서 텍스트로는 이해하기 좀 어려워서 정확히 어떤 코드를 의도해서 미션을 주신건지 궁금합니다.
https://yunhyerim-pandamarket.netlify.app/
또는 https://sprint-mission-chanki.netlify.app/
결과가 되면 좋을 것 같아요.
관련해서 멘토링 시간에 좀 더 설명드릴게요
| } | ||
|
|
||
| body { | ||
| background-color: #ffffff; |
There was a problem hiding this comment.
body에 브라우저 기본 제공하는 margin이 있는 걸로 보여요
제거해주시는게 좋아요
| <body> | ||
| <img src="none.jpeg"> | ||
| </body> | ||
| </html> |
There was a problem hiding this comment.
파일의 마지막에 빈 줄이 포함되는 것이 좋아요.
동작에 문제가 있는 건 아니지만 잠재적 문제를 없애기 위함 입니다. (참고)
사용하는 에디터에서 end of line 또는 eol이라는 키워드로 설정할 수 있어요
| <header> | ||
| <div></div> | ||
| <a href="/"> | ||
| <img src="panda_logo.png" class="panda-logo"> |
There was a problem hiding this comment.
img 태그에는 alt 특성을 넣어주는 습관을 들이면 좋아요. (참고)
| display: grid ; | ||
| grid-template-columns: minmax(200px, 1fr) 153px minmax(0, 3fr) 128px minmax(200px, 1fr); | ||
| grid-template-areas: | ||
| ". p . l ." |
There was a problem hiding this comment.
p, l 같이 축약어 보단 단어를 보면 어떤 요소인지 바로 알 수 있는 이름이 좋아요.
|
|
||
| <body> | ||
| <header> | ||
| <div></div> |
There was a problem hiding this comment.
빈 div 박스를 사용하지 않고 header 또는 안의 요소들을 감싸는 박스에 padding, max-height, flex > justify-content > space-between 등의 옵션을 사용할 수도 있어요.
| } | ||
|
|
||
| .login { | ||
| cursor: pointer; |
There was a problem hiding this comment.
button 태그의 경우 일반적으로 cursor: pointer로 표시해주는 경우가 많아 전체 button 태그에 대해 설정하면 좋을 것 같아요.
| </a> | ||
| <div></div> | ||
| <a href="./login"> | ||
| <button class="login">로그인</button> |
There was a problem hiding this comment.
현재 동작에 문제 있진 않지만, a 태그 아래 button 태그가 있는 건 좋지 않아요. (참고)
button, a 둘 다 상호작용하는 태그이기 때문에 두 태그의 이벤트가 충돌하면 한 가지가 무시될 수 있어요.
a 태그 자녀로는 상호작용이 없는 요소를 넣도록 신경써주세요.
| } | ||
|
|
||
| .footer-grid { | ||
| display: grid ; |
There was a problem hiding this comment.
x축으로만 요소들을 쭉 나열해도 괜찮은 경우 flex 사용이 간결할 수 있어요
| ". p . l ." | ||
| ; | ||
| align-items: center; | ||
| padding: 9px ; |
There was a problem hiding this comment.
padding 없이 height를 70px로 고정하고 center를 맞추면 디자인과 더 일치하는 결과물이 나올 거 같아요.
| </p> | ||
| </div> | ||
| <div class="footer-sns"> | ||
| <a href="https://www.facebook.com/" target="_blank"> |
There was a problem hiding this comment.
_blank 설정할 때 noopener, noreferrer 설정도 고려하면 좋아요. (참고)
| </head> | ||
|
|
||
| <body> | ||
| <header> |
There was a problem hiding this comment.
다른 페이지로 이동하기 쉽도록 상단에 링크를 두는 요소는 nav태그가 더 좋을 것 같아요.
header태그는 콘텐츠의 제목이나 소개 또는 탐색하는 영역에 사용해요.
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게
스프린트 미션에 적혀있던 판다로고, 로그인 버튼 두개의 여백 관련해서 텍스트로는 이해하기 좀 어려워서 정확히 어떤 코드를 의도해서 미션을 주신건지 궁금합니다.
셀프 코드 리뷰를 통해 질문 이어가겠습니다.