[이서정] Sprint22 스프린트 미션 3

[Lseojeong]

배포 링크

https://snazzy-baklava-3e5b7c.netlify.app/

---

진행한 미션 버전

• 초급 (Ver 1)
• 중급 (Ver 2)

---

미션 요구사항

기본

공통

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

랜딩 페이지

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

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

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

심화

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

---

주요 변경사항 및 학습 포인트

• 버튼 disabled 스타일 적용
• 코드 포맷 정리

---

주강사에게

해결하지 못한 문제 / 궁금한 점

• 반응형에서 줄바꿈을 제어하기 위해 br 태그에 class를 주어 display: none으로 처리했습니다. br 태그를 숨기는 방식과, 문장을 span으로 감싸 CSS 레이아웃으로 처리하는 방식 중 어떤 접근이 더 적절한지 궁금합니다.

[ByungyeonKim]

안녕하세요, 서정님!

미션 3은 반응형 디자인을 중심으로 구성되어 있죠. 반응형 디자인은 모든 화면 크기와 해상도에서 잘 렌더링 되도록 하면서도, 사용성을 보장하는 데 의의가 있습니다.

우리가 잘 사용 중인 깃허브만 하더라도 하나의 웹 페이지 안에 모든 화면 크기에서 자연스럽게 레이아웃이 변경되고, 사용성이 좋게 설계되어 있어요.

참고로, 네이버의 경우 PC 화면용 페이지와 모바일용 페이지의 기기별 레이아웃이 미리 고정되어 있어요. 이처럼 기기에 최적화된 화면을 미리 정하고, 고정해놓은 것을 적응형 디자인이라고 합니다.

이번 미션에서는 PC 화면의 기준을 시작으로 반응형을 구현했어요.

리액트로 구현하는 미션에서는 모바일 화면을 기준으로 반응형을 구현해보는 건 어떨까요?
이를 모바일 퍼스트 접근 방식이라고 합니다. 모바일 화면을 기준으로 화면을 설계하면, 핵심 컨텐츠에 집중할 수 있게 되고, 점진적으로 확장하기 때문에 이점이 있어요.

모바일 퍼스트로 구현을 해보고, 비교해보세요! 🎨

반응형에서 줄바꿈을 제어하기 위해 br 태그에 class를 주어 display: none으로 처리했습니다. br 태그를 숨기는 방식과, 문장을 span으로 감싸 CSS 레이아웃으로 처리하는 방식 중 어떤 접근이 더 적절한지 궁금합니다.

: 현재 구현한 방법이 가장 편하고, 일반적이라고 생각해요. 다만, hero-line-break로 특정하기 보다는 클래스명을 line-break로 만들어 재사용하는 것이 좋아보여요.

features 섹션의 타이틀에서도 아래처럼 줄바꿈이 제거되어야 합니다.

그럼 선택자를 .banner-title .line-break, .feature-title .line-break과 같이 사용을 하면 됩니다! 또는, 클래스명을 짓지 않고 유형 선택자(.feature-title br)로 해도 되겠네요.

---

대부분 잘 구현해주셔서, 개선 내용보다는 개념이나 도전 과제에 대해 설명을 드렸네요.
이번 미션도 고생하셨습니다, 서정님! 👏

[ByungyeonKim]

input 태그의 기본 타입이 text이긴 하지만, 명시하면 더 좋을 것 같아요. 닉네임 입력 필드 부분을 확인해주세요!

[Lseojeong]

리뷰 감사합니다☺️
features 섹션의 타이틀 줄바꿈은 스프린트 미션 4에 반영했습니다!
말씀해주신대로 스프린트 미션 5에서는 모바일 화면을 기준으로 반응형을 구현해보고 비교해보겠습니다🙆‍♀️