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.

Sign up for GitHub

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

Jump to bottom

[이대양] Sprint1 #39

Merged
merged 1 commit into from
Mar 17, 2024
Merged

[이대양] Sprint1 #39

merged 1 commit into from
Mar 17, 2024

Conversation

oceanlee-seoul
Copy link
Collaborator

요구사항

기본

  • PC사이즈만 고려해 주어진 디자인을 구현합니다.
  • HTML, CSS 파일을 Netlify로 배포해 주세요.
  • 랜딩 페이지의 url path는 루트(‘/’) 입니다.
  • title은 “판다마켓”으로 설정해 주세요.
  • 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 해주세요.
  • 화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px“로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 해주세요.
  • 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 cursor: pointer를 설정해 주세요.
  • “판다마켓” 클릭 시 루트 페이지(‘/’)로 이동시켜주세요.
  • “구경하러 가기" 클릭 시 (“/items”)페이지로 이동시켜주세요.(빈 페이지)
  • “로그인”버튼 클릭 시 로그인 페이지(‘/signin’)로 이동합니다
  • “구경하러가기”버튼 클릭 시(’/items’)로 이동합니다.
  • “Privacy Policy”, “FAQ”는 클릭 시 각각 아래 페이지로 이동합니다
- Privacy 페이지(‘/privacy’) 
- FAQ 페이지(‘/faq’)

심화

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

주요 변경사항

스크린샷

캡쳐 이미지

멘토에게

  • 기존에 퍼블리싱 강의를 수강한 적이 있고, 그 후로 퍼블리싱 몇 번 해봤는데 제가 코드에서 보여지는 습관이 괜찮은지 잘모르겠습니다. 혹시 이상하게 보여지는 부분이 있으면 가감없이 말씀해주시면 감사하겠습니다!!!!

@oceanlee-seoul oceanlee-seoul requested a review from jyh0521 March 15, 2024 11:23
@oceanlee-seoul oceanlee-seoul added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Mar 15, 2024
jyh0521
jyh0521 approved these changes Mar 17, 2024
View reviewed changes
Copy link
Collaborator

@jyh0521 jyh0521 left a comment

Choose a reason for hiding this comment

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

경험이 있으셔서 그런지 잘 만드셨네요 ㅎㅎ 고생하셨습니다!

mission_1/index.html
@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html lang="en">
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"로 바꿔주시면 어떨까요?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

넵!!

mission_1/index.html
Comment on lines +13 to +16
<a href="/">
<img src="assets/logo.png" alt="판다마켓 로고" />
</a>
<a href="signin.html"><button class="login-button">로그인</button></a>
Copy link
Collaborator

Choose a reason for hiding this comment

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

태그는 태그 사이에 넣고 개행으로 구분해주셨는데, 태그는 한줄로 사용하신 이유가 있을까요? 특별한 이유가 있으시다면 그대로 두셔도 괜찮습니다. 아니면 통일해주시는걸 추천드려요!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

이유는 없습니다 ㅠㅠ prettier extension을 너무 믿고 indentation 신경을 너무 안쓴 것 같습니다!
아래 a 태그에 개행 추가했습니다!

mission_1/style.css
Comment on lines +1 to +10
:root {
--brand-color: #3692ff;
--button-hover: #1967d6;
--button-clicked: #1251aa;
--banner-background: #cfe5ff;
--gray-200: #e5e7eb;
--gray-400: #9ca3af;
--gray-700: #374151;
--gray-900: #111827;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

컬러를 따로 관리해주시는 점 좋네요! 이렇게 활용하면 어떤 점이 좋은지도 알고 계신가요?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

일반적인 프로그래밍에서 변수를 사용하는 이유와 같다고 생각합니다!
컬러 코드 적용하기 편리하며, 컬러가 바뀔 때 모든 라인이 아니라 :root 안에 변수 값만 바꿔주면 되고,
협업 시에 따로 color 파일을 import하는 식으로 사용해서 편리하다고 생각합니다!

Copy link
Collaborator

Choose a reason for hiding this comment

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

잘알고 계시네요 ㅎㅎ

mission_1/style.css
gap: 32px;
}
.main_banner .container .text_wrapper h1,
.footer_banner .container .text_wrapper h1 {
Copy link
Collaborator

Choose a reason for hiding this comment

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

두 가지 경우의 h1에서 같은 폰트 스타일을 사용하고 있는 경우기때문에, 해당 css를 class명으로 따로 지정해주면 필요할때만 꺼내서 사용할 수 있어서 더 편리할 것 같습니다!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

스크린샷 2024-03-19 오후 3 38 43 스크린샷 2024-03-19 오후 3 39 01

말씀하신대로 class 적용해주었습니다!
혹시 css 코드 작성할 때
전자처럼 class를 상속 관계에 따라 쭉 써주는 게 좋을까요,
아니면 후자처럼 좀 생략하는 게 좋을까요?
어떤 스타일이 관행인 지 궁금합니다!

Copy link
Collaborator

Choose a reason for hiding this comment

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

그것은 사람 스타일마다 차이가 좀 있을것 같습니다. 저는 개인적으로 간결하게 적는것을 좋아해서 두번째 방법을 주로 사용합니다!

mission_1/style.css
footer .container .footer_nav a {
font-weight: 400;
font-size: 16px;
line-height: 19.09px;
Copy link
Collaborator

Choose a reason for hiding this comment

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

브라우저는 소수점 단위의 픽셀 값을 처리할 때, 이를 가장 가까운 정수 값으로 반올림하거나 내림하여 해상도나 표시 품질에 영향을 줄 수 있습니다. 그런데 이런 올리고 내리는 방식이 브라우저마다 달라서 이슈가 생길 수 있기 때문에 px 값에 소수점이 들어가는 것은 권장하지 않습니다.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

아 그렇군요..처음 알았습니다! 명심하겠습니다!!
상세한 리뷰 감사드립니다 :) :) :)

@jyh0521 jyh0521 merged commit b1f528d into codeit-bootcamp-frontend:part1-이대양 Mar 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jyh0521 jyh0521 jyh0521 approved these changes

Assignees
No one assigned
Labels
매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@oceanlee-seoul @jyh0521