[황은지]Week3

[eunji-0623]

요구사항

기본

• 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용했나요?
  PC: 1200px 이상
  Tablet: 768px 이상 ~ 1199px 이하
  Mobile: 375px 이상 ~ 767px 이하
  375px 미만 사이즈의 디자인은 고려하지 않습니다

랜딩페이지

• 페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 Linkbrary 랜딩 페이지(“/”) 공유 시 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정했나요?
• 미리보기에서 제목은 “Linkbrary”, 설명은 “세상의 모든 정보를 쉽게 저장하고 관리해 보세요”로 설정했나요?
• 주소와 이미지는 자유롭게 설정했나요?
• Tablet 사이즈에서 화면의 너비가 1199px 이하로 작아질 때 “Linkbrary” 로고와 “로그인” 버튼 사이의 간격은 변하지 않게 고정값으로 유지하되 좌우 여백이 줄어드나요?
• Tablet 사이즈에서 최소 좌우 여백은 “Linkbrary” 로고의 왼쪽에 여백 32px, “로그인” 버튼 오른쪽 여백 32px을 유지하고“Linkbrary” 로고와 “로그인" 버튼의 간격이 가까워지나요?
• PC, Tablet 사이즈의 이미지 크기는 고정값을 사용했나요?
• Mobile 사이즈의 이미지는 좌우 여백 32px을 제외하고 이미지 영역이 꽉 차나요?
  (이때 가로가 커지는 비율에 맞춰 세로도 커져야 합니다.)
• Mobile 사이즈 너비가 커지면, “Privacy Policy”, “FAQ”, “codeit-2023”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 커지나요?

로그인, 회원가입 페이지

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

심화

• 랜딩 페이지 Mobile 사이즈에서 제품 소개 영역의 순서를 제목, 설명, 이미지 => 제목, 이미지, 설명 순서로 변경했나요?

주요 변경사항

• PC, 태블릿, 모바일 사이즈에 맞게 레이아웃이 변경되도록 구현

스크린샷

멘토에게

• 심화 요구 사항을 어떤 방식으로 구현하는 게 좋을 지 잘 모르겠습니다.

현재 방식은 html에 모바일 버전 레이아웃을 추가해서 display: none으로 가려뒀다가
모바일 사이즈가 됐을 때 display를 다시 보이게 하는 방식입니다.
이런 방식으로 만들어도 괜찮을지 아니면 어떤 방식으로 만드는 게 좋을 지 궁금합니다.

[devym-37]

잘 작성해주셨습니다.
작성해주신대로, media 쿼리로 스타일 분리로 하셔도 괜찮습니다.
하지만, 중복된 내용의 html 코드가 작성되어 있으니, 해당 부분은 한번만 작성하고,
css를 이용해서 해상도별 대응이 되도록 수정해보시면 좋을 것 같습니다.
고생하셨습니다 👍