Skip to content

Conversation

@songmijin824
Copy link
Collaborator

요구사항

기본

공통

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

랜딩 페이지

  • Tablet 사이즈 왼쪽에 여백 24px, 오른쪽 여백 24px을 유지
  • Mobile 사이즈로 왼쪽에 여백 16px, 오른쪽 여백 16px을 유지
  • “Privacy Policy”, “FAQ”, “codeit-2024”, SNS 아이콘들의 간격이 줄어듭니다.

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

  • Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
  • Mobile 사이즈에서 좌우 여백 16px
  • Mobile 사이즈에서 내부 요소들의 너비가 400px을 넘지 않습니다.

심화

  • SNS에서 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정해 주세요

주요 변경사항

  • Tablet, Mobile 브라우저 크기에 따른 반응형 설정
  • ui.css font 설정 수정
  • layout.css 미디어쿼리 너비 기준 수정, margin, padding 수정

스크린샷

image

멘토에게

@dongqui dongqui changed the base branch from main to Basic-송미진 February 3, 2025 02:39
Copy link
Collaborator

@dongqui dongqui left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

미진님 이번 미션도 고생 많으셨습니다!

요구사항도 잘 챙겨주셨고, 역시 css에 능숙하시네요👍

<meta property="og:title" content="판다마켓,쇼핑몰">
<meta property="og:description" content="안녕하세요. 판다마켓입니다.">
<meta property="og:url" content="">
<meta name="Description" content="일상의 모든 물건을 거래해보세요" />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

메타 태그를 잘 넣어주셨네요! 👍

footer .inner .left { position: absolute; top:65px; }
.section .box_inner { padding:50px 0 0;}

.inner { padding-left:16px!important; padding-right:16px!important; }
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

important는 정말 필요한지 확인해보셔야 합니다! :)

.font_2 { font-size:1.5rem; }
.font_3 { font-size:1rem; }
/* tablet */
@media (max-width: 1199px) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

반응형도 꼼꼼하고 깔끔하게 잘 해주셨네요! 👍

@@ -0,0 +1,2 @@

- [ Netlify link ] https://pandamall001.netlify.app/ No newline at end of file
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

패스워드 아이콘이 background image로 되어있는데, 해당 속성의 경우 시각적인 역할만 하게 됩니다! 이후 미션에서 다루시게 되겠지만, 기능적으로 역할하거나 보여줘야하는 정보라면 background-image는 지양하시는 것이 접근성에 좋습니다 :)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아아! 넵! 다른방식으로 수정하겠습니다!

@dongqui dongqui merged commit 4df4de0 into codeit-bootcamp-frontend:Basic-송미진 Feb 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants