Conversation
|
수고 하셨습니다 ! 위클리 미션 하시느라 정말 수고 많으셨어요. |
|
커밋 메시지 정말 깔끔하군요 👍👍👍 |
| const isFormFilled = inputs.every((item) => item.value); | ||
| if (isFormFilled) { | ||
| button.disabled = false; | ||
| } else { | ||
| button.disabled = true; | ||
| } |
There was a problem hiding this comment.
또한, 다음과 같이 작성할 수도 있어요:
| const isFormFilled = inputs.every((item) => item.value); | |
| if (isFormFilled) { | |
| button.disabled = false; | |
| } else { | |
| button.disabled = true; | |
| } | |
| const isFormFilled = inputs.every((item) => item.value); | |
| button.disabled = isFormFilled; |
어차피 isFormFilled는 boolean이 확정이기에 바로 대입하셔도 됩니다 😊
| @@ -3,9 +3,27 @@ | |||
| <head> | |||
| <meta charset="UTF-8" /> | |||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |||
| <meta | |||
| name="description" | |||
| content="당근마켓 게섯거라...! 요즘 대세는 푸바오 마켓..!" | |||
| @@ -31,7 +49,7 @@ | |||
| <header> | |||
| <div class="header-home__wrapper bg_wrapper"> | |||
| <div class="header-home"> | |||
| <h2 class="header-home__title h2_title"> | |||
| <h2 class="header-home__title header_text"> | |||
There was a problem hiding this comment.
오호. 훨씬 낫군요 !
목적이 더욱 명확해졌어요 굳굳 👍👍👍
| @@ -101,3 +101,31 @@ main { | |||
| .translucent { | |||
| opacity: 0.5; | |||
| } | |||
|
|
|||
| @media screen and (max-width: 767px) { | |||
There was a problem hiding this comment.
반응형 로직이 적은 것 보니 설계를 잘하신 것 같군요 👍👍
| /* http://meyerweb.com/eric/tools/css/reset/ |
There was a problem hiding this comment.
reset.css 적용 하셨군요 ! 좋습니다 ! 👍👍
| main { | ||
| gap: 16px; | ||
| } |
There was a problem hiding this comment.
해당 파일은 style.css입니다. 모든 페이지의 main에 스타일을 주고싶으신게 맞으실까요?
만약 아니라면 페이지 별 css 파일에 해당 스타일을 적용해보시는 것도 고려해보시면 어떨까 싶습니다 😊
There was a problem hiding this comment.
이 부분은 따로 클래스 지정자를 사용해서 스타일링해보겠습니다!
| .feature__title { | ||
| margin-bottom: 16px; | ||
| } | ||
|
|
||
| .main-footer__wrapper { | ||
| margin-top: 32px; | ||
| height: 927px; |
There was a problem hiding this comment.
height를 �고정하는 것보다는 요소를 감싸도록 만드는건 어떨까요?
푸터의 컨텐츠를 감싸고 padding을 조절하여 height를 조절하는게 어떨까요? height를 고정하게 된다면 예기치 못한 오버플로우가 발생할 수 있습니다 😊
| margin-top: 32px; | ||
| padding-top: 121px; | ||
| margin-top: 24px; | ||
| background-size: 497.91px; |
There was a problem hiding this comment.
헙 ㄷㄷㄷ.. 어쩌다가 .91px이 되었을까요..?
There was a problem hiding this comment.
피그마 디자인으로 제공된 픽셀가를 그대로 가져왔는데,
한번이라도 고민 해볼걸 그랬어요
|
추가로 페이지 별 |
|
정말 수고 많으셨습니다 윤호님 ! 윤호님 같은 적극적인 멤버가 있었기에 멘토링 미팅도 정말 즐겁게 임했던 것 같아요. 😊 |
요구사항
기본
공통
브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
(PC: 1200px 이상 / Tablet: 768px 이상 ~ 1199px 이하 / Mobile: 375px 이상 ~ 767px 이하)
랜딩 페이지
Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다.
로그인, 회원가입 페이지 공통
Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.
심화
주요 변경사항
스크린샷
멘토에게