[홍성현] sprint3

[hong0121]

공통

• 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다

랜딩 페이지

• Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
• Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
• 화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다.

로그인,회원가입 페이지 공통

• Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
• Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
• Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.

심화

• [] 페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 Linkbrary 랜딩 페이지(“/”) 공유 시 좌측 예시와 같은 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정해 주세요.
• [] 미리보기에서 제목은 “판다 마켓”, 설명은 “일상의 모든 물건을 거래해보세요”로 설정합니다.
• [] 주소와 이미지는 자유롭게 설정하세요.

스크린샷

멘토에게

• font-size를 변수 선언해서 사용하는 방법이랑 rem으로 font-size로 적용하는 부분이랑 겹치는 부분이 있는 것으로 보여, 둘 중 하나만 사용하면 될 것 같은 생각이 드는데, 이에 대한 확실한 정보를 가르쳐주세요!
• 반응형 작업을 할 때 모바일 태플릿 각각 최소사이즈를 맞춰놓고 작업을 해야하는 건지 궁금합니다. 저는 피그마 디자인 시안을 기준으로 작업하긴 했습니다.

*** login.css와 signup.css를 분리하려고 했으나 아직까지는 필요성을 느끼지 못하여 같이 쓰고 있습니다

[addiescode-sj]

수고하셨습니다!

주요 리뷰 포인트

• 미디어쿼리 사용 관련 피드백
• 이미지 리소스 최적화 관련 피드백

[addiescode-sj]

브레이크포인트 겹치는 지점 없게 잘 써주셨네요! :)

[addiescode-sj]

기본 스타일을 제일 작은 화면 (모바일)에 맞춰 작성하면 @media (min-width: 375px) and (max-width: 767px) 해당 미디어쿼리 평가문에서 스타일을 재정의할 필요가 없어질것같아요!

[addiescode-sj]

미디어 쿼리로 br 태그의 표시 여부를 제어하는 방식을 사용하고있는데, 단순 줄바꿈을 위해서 이런식으로 처리하기보다는
CSS 속성을 사용해 제어해주는게 더 깔끔한 방식일것같아요.

우선 줄바꿈이 필요한 위치에 Enter를 넣어주시고
CSS에서는 이런식으로 whitespace 속성을 조절하는건 어떨까요?

@media (max-width: 767px) {
  .hero__title {
    /* 모바일에서는 텍스트가 음절 단위로 자연스럽게 줄바꿈 */
    word-break: keep-all; 
    width: 100%;
  }
}

@media (min-width: 768px) {
  .hero__title {
    /* PC에서는 원하는 지점(Enter가 삽입된 지점)에서 줄바꿈 */
    white-space: pre-line;
  }
}

[addiescode-sj]

picture태그를 사용하셔도 괜찮지만 뷰포트에 따라 같은 이미지소스를 해상도만 다르게 최적화해서 보여주는 방식은 srcset, sizes 만으로도 충분합니다 :)

덧붙여, 첫 화면에 보이는 이미지가 아닌 스크롤을 쭉 내려야 보이는 이미지라면 레이지로딩을 적용할수도있고요 :)
아래 아티클 참고해보시고 리팩토링해볼까요?

참고

[addiescode-sj]

login-signup.css 보다는 auth.css 정도가 좀 더 확장성있는 네이밍을 고려했을때 나을것같네요 :)

[addiescode-sj]

질문에 대한 답변

멘토에게

• font-size를 변수 선언해서 사용하는 방법이랑 rem으로 font-size로 적용하는 부분이랑 겹치는 부분이 있는 것으로 보여, 둘 중 하나만 사용하면 될 것 같은 생각이 드는데, 이에 대한 확실한 정보를 가르쳐주세요!
• 반응형 작업을 할 때 모바일 태플릿 각각 최소사이즈를 맞춰놓고 작업을 해야하는 건지 궁금합니다. 저는 피그마 디자인 시안을 기준으로 작업하긴 했습니다.

*** login.css와 signup.css를 분리하려고 했으나 아직까지는 필요성을 느끼지 못하여 같이 쓰고 있습니다

font-size를 rem으로 쓸것인지 px로 쓸것인지 먼저 정하시고 해당 값이 여러 페이지에서 자주 쓰이는 값이라면 변수화하시면됩니다.

PR 본문 내에서 미디어쿼리 사용 관련해서 자세히 피드백 드렸습니다 :) 불필요한 스타일 재정의를 최소화하기위해서는 보통은 모바일 퍼스트로 접근하는게 좋다고 피드백드린거라 참고해보시면 좋을것같네요~