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 #2

Merged
merged 2 commits into from
Jan 7, 2025
Merged

[나예진] sprint1 #2

merged 2 commits into from
Jan 7, 2025

Conversation

NaYejin94
Copy link
Collaborator

@NaYejin94 NaYejin94 commented Jan 6, 2025 •
edited
Loading

요구사항

UI 디자인 기초 토픽을 수강해 보세요.

피그마 디자인에 맞게 페이지를 만들어 주세요.

React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.

HTML, CSS 파일을 Netlify로 배포해 주세요. (참고: https://www.codeit.kr/learn/5309)

PC사이즈만 고려해 주어진 디자인으로 구현합니다.

기본

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

심화

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

주요 변경사항

스크린샷

image

멘토에게

  • 이미지 크기나 간격 font-size는 피그마를 보고 눈대중으로 맞춰서 하면 되는걸까요?
  • main부분을 작성할 때 grid영역에서 이미지가 자꾸 영역밖으로 나가서 width와 height부분을 px로 맞춰주고
  • 글씨가 있는 부분에 padding을 줘서 크기를 맞췄는데 더 깔끔하게 작성하는 방법이 궁금합니다.
  • 그 외에 왠지 모르게 전체적으로 코드를 작성할때 어거지로 스타일을 맞추는 느낌이 드는데 어떤 부분이 문제인지 궁금합니다!
  • 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

@NaYejin94 NaYejin94 requested a review from dongqui January 6, 2025 11:28
@NaYejin94 NaYejin94 added the 순한맛🐑 마음이 많이 여립니다.. label Jan 6, 2025
@NaYejin94 NaYejin94 closed this Jan 6, 2025
@NaYejin94 NaYejin94 reopened this Jan 6, 2025
@NaYejin94 NaYejin94 removed the 순한맛🐑 마음이 많이 여립니다.. label Jan 6, 2025
@NaYejin94 NaYejin94 added the 순한맛🐑 마음이 많이 여립니다.. label Jan 6, 2025
@dongqui dongqui changed the base branch from main to Basic-나예진 January 7, 2025 01:39
@dongqui
Copy link
Collaborator

dongqui commented Jan 7, 2025 •
edited
Loading

예진님 고생 많으셨습니다~!
대체로 잘 구현해주셨어요!
시멘틱 태그를 신경써주신 점이 좋았고, flex나 % 등을 활용해 좀 더 유연하게 구현하면 더욱 좋을 거 같습니다 :)

이미지 크기나간격 font-size는 피그마를 보고 눈대중으로 맞춰서 하면 되는걸까요?
->
눈대중으로 다 하신건가요...!? 😮
image
피그마 하단에 토글로 dev 모드를 키신 후 디자인 요소를 눌러보세요~!

main부분을 작성할 때 grid영역에서 이미지가 자꾸 영역밖으로 나가서 width와 height부분을 px로 맞춰주고
글씨가 있는 부분에 padding을 줘서 크기를 맞췄는데 더 깔끔하게 작성하는 방법이 궁금합니다.
-> 잘 하셨습니다ㅎ 가능하다면 이미지 크기는 미리 정해주는 게 권장됩니다! img 크기를 미리 정해두지 않으면 이미지가 다운 받아졌을 때 레이아웃이 틀어지거나 브라우저가 레이아웃 영역을 다시 계산하는 일이 생길 수 있어요 ㅎ
글씨 부분은 가운데 정렬을 의도하신 거라면 flex를 사용해보시면 좋겠네요!

그 외에 왠지 모르게 전체적으로 코드를 작성할때 어거지로 스타일을 맞추는 느낌이 드는데 어떤 부분이 문제인지 궁금합니다!
-> 대체로 잘 작성해주셨습니다~! 아마 마진이나 패딩으로 요소를 특정 위치로 보내면서 그런 느낌을 받으시나? 추측이 되긴 합니다! px로 요소의 위치를 잡아야 할 때도 있지만, 부모 요소에서 flex등을 활용해서 자식 요소를 배치해보시는 것도 좋을 거 같습니다 :)

가령
image
이런 식으로 마진으로 요소를 밀어올리셨는데, (이것도 요구 사항과 맞는다면 괜찮습니다!)

image
글씨 부분아래에 패딩을 주고 flex로 가운데 정렬을 주면 자연스럽게 배치가 될 거 같네요!

@dongqui
Copy link
Collaborator

dongqui commented Jan 7, 2025

아! 그리고 이번에는 제가 수정했는데 PR 보내주실 때 코드잇 저장소 main 브랜치로 PR 보내시는게 아니라 Basic-나예진으로 보내주셔야 합니다~! :)

@dongqui dongqui merged commit 442bfab into codeit-bootcamp-frontend:Basic-나예진 Jan 7, 2025
dongqui
dongqui reviewed Jan 7, 2025
View reviewed changes
index.html
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
Copy link
Collaborator

Choose a reason for hiding this comment

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

<html lang="ko"> 을 써주시면
SEO, 접근성에 도움이 됩니다!

index.html
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
</head>
<body>
<header>
Copy link
Collaborator

Choose a reason for hiding this comment

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

대체로 태그를 유의미하게 잘 써주셨네요! 👍

index.html
<div class="top-section">
<div class="content">
<div class="top-content">일상의 모든 물건을<br>거래해 보세요</div>
<a href="/items.html" class="top_btn">구경하러 가기</a>
Copy link
Collaborator

Choose a reason for hiding this comment

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

class명은 한 가지 케이스로 통일하여 일관성을 맞추는 것이 코드 관리에 좋습니다 :)

class="top-btn"

style.css
margin:0;
}

header {
Copy link
Collaborator

Choose a reason for hiding this comment

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

지금은 css 파일이 하나라 괜찮지만, 태그에 직접 스타일을 주게 되면 페이지 전체에 영향을 주기 때문에 지양하셔야합니다! 되도록 클래스를 이용해주세요~ :)

index.html
<body>
<header>
<div class="header">
<a href="/"><img src="image/md.png" class="logo"></a><a href="/login.html" class="login">로그인</a>
Copy link
Collaborator

Choose a reason for hiding this comment

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

img를 쓰실 때 alt를 넣어주시는 것이 접근성에 좋습니다!

style.css
padding:9px 0;
}

.logo {
Copy link
Collaborator

Choose a reason for hiding this comment

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

현재 이미지에 마진을 주면서 이미지를 감싸고 있는 a 태그의 크기가 커졌습니다!
로고의 왼쪽 빈 공간을 눌러도 a tag가 눌리게 됩니다 😢

index.html
<div class="footer-div">
<span>ⓒ codeit - 2024</span>
<span class="footer-link">
<span><a href="/privacy.html">Privacy Policy</a></span>
Copy link
Collaborator

Choose a reason for hiding this comment

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

span이 불필요하게 중첩된 거 같네요!

index.html
<footer>
<div class="footer-div">
<span>ⓒ codeit - 2024</span>
<span class="footer-link">
Copy link
Collaborator

Choose a reason for hiding this comment

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

span은 텍스트의 특정부분을 위해 주로 사용됩니다~ 그룹화나 레이아웃 구성은 div를 써주세요 :)

style.css
margin: 90px auto;
display: grid;
background-color: #F7F8FA;
padding: 0 30px;
Copy link
Collaborator

Choose a reason for hiding this comment

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

이 패딩 값 때문에 이미지 옆에 빈 공간이 보이네요! 요구 사항과 다릅니다!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dongqui dongqui dongqui left review comments

Assignees
No one assigned
Labels
순한맛🐑 마음이 많이 여립니다..
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@NaYejin94 @dongqui