[김서연] Sprint1 #9
Conversation
GANGYIKIM
left a comment
GANGYIKIM
left a comment
There was a problem hiding this comment.
서연님 첫번째 PR 수고하셨습니다~
리뷰 드린 코멘트는 모두 필수 반영사항은 아니고 코드에 정답은 없으니
보고 마음에 드시는 방향으로 수정하시면 좋겠습니다!
다음 주차도 화이팅입니다~
-
화면 최대 확대시 로그인 버튼의 모양이 줄어드는 원인을 알고 싶습니다.:
header의 좌우 padding값 200px가 적용되어 있어 로고와 로그인버튼이 차지할 충분한 공간이 없으며 div.banner에 적용된 display flex 속성으로 인해 자식들이 flex-shrink 1 값을 가지기 때문입니다. 따라서 flex 아이템 요소들, 서연님 코드에서 a.logo와 a#login의 경우 공간이 없을 시 줄어들게 됩니다. a#login 요소에 flex-shrink 0을 주시게 되면 공간이 없어도 줄어들지 않게 한다는 의미라 login 버튼이 잘 렌더링되는 것을 확인하실 수 있습니다. -
심화 체크리스트를 수행하려면 어떠한 부분을 수정해야 하는지 모르겠습니다.:
요구사항 그대로 rem, em, %, vh, vw 같은 값들을 이용해 화면 크기에 따라 달라지도록 구현해라 정도로 이해해주시면 좋을 것 같습니다. 구현해야하는 결과물이 제공되는 것이 편하시다면 추후 스프린트 미션에 진행됨에 따라 반응형 디자인이 제공되므로 그때 구현하셔도 됩니다~ -
flex외에 다른 레이아웃으로 구현하는 방법이 있는지 궁금합니다.:
특정 결과물을 구현하는 css 방법은 굉장히 다양합니다. flex도 가능하고, display inline-block, grid 같은 방식을 통해서도 가능합니다. 다만 어떤 방법을 쓰시던 다른 속성도 그에 따라 수정해주셔야할 가능성이 큽니다. -
코드를 작성할 때 상속과 자손을 어떻게 구상하며 구현해야 할지, 그리고 제가 작성한 코드에서 어떤 부분을 상속과 자손으로 표현할 수 있을지 궁금합니다.:
우선 css 상속은 부모 요소의 속성이 자손요소에게 영향을 주는 것을 의미합니다.html { font-size: 16px }를 통해 html 태그안의 body, div 모두 font size 16px를 가지게 되는 것을 의미합니다. css 에서 자손을 설명하기 위해서는 비슷한 자식에 대해서도 알아야 합니다.ul > li와 같은 css 선택자의 의미는 ul 태그의 자식, 즉 바로 하위에 속하는 li 태그를 의미합니다. 그와 달리 자손은ul li로 표현할 수 있습니다. 즉 ul 태그안의 모든 li들에 적용한다는 의미입니다.
서연님 코드에서 footer의 경우footer > a의 선택자는 footer 태그 바로 하위 a 태그를 의미하고, 이에 해당하는 요소가 없어 아무런 영향을 주지 못합니다.footer a의 경우 footer 태그의 모든 a 태그에 적용되게 되며 이 경우 a 태그는 footer 태그의 자손이라고 할 수 있습니다.
| cursor: pointer; | ||
| } | ||
|
|
||
| #login { |
There was a problem hiding this comment.
💊 제안
css에서 id 선택자는 우선순위가 높기때문에 가능하면 사용을 지양하는 것이 좋습니다~
만약 특정 목적으로 태그에 id를 주셨더라도 classname을 이용해 스타일링하시는 것을 추천드립니다~
|
|
||
| <body> | ||
|
|
||
| <header> |
There was a problem hiding this comment.
❗️ 수정요청
불필요한 공백은 없는것이 좋습니다~
| <body> | |
| <header> | |
| <body> | |
| <header> |
| <header> | ||
| <div class = "banner"> | ||
| <div class = "banner_button"> | ||
| <a class = "logo" href="/"><img src = "image/logo.png"></a> |
There was a problem hiding this comment.
❗️ 수정요청
불필요한 공백은 없는것이 좋습니다~
| <a class = "logo" href="/"><img src = "image/logo.png"></a> | |
| <a class="logo" href="/"><img src="image/logo.png"></a> |
| <div class = "cf-content"> | ||
| <h3 class = "cf-text"> |
There was a problem hiding this comment.
💊 제안
한 레포안에서는 동일한 룰을 따르는 것이 좋습니다. 다른 classname들은 약어 사용이 없으시기도 하고 줄이지 않는것이
가독성면에서도 좋을 것 같아요. 따라서 content-footer로 사용하시는 것을 추천드려요~
| <div class = "cf-content"> | |
| <h3 class = "cf-text"> | |
| <div class = "content-footer-content"> | |
| <h3 class = "content-footer-text"> |
| <div id="sns-link"> | ||
| <a href="https://www.facebook.com/" target="_blank"><img src="image/facebook.png" alt="페이스북" width="20"/></a> | ||
| <a href="https://twitter.com/" target="_blank"><img src="image/twitter.png" alt="트위터" width="20"/></a> | ||
| <a href="https://www.youtube.com/" target="_blank"><img src="image/youtube.png" alt="유튜브" width="20"/></a> | ||
| <a href="https://www.instagram.com/" target="_blank"><img src="image/insta.png" alt="인스타그램" width="20"/></a> | ||
| </div> |
There was a problem hiding this comment.
💊 제안
이 영역은 로고들의 모음이라고 할 수 있습니다. 관련된 요소들끼리 묶인 목록이니 의미록적인 마크업을 작성한다면 list 관련 태그로 작성하시는 것을 추천드립니다.
| <div id="sns-link"> | |
| <a href="https://www.facebook.com/" target="_blank"><img src="image/facebook.png" alt="페이스북" width="20"/></a> | |
| <a href="https://twitter.com/" target="_blank"><img src="image/twitter.png" alt="트위터" width="20"/></a> | |
| <a href="https://www.youtube.com/" target="_blank"><img src="image/youtube.png" alt="유튜브" width="20"/></a> | |
| <a href="https://www.instagram.com/" target="_blank"><img src="image/insta.png" alt="인스타그램" width="20"/></a> | |
| </div> | |
| <ul id="sns-link"> | |
| <li> | |
| <a href="https://www.facebook.com/" target="_blank"> | |
| <img src="image/facebook.png" alt="페이스북" width="20"/> | |
| </a> | |
| </li> | |
| </ul> |
| background-color: #1967D6; | ||
| } | ||
|
|
||
| /* Main - Header */ |
There was a problem hiding this comment.
👍 칭찬
파악하기 쉽게 관련된 css 들을 모아두시고 주석으로 구분해주신점 좋습니다!
There was a problem hiding this comment.
💊 제안
브라우저 마다 자체적으로 스타일을 가지고 있고 이를 초기화해 모든 브라우저에서 동일한 스타일을 보여주기 위한
밑바탕을 만드는 것이 좋습니다. 이러한 역할을 하는 css 파일을 reset.css 혹은 normalize.css 라고 합니다.
서연님께서 a 태그들을 스타일링 할때 text-decoration: none을 추가해주신 것은 브라우저가 자체적으로 a 태그에
text-decoration: underline 속성을 가지고 있기 때문입니다.
이런식으로 반복되는 css 문 작성을 줄이고, 예상치 않은 동작을 줄이기 위해 reset.css 를 추가하시는 것을 추천드려요~
어떠한 역할을 하는지, 어떻게 작성해야 하는지에 대해 궁금하시다면 reset.css, normalize.css 를 구글에 검색해보시면 다양한 파일이 나오니 확인해보시고 마음에 드는 것을 참고해보세요~
| body { | ||
| font-family: 'Pretendard', sans-serif; | ||
| } |
There was a problem hiding this comment.
❗️ 수정요청
브라우저 자체적으로 body 에 margin 8px이 적용되어 있어서, 사방에 여백이 생기네요~
확인 후 수정하시면 좋겠습니당.
2 participants
기본 요구사항
HTML, CSS 파일을 Netlify로 배포해 주세요.
URL: https://sprint-mission-01-pandamarket.netlify.app/
랜딩 페이지의 url path는 루트('/')로 설정합니다.
title은 "판다마켓"로 설정합니다.
화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다.
화면의 너비가 1920px 보다 작아질 때, "판다마켓" 로고의 왼쪽 여백 200px"로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다.
클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer 로 설정합니다.
"판다마켓" 클릭 시 루트 페이지('/')로 이동합니다.
'로그인'버튼 클릭 시 로그인 페이지('/login')로 이동합니다 (빈 페이지)
"구경하러가기"버튼 클릭 시('/items')로 이동합니다.(빈 페이지)
"Privacy Policy", "FAQ"는 클릭 시 각각 Privacy 페이지('/privacy'), FAQ 페이지('/faq')로 이동합니다.(모두 빈 페이지)
페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.
심화
스크린샷
멘토에게