[강희정] sprint3 #154
[강희정] sprint3 #154
Conversation
dongqui
left a comment
dongqui
left a comment
There was a problem hiding this comment.
희정님 이번 미션도 고생 많으셨습니다 :)
반응형에 대한 기본적이 이해는 잘 하고 계신 거 같습니다 💯 요구 사항을 조금만 더 꼼꼼하게 챙겨주시면 더욱 좋을 거 같아요!
질문 주신 부분은 리뷰 참고해 주세요 :)
| } | ||
|
|
||
| /* 회원가입 */ | ||
| .btn-signup { |
There was a problem hiding this comment.
login과 같은 버튼 아닌가요!? 🤣 공통 스타일을 재활용 하시면 유지 보수에 좋습니다 :)
| <!DOCTYPE html> | ||
| <html lang="ko"> | ||
| <head> | ||
| <meta property="og:title" content="판다마켓" /> |
| align-items: center; | ||
| } | ||
|
|
||
| .main-banner-text, |
There was a problem hiding this comment.
디자인 시안을 확인해 주세요~! 텍스트는 한 줄 입니다 :)
|
|
||
| /* responsive styles */ | ||
| /* Tablet */ | ||
| @media (min-width: 768px) and (max-width: 1199px) { |
There was a problem hiding this comment.
미디어 쿼리가 아직 익숙하지 않아 조금씩 어긋나는 게 있을 때마다 코드 양이 계속 늘어나는데 잘 되고 있는 건지 감이 안 옵니다......
->
충분히 잘 하셨습니다 👍
코드가 다소 늘어나는 것은 피할 수 없습니다 🤣 다만 반응형을 점진적으로 적용한다고 생각하시면 중복을 조금은 줄일 수 있습니다.
예를 들면 지금
@media (min-width: 768px) and (max-width: 1199px) {} 형태로 미디어 쿼리가 정의되어 있는데, 이 경우는 태블릿 스타일만 정의하게 됩니다.
@(max-width: 1199px) {} 이렇게 정의하면 모바일 + 태블릿 스타일을 정의할 수 있습니다. 여기에서는 태블릿 위주로 스타일을 정의하고 모바일 미디어쿼리에서는 모바일에서만 다른 부분을 추가로 처리하는 거죠!
예를 들면 현재 .info-card 부분 중복이 많은데, 아래처럼 태블릿->모바일로 점진적으로 적용하면 중복을 줄일 수 있습니다.
@media (max-width: 1199px) {
.info-card,
.info-card.reverse {
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 24px;
width: 100%;
max-width: 696px;
}
.info-card.reverse {
text-align: right;
align-items: flex-end;
}
}
@media (max-width: 767px) {
.info-card,
.info-card.reverse {
max-width: 344px;
}
}There was a problem hiding this comment.
그 외에 모바일 화면이 너무 복잡하면 모바일 퍼스트 전략을 쓰시거나 모바일 페이지를 아예 따로 만드시는 것도 방법입니다 :)
| order: 2; | ||
| } | ||
|
|
||
| .footer-sns-links { |
There was a problem hiding this comment.
모바일 푸터 부분을 어떻게 하면 디자인과 똑같이 나올지 잘 모르겠습니다
-> 이미 거의 다 하신 거 같습니다! 🤔
여기 마진 제거하고, .footer-inner에 align-items: start 넣어주시면 될 거 같습니다.
아니면 copyright을 그냥 position absolute로 넣으셔도 되고 grid-template-areas을 써보셔도 좋습니다 :)
| max-width: 400px; | ||
| } | ||
|
|
||
| .easy-login { |
2 participants
요구사항
기본
공통
1200px이상768px이상 ~1199px이하375px이상 ~767px이하375px미만 사이즈의 디자인은 고려하지 않습니다랜딩 페이지
24px, “로그인” 버튼 오른쪽 여백24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.16px, “로그인” 버튼 오른쪽 여백16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.로그인, 회원가입 페이지 공통
16px제외하고 내부 요소들이 너비를 모두 차지합니다.400px을 넘지 않습니다.심화
주요 변경사항
스크린샷
멘토에게