[임주민] Week3

[imkrmin]

요구사항

기본

• [기본] 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용했나요?

• [랜딩 페이지] 페이스북, 카카오톡, 디스코드, 트위터 등 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을 넘지 않나요?

심화

• [심화] 팀원의 위클리 미션 PR에 코드 리뷰를 남겼나요?

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

주요 변경사항

• 랜딩 페이지, 로그인 페이지, 회원가입 페이지 반응형으로 구현
• 메타태그 사용해서 미리보기 설정

스크린샷

• PC
  

• Tablet
  

• Mobile
  

• Meta tag 미리보기
  

멘토에게

• 크롬 개발자 모드 디바이스 모드에서 창 가로 세로 크기가 제대로 적용이 되지 않아 HTML 헤더에 ''를 추가했더니 그 때부턴 정상적으로 작동이 잘 되더라구요! 위 코드를 적어야만 제대로 적용이 되는 이유를 알 수 있을까요??
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[lunaticscode]

label 태그가 단순히 Form의 타이틀을 표시하는게 아닌 Focus, Blur 이벤트를 연결시키기 위해 사용합니다.

<label for = "form-id" />, <input id="form-id" /> 이렇게 연결시켜주시면 됩니다.

[imkrmin]

확인했습니다! 다음 위클리미션에 반영하도록 하겠습니당 👌

[lunaticscode]

[임주민]

• 크롬 개발자 모드 디바이스 모드에서 창 가로 세로 크기가 제대로 적용이 되지 않아 HTML 헤더에 ''를 추가했더니 그 때부턴 정상적으로 작동이 잘 되더라구요! 위 코드를 적어야만 제대로 적용이 되는 이유를 알 수 있을까요??
  : 헤더에 어떤 태그를 추가하셨다는건지 지금 보이지가 않아서요! 아마 메타 태그에서 뷰포트를 써서 해결했다~ 로 예상되는데 일단은 멘토링때 다시한번 얘기해주세요!
  (html태그를 여기다가 쓸때는 백틱(backtick)으로 감싸주셔야 보입니다!)

  <meta name="viewport" content="width=device-width, initial-scale=1.0">