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

Merged

Conversation

ghost
Copy link

@ghost ghost commented Mar 18, 2024

요구사항

기본

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

심화

  • palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.

주요 변경사항

스크린샷

image

@ghost ghost closed this Mar 18, 2024
@ghost ghost requested a review from kiJu2 March 18, 2024 08:19
@ghost ghost added the 미완성🫠 죄송합니다.. label Mar 18, 2024
@kiJu2 kiJu2 reopened this Mar 20, 2024
@kiJu2
Copy link
Collaborator

kiJu2 commented Mar 20, 2024

수고 하셨습니다 예진님 ! 위클리 미션 하시느라 수고 많으셨습니다 !
학습에 도움 되실 수 있게 꼼꼼히 리뷰 하도록 해보겠습니다.

@kiJu2
Copy link
Collaborator

kiJu2 commented Mar 20, 2024

commit 단위를 더욱 자주, 작게 해보시는건 어떠실까요?

git을 다룰 때 commit은 "언제 해야 하는가"를 생각해보신 적 있으신가요?
흔히 하는 말이 있습니다:

커밋은 합칠 수 있지만 나눌 수 없습니다.

그럼 커밋을 언제 해야 할까요?

저는 다음과 같은 룰을 지키며 커밋을 하는걸 권장 드립니다:

  1. 커밋을 하는 단위는 커밋 메시지 한 줄로 설명할 수 있는 행동
  2. 하나의 목표 혹은 액션이 달성될 때

관련하여 읽으시면 좋은 아티클을 추천드릴게요:

tl;dr

관련 변경 사항 커밋
커밋은 관련 변경 사항에 대한 래퍼여야 합니다. 예를 들어 두 개의 다른 버그를 수정하면 두 개의 별도 커밋이 생성되어야 합니다. 작은 커밋을 통해 다른 개발자가 변경 사항을 더 쉽게 이해하고 문제가 발생한 경우 롤백할 수 있습니다. 준비 영역과 같은 도구와 파일의 일부만 준비하는 기능을 통해 Git을 사용하면 매우 세부적인 커밋을 쉽게 만들 수 있습니다.

자주 커밋
커밋은 커밋을 작게 유지하고 관련 변경 사항만 커밋하는 데 도움이 되는 경우가 많습니다. 또한 이를 통해 코드를 다른 사람들과 더 자주 공유할 수 있습니다. 이렇게 하면 모든 사람이 정기적으로 변경 사항을 통합하고 병합 충돌을 방지하는 것이 더 쉬워집니다. 대조적으로, 대규모 커밋을 갖고 이를 드물게 공유하면 충돌을 해결하기가 어렵습니다.

미완성 작업을 커밋하지 마십시오
논리적 구성 요소가 완료된 경우에만 코드를 커밋해야 합니다. 자주 커밋할 수 있도록 기능 구현을 빠르게 완료할 수 있는 논리적 청크로 분할합니다. 깨끗한 작업 복사본이 필요하기 때문에(브랜치 확인, 변경 사항 가져오기 등) 커밋하고 싶은 유혹이 든다면 Git의 «Stash» 기능을 대신 사용하는 것이 좋습니다.

커밋하기 전에 코드를 테스트하세요
완료되었다고 생각하는 일을 저지르고 싶은 유혹에 저항하세요. 철저하게 테스트하여 실제로 완료되었는지, 부작용이 없는지(알 수 있는 한) 확인하세요. 로컬 저장소에 설익은 것을 커밋하려면 자신만 용서하면 되지만, 코드를 다른 사람과 푸시/공유하는 경우에는 코드를 테스트하는 것이 훨씬 더 중요합니다.

원문 보기

또한 깃 커밋 메시지 컨벤션도 함께 읽어보세요:

tl;dr:

커밋 메시지 형식

type: Subject

body

footer

기본적으로 3가지 영역(제목, 본문, 꼬리말)으로 나누어졌다.

메시지 type은 아래와 같이 분류된다. 아래와 같이 소문자로 작성한다.

feat : 새로운 기능 추가
fix : 버그 수정
docs : 문서 내용 변경
style : 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우 등
refactor : 코드 리팩토링
test : 테스트 코드 작성
chore : 빌드 수정, 패키지 매니저 설정, 운영 코드 변경이 없는 경우 등

원문보기

@kiJu2 kiJu2 assigned ghost Mar 20, 2024
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,99 @@
<!DOCTYPE html>
<head>
Copy link
Collaborator

Choose a reason for hiding this comment

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

<html> 태그가 빠진 것으로 보여요 !

Suggested change
<head>
<html>
<head>

Copy link
Collaborator

Choose a reason for hiding this comment

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

<html>는 필수적으로 넣으셔야 합니다 !

<body>
<header>
<a href="/">
<img src="images/panda-market-logo.png" width="153">
Copy link
Collaborator

Choose a reason for hiding this comment

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

alt를 작성해볼까요?

alt는 스크린 리더 사용자에 대한 보조 텍스트가 될 수 있으므로 "어떠한 이미지 인지"를 작성해주는 것이 좋아요 !
꼭 작성하시는걸 �제안드립니다 !

alt의 목적

  • 인터넷 연결이 끊겼을 때 대체되는 이미지
  • 스크린 리더 사용자를 위한 대체 텍스트
  • 이미지를 볼 수 없는 환경에서 이미지를 대체하기 위한 텍스트
    등 목적을 알게 된다면 alt를 어떻게 사용하시면 될지 알 수 있을 것 같아요.

다음은 하버드 에듀케이션에서 제안하는 alt 규칙입니다:

tl;dr

  • Write Good Alt Text
  • Add alt text all non-decorative images.
  • Keep it short and descriptive, like a tweet.
  • Don’t include “image of” or “photo of”.
  • Leave alt text blank if the image is purely decorative
  • It's not necessary to add text in the Title field.

원문 보기

background-color: #1967d6;
}

#sign-button {
Copy link
Collaborator

Choose a reason for hiding this comment

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

네이밍을 일관적으로 작성하시는게 어떨까요?

파스칼 케이스, �케밥 케이스, 카멜케이스 등 여러가지 섞여있는 것 같아요. 네이밍을 일관적으로 작성하시는게 어떨까요 ?

Comment on lines +99 to +102
a {
text-decoration: none;
color: inherit;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

reset.css를 작성하셔도 될 것 같아요.

해당 스타일은 reset.css 파일을 만들어서 작성하셔도 될 것 같아요 =)

@kiJu2 kiJu2 merged commit f81fad6 into codeit-bootcamp-frontend:part1-함예진 Mar 20, 2024
1 check passed
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.

1 participant