Conversation
- 컨텐츠의 margin-top을 컨테이너의 padding-top으로 변경 - 시맨틱하지 못한 태그들 수정 - 위 아래 margin으로 간격벌리는 것을 한 컨텐츠당 하나의 마진이 들어가도록 변경
| <meta property="og:url" content="https://sayhimarket.netlify.app/" /> | ||
| <meta property="og:title" content="판다 마켓" /> | ||
| <meta | ||
| property="og:image" | ||
| content="https://sayhimarket.netlify.app/images/og-img.png" | ||
| /> | ||
| <meta property="og:description" content="일상의 모든 물건을 거래해보세요" /> | ||
| <meta property="og:locale" content="ko_KR" /> |
There was a problem hiding this comment.
og 태그 잘 넣어주셨네요 ! 첨부해주신 스샷을 보면 잘 작동하는것 처럼보입니다 !
og 태그가 무엇인지, 어떻게 동작하는지도 함께 찾아보시면 좋을 것 같네요 !
| <link rel="stylesheet" href="style.css" /> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <header class="header-container"> |
There was a problem hiding this comment.
header 부분의 마크업과 반응형 디자인이 완벽하네요 !
max-width를 주어서 헤더가 무한히 늘어나지 않도록 해주신것도 잘 하셨습니다 !
| @@ -17,82 +25,82 @@ | |||
| </div> | |||
| </header> | |||
|
|
|||
| <main> | |||
| <main class="main-whole"> | |||
There was a problem hiding this comment.
clamp 함수를 사용하셨네요 ! 저도 비슷하게 min, max 함수를 사용합니다.
clamp 함수가 반응형 구현할때 아주 좋은 접근법인것 같더라구요 !
| <p>일상의 모든 물건을<br />거래해 보세요</p> | ||
| <p> | ||
| 일상의 모든 물건을 <br class="br-tag banner-br" />거래해 보세요 | ||
| </p> | ||
| <a href="/items" class="top-btn"><span>구경하러가기</span></a> | ||
| </div> | ||
| </div> | ||
| <div class="main-container"> |
There was a problem hiding this comment.
sections에 위와 같은 패딩을 주셨는데, 컨텐츠를 감싸는 패딩같은 경우에는 main-container에 한번만 주는게 좀 더 효과적입니다.
| <p class="section-title"> | ||
| 인기 상품을 <br class="br-tag" />확인해 보세요 | ||
| </p> |
There was a problem hiding this comment.
clamp 함수를 여기도 활용을 잘 하셨는데 ,동작은 하지 않는것 같네요 ㅎㅎ 하지만 좋은 시도라고 생각합니다 ! ㅎㅎ
| <div class="bottom-inner"> | ||
| <p>믿을 수 있는<br />판다마켓 중고거래</p> | ||
| </div> | ||
| <p class="bottom-inner">믿을 수 있는<br />판다마켓 중고거래</p> |
There was a problem hiding this comment.
디자인 시안에는 없지만 팁을 드리자면 뷰포트너비를 임의대로 조절할때 main-bottom의 판다가 커져서 글자 뒤에 위치하는 경우가 있죠?
이런 경우에 padding-top을 조절해주면 글자랑 배경이랑 안겹칠 것 같다고 판단 할 수 있어요.
그럴 경우에 padding-top을 vw 단위로 컨트롤 할 수 있습니다. 임의의 값을 넣어보면서 시안이랑 비슷한 padding-top을 유지하되 배경과 안겹치게 할 수 있습니다 ㅎㅎ
| </div> | ||
| </main> | ||
|
|
||
| <footer class="footer-container"> | ||
| <div class="footer-inner"> | ||
| <div class="footer-left">©codeit - 2024</div> | ||
| <p class="footer-left">©codeit - 2024</p> |
There was a problem hiding this comment.
order을 줘서 간단하게 가장 뒤에 배치를 했네요. 이 방법도 쉽고 좋은 방법이네요 !
제가 생각했던 다른 방법으로는 p 태그를 2개 둘 수도 있다고 생각했습니다.
아래의 마크업과 스타일링이 정확한건 아니지만 원리만 설명드리면
<p id="A" class="footer-left">©codeit - 2024</p>
<div class="footer-center">
<a href="/privacy">Privacy Policy</a>
<a href="/faq">FAQ</a>
</div>
<ul class="footer-right">
<li>
<a href="http://twitter.com" target="_blank"></a>
</li>
<li>
<a href="http://youtube.com" target="_blank"></a>
</li>
<li>
<a href="http://instagram.com" target="_blank"></a>
</li>
<li>
<a href="http://facebook.com" target="_blank"></a>
</li>
</ul>
<p id="B" class="footer-left">©codeit - 2024</p>각각 A,B라고 한다면
A: PC 에서보임, 모바일에서 보이지 않음
B: 반대로 PC에서 안보임, 모바일에서 보임
뷰포트의 너비에 따라서 요소를 숨겨서 flex박스로 배치를 할 수 있겠다고 생각했습니다. ㅎㅎ
|
회원가입 페이지에서 눈모양 svg 이미지의 배경색이 input 의 배경색과 맞지가 않더라구요 이 부분만 맞춰주시면 될 것 같아요. |
|
반응형이 완벽하게 잘 구현이 되어있네요. 다음 미션도 화이팅입니다 !! |
공통
1200px이상768px이상 ~1199px이하375px이상 ~767px이하375px미만 사이즈의 디자인은 고려하지 않습니다랜딩 페이지
24px, “로그인” 버튼 오른쪽 여백24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.16px, “로그인” 버튼 오른쪽 여백16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.로그인, 회원가입 페이지 공통
16px제외하고 내부 요소들이 너비를 모두 차지합니다.400px을 넘지 않습니다.체크리스트 [심화]
사이트 미리보기