Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[우재현] Sprint1 #3

Conversation

Woolegend
Copy link
Collaborator

@Woolegend Woolegend commented Sep 5, 2024

요구사항

판다마켓

기본

  • 랜딩 페이지의 url path는 루트('/')로 설정합니다.
  • title은 "판다마켓"로 설정합니다.
  • 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다.
  • 화면의 너비가 1920px 보다 작아질 때, "판다마켓" 로고의 왼쪽 여백 200px"로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다.
  • 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer 로 설정합니다.
  • "판다마켓" 클릭 시 루트 페이지('/')로 이동합니다.
  • '로그인'버튼 클릭 시 로그인 페이지('/login')로 이동합니다 (빈 페이지)
  • 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.
  • "Privacy Policy", "FAQ"는 클릭 시 각각 Privacy 페이지('/privacy'), FAQ 페이지('/faq')로 이동합니다.(모두 빈 페이지)
  • 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.

심화

  • 사용자의 브라우저가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 보세요.(설정값은 자유입니다)

주요 변경사항

  • viewport의 width와 :root의 font-size의 비율을 1520px : 16px을 기준으로 디자인했습니다.
  • viewport의 width가 1520px 이상이면 :root font-size는 16px로 고정했습니다.
  • viewport의 width가 1520px 미만이면 :root font-size는 1.05vw로 설정했습니다.
  • 각 요소의 크기는 rem을 활용해 디자인했습니다.

스크린샷

image

멘토에게

  • 모든 요소의 크기를 :root font-size와 비례하게 디자인하는 것은 좋은 관습인지 알고 싶습니다.
  • 페이지의 요소를 나눌 때 적절하게 나누었는지 알고 싶습니다.
  • 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

@Woolegend Woolegend added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Sep 5, 2024
@Woolegend Woolegend requested review from baeggmin and withyj-codeit and removed request for baeggmin September 5, 2024 13:46
- modifiy bottom banner alt
- change border radius value of login btn design from px to rem
@baeggmin
Copy link
Collaborator

baeggmin commented Sep 9, 2024

- 모든 요소의 크기를 :root font-size와 비례하게 디자인하는 것은 좋은 관습인지 알고 싶습니다.
rem 단위를 사용하면 모든 요소 간의 크기 비율을 일관되게 유지하기 쉽기 때문에 좋은 관습이라고 생각합니다. 다만, 모바일 화면처럼 디스플레이가 극단적으로 작아졌을 때 vw 를 기준으로 폰트 사이즈를 잡게 되면 텍스트가 극단적으로 작아지는 경우가 있어서, 실무에서는 보통 pc - tablet -mobile 용 고정 px 값을 정해두고 미디어 쿼리와 혼용해서 쓰는 것 같습니다. 물론 케바케가 있으니 당장 코드를 수정하실 필요는 없고 참고만 해주세요!

Copy link
Collaborator

@baeggmin baeggmin left a comment

Choose a reason for hiding this comment

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

미션을 전부 잘 구현해주셨네요!
코드는 크게 리뷰드릴 사항이 없었고, 오타와 몇 불필요한 파일만 수정해주시면 충분할 것 같습니다. 👍👍

PR 양식도 잘 지켜주셔서 감사드리고, 다음 PR 부턴 netlify 링크도 같이 첨부해주시면 리뷰하는 데 조금 더 편할 것 같습니다 ㅎㅎ

첫 과제인데 정말 고생 많으셨어요. 다음 과제도 화이팅입니다~!

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,150 @@
<!DOCTYPE html>
<html lang="kr">
Copy link
Collaborator

Choose a reason for hiding this comment

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

한국어의 lang 코드는 ko 입니다. 오타가 난거같네요 ㅎㅎ

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>판다마켓</title>
<script src="https://kit.fontawesome.com/472da87bcd.js" crossorigin="anonymous"></script>
Copy link
Collaborator

Choose a reason for hiding this comment

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

FontAwesome 에서 아이콘 불러와서 쓰는 것도 좋은 방법입니다. 다만 현재 피그마의 아이콘과 불러온 아이콘의 디자인이 다른 부분이 좀 있는 것 같아요 (인스타그램 아이콘). 실무에서는 세부적인 디자인 가이드를 따르는게 중요하기 때문에 아이콘도 img 처럼 svg 파일로 로컬에 저장해서 사용하곤 합니다. 참고 부탁드려요~!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

넵. 다음 미션에 바로 적용하겠습니다!

<link rel="stylesheet" href="style.css">
</head>

<body>
Copy link
Collaborator

Choose a reason for hiding this comment

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

html 구조는 명확하고 계층적으로 잘 나누어주셨습니다 👍
container, banner, card, btn 등 classname 도 직관적으로 잘 지어주셨네요. 또 나름의 규칙을 가지고 classname 을 확장해주신 것도 잘 해주셨습니다.

@baeggmin baeggmin merged commit d32a446 into codeit-bootcamp-frontend:Basic-우재현 Sep 9, 2024
@baeggmin
Copy link
Collaborator

baeggmin commented Sep 9, 2024

앗 Netlify 링크 올려주셨군요;; approve 한 후에나 발견했네요;;
다음에도 지금처럼 PR 에 올려주시면 감사하겠습니다 🙇‍♀️

baeggmin pushed a commit that referenced this pull request Oct 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants