[하유리] Sprint3

[hayuri1990]

요구사항

sprint mission 3

기본

공통

• 브라우저에 현재 보이는 화면의 영역(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 랜딩 페이지(“/”) 공유 시 좌측 예시와 같은 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정해 주세요.
• 미리보기에서 제목은 “판다 마켓”, 설명은 “일상의 모든 물건을 거래해보세요”로 설정합니다.
• 주소와 이미지는 자유롭게 설정하세요.

주요 변경사항

Netlify 배포

pandamarket3.netlify.app

스크린샷(tablet, mobile)

1. 랜딩페이지

2. 로그인 페이지

3. 회원가입 페이지

4. OGTag(페이스북, 카카오톡)

멘토에게

• 브라우저 크기를 축소시키면 두번째 <div>, 세번째 <div>가 마치 float을 적용한 것처럼 상단의 요소 위에 덮어 써지며, <div> 사이에 여백이 늘어나는 문제가 있습니다. 브라우저 크기를 조절할 때 <main>영역의 요소들이 여백을 포함해 일정 비율로 확대/축소 되도록 고정하고 싶은데, 아무리 해도 원하는 대로 구현이 안 되네요. 조언 부탁 드립니다.

[leejyart]

이 png 는 button tag 로 직접 구현해야할 것 같아요!

버튼에는 사용자의 인터랙션에 따라 다른 스타일을 적용하게 될 수 있으므로 태그를 사용하여 버튼을 구현하는 것이 좋습니다. 또한, 이렇게 직접 구현하게 된다면 CSS를 사용하여 hover나 click 등의 상태에 따라 버튼의 스타일을 쉽고 유연하게 변경할 수 있습니다.

[leejyart]

일반적으로 버튼에는 사용자의 인터랙션에 따라 다른 스타일을 적용해야 하므로, 이미지를 그대로 가져와 사용하기보다는 태그를 사용하여 버튼을 구현하는 것이 좋습니다. 또한, 이 경우에 CSS를 사용하여 hover나 click 등의 상태에 따라 버튼의 스타일을 쉽게 변경할 수 있습니다.

[leejyart]

<meta name="twitter:card" content="트위터 카드 타입(요약정보, 사진, 비디오)" /> 처럼, content 에는 카드 타입을 명시해주어야 합니다.

관련하여 참고할 수 있는 블로그 소개합니다!
https://velog.io/@byeol4001/Meta-Tag-OG%EC%98%A4%ED%94%88%EA%B7%B8%EB%9E%98%ED%94%84-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

[leejyart]

현재 카카오톡이나 페이스북의 meta 태그가 중복되고 있습니다. 일반적으로 카카오톡이나 페이스북 같은 소셜 미디어 플랫폼은 웹 페이지의 메타 정보를 자동으로 가져와서 미리보기를 생성합니다. (트위터의 경우 따로 적어주어야 하는 것이 맞습니다.) 따라서 이 경우에는 별도로 카카오톡이나 페이스북을 위한 메타 태그를 지정하지 않아도 될 것 같습니다.

[leejyart]

브라우저 크기를 축소시키면 두번째

, 세번째

가 마치 float을 적용한 것처럼 상단의 요소 위에 덮어 써지며,

사이에 여백이 늘어나는 문제가 있습니다. 브라우저 크기를 조절할 때 영역의 요소들이 여백을 포함해 일정 비율로 확대/축소 되도록 고정하고 싶은데, 아무리 해도 원하는 대로 구현이 안 되네요. 조언 부탁 드립니다.

이 문제는 주로 CSS의 레이아웃과 박스 모델 관련 속성을 조정하여 해결할 수 있습니다! 예컨데 container 에 display:flex, flex-direction:flex-column 을 지정해 주면, 3개의 자식요소들을 일정한 레이아웃에 맞게 배치해줄 수 있습니다. 이때 각 자식요소의 relative 속성 및 height 지정은 안하셔도 됩니다! 사이즈를 고정하게 되면 브라우저 크기에 따라 유연하게 변화하기 어려워질 수 있어요.

또 여러가지 방법이 있겠지만, gap 속성으로 요소들간의 여백을 일정 간격으로 유지할 수 있습니다.
조금 어렵다면, 첨부한 이미지 처럼 개발자 도구를 켜고 속성을 주면서 바로바로 수정해 보는 것도 도움이 될 수 있을거예요!