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

Merged
merged 1 commit into from
Jan 16, 2025
Merged

[박원현] sprint1 #26

merged 1 commit into from
Jan 16, 2025

Conversation

CIrcle0616
Copy link
Collaborator

@CIrcle0616 CIrcle0616 commented Jan 14, 2025 •
edited
Loading

요구사항

Desktop 사이즈의 웹 랜딩페이지 작성
https://678601de430dfcaa90e008ce--ubiquitous-dodol-7ee206.netlify.app/

기본

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

심화

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

주요 변경사항

  • 랜딩 페이지를 작성하였습니다.

스크린샷

sprint1-capture

주강사님에게

  • 제가 만든 css 속성중에 이유없이 복잡하게 구현했다 생각되는 부분이 있을까요?
  • 현재 구현한 내용이 마음에 들지 않습니다. 리팩토링하는 방법이 있을까요?
  • 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

@CIrcle0616 CIrcle0616 requested a review from dongqui January 14, 2025 08:24
@CIrcle0616 CIrcle0616 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Jan 14, 2025
@CIrcle0616 CIrcle0616 changed the title sprint_mission1 [박원현]sprint_mission1 Jan 14, 2025
@CIrcle0616 CIrcle0616 changed the title [박원현]sprint_mission1 [박원현]sprint1 Jan 14, 2025
@CIrcle0616 CIrcle0616 changed the title [박원현]sprint1 [박원현] sprint1 Jan 14, 2025
dongqui
dongqui approved these changes Jan 16, 2025
View reviewed changes
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 속성중에 이유없이 복잡하게 구현했다 생각되는 부분이 있을까요?
-> 대체로 잘 하셨습니다~ 오히려 조금은 복잡할 수 있는 부분이 이미지로 대체 되었는데, 해당 부분을 구현해보시면 더 좋을 거 같아요 :)

현재 구현한 내용이 마음에 들지 않습니다. 리팩토링하는 방법이 있을까요?
-> 어떤 부분이 마음에 들지 않으시는 걸까요? 리팩토링은 늘 목적이 명확한 것이 좋습니다.
현재는 단일 페이지라 리팩토링 할 수 있는 부분이 많지는 않습니다~ 다만 BEM 등을 통해 class 이름을 좀 더 명확하게 짓거나, 컴포너트 단위로 공통 스타일 적용, 유틸리티 클래스 정의 등을 해보실 수 있을 거 같네요! :)

index.html
@@ -0,0 +1,88 @@
<!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.

<html lang="ko"> lang에 신경써주세요.
SEO, 접근성에 도움이 됩니다!

index.html
<section class="main-banner">
<div class="main-banner-wrapper">
<div class="main-banner-text">
<h2>일상의 모든 물건을<br />거래해 보세요</h2>
Copy link
Collaborator

Choose a reason for hiding this comment

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

h tag 는 계층 구조로 사용하시는 것이 접근성에 좋습니다!

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Heading_Elements#사용_일람

index.html
</div>
<img
src="images/landing/Img_home_top.png"
alt="서비스를 소개하는 메인 배너 이미지"
Copy link
Collaborator

Choose a reason for hiding this comment

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

alt를 잘 넣어주셨네요~! 👍

index.html
</div>
</section>
<section class="landing-description">
<div class="service-img-container">
Copy link
Collaborator

Choose a reason for hiding this comment

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

image
요구 사항을 다시 확인해주세요! 지그재그로 배치 되어야 합니다.

index.html
</section>
<section class="landing-description">
<div class="service-img-container">
<img
Copy link
Collaborator

Choose a reason for hiding this comment

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

텍스트 영역까지 이미지로 사용하셨군요..!
피그마를 보시면 해당 부분은 텍스트 영역과 이미지 영역이 구분되어 있습니다!

물론 급하게 작업해야하거나 간단하게 표현할 경우 지금 처럼 구현하는 것도 가능합니다 :)
하지만 HTML요소를 전부 이미지로 표현하면 몇 가지 문제점이 있습니다.

  1. SEO
    HTML의 텍스트는 검색 엔진 최적화(SEO)에 중요한 역할을 합니다. 이미지로 넣으면 검색 엔진이 내용을 인식하지 못해 사이트 SEO에 불리합니다!

  2. 접근성
    이미지는 스크린리더가 읽을 수가 없어 접근성이 많이 떨어집니다.

  3. 유지보수성
    만약 현재 상황에서 텍스트 색상 변경 요청이 들어오면 어떻게 될까요? 원래라면 css 한 줄만 수정하면 되겠지만, 지금의 경우 모든 이미지를 교체하게 되겠죠! 화면 크기에 따른 반응형 구현도 더 까다롭고 부자연스러워집니다!

  4. 성능
    이미지는 HTML tag보다 로딩 속도에 더 많은 영향을 줍니다!

무엇보다 현재는 학습과정이므로 HTML로 직접 구현해보시는 것을 추천드려요 :)

index.html
/>
<div class="footer-background">
<div class="footer-container">
<p style="color: #9ca3af">@codeit - 2024</p>
Copy link
Collaborator

Choose a reason for hiding this comment

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

inline style은 일관성이 떨어지고 유지 보수에 좋지 않아 지양하시는 것이 좋습니다~! :)

index.html
/>
<div class="footer-background">
<div class="footer-container">
<p style="color: #9ca3af">@codeit - 2024</p>
Copy link
Collaborator

Choose a reason for hiding this comment

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

P는 문단을 나타내기 위해 사용됩니다! 여기서는 부적절한 거 같네요!

style.css
color: #374151;
}

.header-wrap > img {
Copy link
Collaborator

Choose a reason for hiding this comment

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

img는 단일 요소로 사용되는데, flex가 들어가는 건 이상합니다! 🤔

style.css
flex: 0 0 153px;
}
.header-wrap > .login-btn {
flex: 0 0 128px;
Copy link
Collaborator

Choose a reason for hiding this comment

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

단순히 너비를 위해서라면 굳이 flex를 쓰실 필요는 없습니다!

@dongqui dongqui merged commit a759c24 into codeit-bootcamp-frontend:Basic-박원현 Jan 16, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dongqui dongqui dongqui 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
@CIrcle0616 @dongqui