[남만재]Sprint1

[10000jaeN]

요구사항

기본

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

심화

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

주요 변경사항

스크린샷

멘토에게

• git, github 사용이 처음이라 너무 서툴러서 기본적인 것도 많이 헤맵니다.. 여차저차 하긴 했습니다.
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[addiescode-sj]

수고하셨습니다!
이미지를 고배율로 2배수, 3배수 export하셔서 srcSet을 적용하신건가했는데 아니었네요 ㅎㅎ
다음에는 반응형도 고려해서 작업해봐요!

주요 리뷰 포인트

• 네이밍 케이스, 네이밍 컨벤션
• 클래스이름
• 스타일 중복 제거

[addiescode-sj]

용도를 나눠서 css 파일을 관리해볼까요?

• reset.css (스타일 초기화)
• common.css (전역 스타일 처리)

[10000jaeN]

스타일시트를 두 개 만들어서 전체에 적용되는 스타일과 개별로 나눠 적용한 스타일을 구분해서 관리하는 말씀이실까요?

[addiescode-sj]

네, 용도를 나눠 관리하는 css 파일은 필요한 파일에서 import 받아오시면 됩니다 :)

[addiescode-sj]

자주 사용하는 값들은 변수로 만들어서 중복을 줄이고 재사용성을 높여볼까요?

예시)

:root {
  /* Colors */
  --color-primary: #3692ff;
  --color-primary-dark: #1967d6;
  --color-text: #374151;
  --color-text-light: #9ca3af;
  --color-background: #ffffff;
  --color-background-alt: #fcfcfc;
  --color-background-landing: #cfe5ff;
  --color-background-footer: #111827;
  --color-text-light: #f3f4f6;
  --color-text-lighter: #f9fafb;

  /* Typography */
  --font-family-base: pretendard, sans-serif;
  --font-family-heading: "ROKAFSansMedium", sans-serif;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 64px;
  --spacing-xxl: 138px;

  /* Layout */
  --container-max-width: 1520px;
  --container-content-width: 1120px;
  --container-section-width: 988px;

  /* Border Radius */
  --border-radius-sm: 8px;
  --border-radius-lg: 40px;
}

[addiescode-sj]

버튼 스타일이 #button과 #id에서 중복되는게 몇가지 있네요!
스타일 중복을 최대한 줄이기 위해 이런식으로 변수로 관리도 해주고, 버튼 클래스를 만드는건 어떨까요?

중복이 많이 되는 스타일은 공통 .button 클래스에 적용하고 variant (변형 버전)은 modifier를 사용해 따로 만들어주세요.
이렇게하면 스타일 중복도 최대한 없앨 수 있고 유지보수하기도 편해질거예요 :)

/* Button styles */
.button {
  display: inline-block;
  padding: 16px 34px;
  border-radius: 8px;
  text-decoration: none;
  font-size: var(--font-size-small);
  transition: background-color 0.3s ease;
}

.button--primary {
  background-color: var(--color-primary);
  color: var(--color-text-light);
}

.button--primary:hover {
  background-color: var(--color-primary-dark);
}

.button--rounded {
  border-radius: 9999px;
  padding: 16px 124px;
}

[addiescode-sj]

코멘트 위치 변경해서 다시 리뷰 드립니다~

[addiescode-sj]

id 선택자를 쓰셨네요! id는 고유 요소를 식별하기위해 사용되는데, 여기서 사용될 필요가 있었을까요?

[10000jaeN]

버튼 속성이 조금 다르길래 시도했는데 너무 생각이 너무 짧았습니다!
더욱 간결하게 수정해보겠습니다!

[addiescode-sj]

여러가지 네이밍 케이스가 혼재되어있네요 :)

CSS 네이밍 컨벤션
자주 쓰는 네이밍케이스 정리

두개 참고해보시고, 일관적인 네이밍 규칙을 적용해보시면 좋을 것 같습니다!