[강희정] sprint1 #135
[강희정] sprint1 #135
Conversation
There was a problem hiding this comment.
희정님..!
요구 사항도 꼼꼼하게 잘 챙겨주셨고 특별히 리뷰 드릴 거 없이 깔끔하게 잘 해주셨습니다! 시멘틱 태그 조금만 챙겨주시면 더욱 좋을 거 같습니다 💯
마지막 카드 밑에 회색 여백이 있는데 저것도 꼭 맞춰서 구현을 해야 하는 건지 구현을 해야 한다면 어떤 식으로 구현을 해야 하는지 궁금합니다
-> 피그마 기본 프레임에 들어간 배경 색상 같네요. 중요한 부분은 아니라.. 그냥 넘기셔도 될 거 같습니다..!(?) 만약 구현한다면, section 부모에 특별히 스타일 들어가고 있는 게 없어서 간단하게 div하나 추가 하셔도 될 거 같아요 :)
반응형을 일단 main-banner에만 적용을 해 뒀는데 반응형을 어떤 식으로 어떻게 구현을 해야 하는 건지 잘 이해가 안 됩니다.
-> 반응형은 미션 3에 본격적으로 시안과 요구사항이 주어집니다~! 심화 요구 사항 때문이시라면, 유연한 사이즈 단위(rem, %, clamp...)를 사용하라는 의도 같은데, 충분히 잘 하셨으니 넘어가셔도 좋습니다 :)
| @@ -0,0 +1,140 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="ko"> | |||
| <header class="header"> | ||
| <div class="header-inner"> | ||
| <a href="/panda-market/" class="logo"> | ||
| <img src="./assets/images/panda_logo.svg" alt="판다마켓 로고" /> |
| <img src="./assets/images/Img_home_02.svg" alt="상품 검색 이미지" /> | ||
| </div> | ||
| <div class="info-card-text"> | ||
| <p class="info-card-label text-2lg-bold">Search</p> |
There was a problem hiding this comment.
P는 문단을 나타내기 위해 사용됩니다! 여기서는 부적절한 거 같네요 🤔
| align-items: center; | ||
| width: 100%; | ||
| max-width: 1200px; | ||
| padding: 0 clamp(16px, 6vw, 24px); |
| max-width: 1200px; | ||
| padding: 0 clamp(16px, 6vw, 24px); | ||
| margin: 0 auto; | ||
| box-sizing: border-box; |
There was a problem hiding this comment.
보통 box-sizing은 일관성을 위해
* {
box-sizing: border-box;
}이런식으로 공통 스타일로 맞추고 시작합니다 :)
| white-space: nowrap; | ||
| } | ||
|
|
||
| .info-card.reverse { |
| <a href="https://x.com/?lang=ko" target="_blank"> | ||
| <img src="./assets/icons/ic_twitter.svg" alt="Twitter" /> | ||
| </a> | ||
| <a |
There was a problem hiding this comment.
외부 링크를 target="_blank" 속성을 사용하여 새 탭에서 열리도록 설정되어 있습니다. 이 경우 보안상 rel="noopener noreferrer" 속성을 추가하는 것이 좋습니다.
https://velog.io/@parkseonup/noopener%EC%99%80-noreferrer
요즘 현대 브라우저는 기본으로 처리 되긴 하지만.. 참고해 주세요 🤣
| </body> | ||
|
|
||
| <!-- 푸터 --> | ||
| <footer class="footer"> |
There was a problem hiding this comment.
body는 문서의 콘텐츠를 포함하는 부분으로, 모든 시각적 요소와 콘텐츠는 body 내에 있어야 합니다~! footer도 문서의 콘텐츠 중 하나이므로 body 안으로 들어가야 합니다!
2 participants
요구사항
기본
1920px이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다.1920px보다 작아질 때, "판다마켓" 로고의 왼쪽 여백200px"로그인" 버튼의 오른쪽 여백200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다.cursor: pointer로 설정합니다.심화
주요 변경사항
스크린샷
멘토에게