Conversation
각 요소에 padding으로 배치 -> 최대 너비 1200px로 할당 후 중앙 정렬 -> 두 번째 요소만 기본축 end 정렬
미디어 쿼리 값과 기본 값 바뀌어서 변경
전체 페이지 중앙 정렬 삭제 -> 로그인-회원가입 페이지 로고 위 공통 margin: 60px 할당
input의 font-family: Pretendard 추가 -> 브라우저 기본 값 때문에 적용이 안 되어서 직접 할당 placeholder의 line-height 삭제 -> chrome의 기본 값 !important 때문에 line-height 적용 안 됨 아이콘 CDN 링크 삭제
로고 클래스명 겹침으로 인한 크기 오류 -> 랜딩 페이지 / 로그인-회원가입 페이지를 기준으로 클래스명을 분리 --> 랜딩 페이지의 로고는 재사용 가능성이 있으므로, 로그인-회원가입 페이지만 변경 로고 이미지 깨짐 현상으로 lg 사이즈 이미지로 전부 변경 -> 기존 사이즈별 이미지 전부 삭제 -> lg 이미지 적용 후 각 조건에 맞게 너비와 높이 지정 랜딩 페이지 break-point: 375px 기준 로고 변경을 위한 이미지 파일 추가
There was a problem hiding this comment.
지윤님 3번째 스프린트 미션 고생하셨습니다.
배포해주셔서 작업물을 보면서 리뷰할 수 있어서 좋았네요~
아래는 전반적인 리뷰사항입니다
- 동일한 사항에 대해서는 한번만 코멘트를 답니다.
- font awesome 을 사용하려고 하신것 같은데 맞을까요? 지금은 사용하시는 부분이 안 보이는데, 나중에 사용하실 때 관련 파일을 import하시면 좋을 것 같습니다.
- 반응형 작업을 하실때 특정 사이즈 이하, 375px 미만의 경우 레이아웃이 깨지게 되니, body에 min-width를 주셔서 그 이하로는 내려가지 않게 하는것이 더 좋을 것 같습니다.
| <title>판다마켓</title> | ||
| <link rel="icon" href="images/icon/favicon-panda.png" /> |
There was a problem hiding this comment.
P2:
index 페이지외 페이지에도 파비콘을 설정해주시면 좋을 것 같습니다.
There was a problem hiding this comment.
P3:
최대한 기본적인 스타일링만 남겨두신 것 좋습니다 👍
| @media (min-width: 376px) { | ||
| .login__wrap { |
There was a problem hiding this comment.
P2:
CSS 파일의 작성 흐름을 보면 가장 큰 사이즈의 Wide PC css, MOB css, Tablet css, PC css 순으로 작성이 되어 있습니다.
작성 순서는 가능하면 오름차순, 내림차순 중 하나를 골라 작성하시는 것이 가독성측면에서 좋습니다.
There was a problem hiding this comment.
P3:
참고로 mobile 사이즈, 즉 작은 사이즈에서 큰 사이즈로 css 작성을 하는것을 모바일 퍼스트라고 합니다.
반대로 desktop 사이즈, 즉 큰 사이즈에서 작은 사이즈의 css 작성을 하는 것을 데스크탑 퍼스트라고 합니다.
어떤 방법론을 선택하시든 상관 없지만, 한가지를 고르셔서 코딩하시는 것을 추천드립니다.
https://www.reddit.com/r/Frontend/comments/yeccgh/is_it_better_to_develop_a_site_mobile_first_or/
| @media (min-width: 768px) { | ||
| } |
There was a problem hiding this comment.
P2:
빈 블록은 없는것이 가독성에 더 좋을 것 같습니다.
| @media (min-width: 768px) { | |
| } |
| } | ||
|
|
||
| .landing-vertical__content { | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding: 0 0 60px 0; | ||
| gap: 32px; | ||
| padding: 0; | ||
| } | ||
|
|
||
| .landing-vertical__title { |
There was a problem hiding this comment.
P3:
디자인에서는 2줄로 나타나는데 지금은 한줄로 나오네요~ 확인해보세요
There was a problem hiding this comment.
P3:
landing page의 h1 태그들 중 다른 태그들도 디자인과 다르니 같이 보시면 좋겠습니다.
| @@ -61,82 +57,218 @@ footer { | |||
| } | |||
|
|
|||
| .landing-vertical__btn-text { | |||
There was a problem hiding this comment.
P2:
화면 사이즈별로 최대 width가 정해져야 디자인처럼 나올 것 같습니다.
요구사항
Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
피그마 디자인에 맞게 페이지를 만들어 주세요.
React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.
기본
공통
PC: 1200px 이상
Tablet: 768px 이상 ~ 1199px 이하
Mobile: 375px 이상 ~ 767px 이하
랜딩 페이지
로그인, 회원가입 페이지 공통
심화
스프린트 3 미션 - 배포