[진성진] Sprint 3 #32
[진성진] Sprint 3 #32
Conversation
dongqui
left a comment
dongqui
left a comment
There was a problem hiding this comment.
성진님 이번 미션도 깔끔하게 잘 마무리 해주셨네요~! 💯
꼼꼼하게 잘 구현해주셨습니다 :)
반응형 스타일을 작성하는 과정에서 중복된 스타일을 제외 하고 추가하다보니 미디어 쿼리 스타일과 미디어 쿼리 밖 스타일을 번갈아 찾아 봐 헤매는 경우가 있었습니다. 반응형 스타일을 좀 더 효율적으로 추가하는 방법이 있을까요?
-> 현재는 단일 페이지로 개발이 되고 있는데, 나중에는 좀 더 구조화 하실 수 있습니다~!
.button {
}
.button:hover {
background-color: #0056b3;
}
@media (min-width: 768px) {
.button {
}
}
이렇게 컴포넌트 단위나 논리 단위로 구조화해서 관리하는 거죠! 이후에 scss나 css in js 등을 배우시면 더욱 편해집니다. 지금은 반응형 개념 자체에 집중하셔도 좋습니다~! :)
히어로 섹션에서 데스크탑에서는 br 태그를 통해 줄 바꿈을 하는데, 태블릿/모바일에서는 줄 바꿈이 없어서 br 태그에 display: none; 속성을 주어 줄바꿈을 해제했습니다. 이렇게 줄바꿈을 없애는 것도 괜찮은 방식인지, 아니면 더 나은 방식이 있을 지 궁금합니다.
-> 잘 하셨습니다~! 👍
| <nav class="main-nav"> | ||
| <a href="/"> | ||
| <img src="src/assets/img/panda-logo.png" alt="판다마켓 로고" /> | ||
| <picture> |
| border-radius: 12px; | ||
| } | ||
|
|
||
| .home-section .inner .content { |
There was a problem hiding this comment.
태블릿이랑 모바일이랑 중복되는 부분들이 꽤 보이는데,
@media (max-width: 1200px) {
}
max만 정의하시면 중복을 줄이실 수 있습니다~
There was a problem hiding this comment.
지금도 충분히 잘하셨고 수정할 필요는 없습니다 ㅎㅎ 참고만 해주세요 :)
| property="og:url" | ||
| content="https://cozy-ito-panda-market.netlify.app/" | ||
| /> | ||
| <meta property="og:image" content="src/assets/img/open_graph_img.png" /> |
| } | ||
|
|
||
| /** 태블릿 반응형 */ | ||
| @media (min-width: 768px) and (max-width: 1199px) { |
There was a problem hiding this comment.
전반적으로 요구 사항을 굉장히 꼼꼼하게 처리해주셨네요~! 👍
2 participants
요구사항
기본
공통
(375px 미만 사이즈의 디자인은 고려하지 않습니다)
랜딩 페이지
로그인, 회원가입 페이지 공통
심화
주요 변경사항
스크린샷
배포 링크(Netlify)
태블릿
멘토에게
br태그를 통해 줄 바꿈을 하는데, 태블릿/모바일에서는 줄 바꿈이 없어서br태그에display: none;속성을 주어 줄바꿈을 해제했습니다. 이렇게 줄바꿈을 없애는 것도 괜찮은 방식인지, 아니면 더 나은 방식이 있을 지 궁금합니다.