[이유진] sprint1

[youdaeng2]

요구사항

기본

• 랜딩 페이지의 URL path는 루트(/)로 설정
• <title>은 "판다마켓"으로 설정
• 1920px 이상일 때 배경은 꽉 차고, 내부 요소 위치는 고정되며 여백만 커짐
• 1920px 미만일 때 로고 왼쪽 여백 200px, 로그인 버튼 오른쪽 여백 200px 유지
• 클릭 가능한 요소에 cursor: pointer 적용
• 로고 클릭 시 루트(/)로 이동
• 로그인 버튼 클릭 시 /login으로 이동 (빈 페이지)
• "구경하러가기" 버튼 클릭 시 /items로 이동 (빈 페이지)
• Privacy Policy 클릭 시 /privacy 이동 (빈 페이지)
• FAQ 클릭 시 /faq 이동 (빈 페이지)
• SNS 아이콘 클릭 시 각 사이트로 새 창에서 이동

심화

• 브라우저 크기에 따라 요소 크기, 간격, 폰트 크기 등이 유동적으로 조절됨 (반응형)

주요 변경사항

스크린샷

멘토에게

• 피그마 시안에서 요소 크기가 px로 지정되어 있어서, 그대로 px 단위로 구현했습니다.
  그런데 실제 개발에서는 반응형을 고려해 다른 단위를 사용하는 게 더 좋은지 궁금합니다.
  다른 단위를 선택할 때 어떤 기준을 적용하는지도 알고 싶습니다.

• 현재 작성한 HTML 구조(요소의 묶음, 시맨틱 구조 등)가 적절하게 구성됐는지 궁금합니다.
  특히 features section 내부 구조가 반복되고 깊어졌다는 느낌이 들어서,
  더 간결하게 구성할 수 있는 팁이 있다면 듣고 싶습니다.

• 폰트 관련해서는 다음 두 가지가 궁금합니다.

  1. rem 단위를 사용할 때 기준(root font-size)을 어떻게 설정하는 게 좋을지
  2. 현재는 font-size와 font-weight를 class로 관리했는데, CSS 변수를 사용하는 방식과 비교했을 때 어떤 방식이 더 효율적인지

• 클래스 네이밍도 쉽지 않았는데요, 일반적으로 어떤 기준이나 관습이 있는지 조언 듣고 싶습니다.

• 현재 구현한 내용이 심화 체크 기준에 잘 맞는지도 검토 부탁드립니다.

• commits 계속 저 내용을 적는 걸까요..?

• 셀프 코드 리뷰를 통해 이어서 질문드리겠습니다. 감사합니다.

[addiescode-sj]

수고하셨습니다!

주요 리뷰 포인트

• 접근성 향상
• 이미지 최적화
• 네이밍 케이스, 포맷팅
• 미디어 쿼리 사용

[addiescode-sj]

이 미디어쿼리 구조에는 몇가지 잠재적인 문제가 있을수있어요.
우선 현재 큰 화면에서 정의된 스타일이 작은 화면에서도 유지되고 미디어 쿼리에 의해 다시 정의되고있는데요, 이런 스타일 중복이나 오버라이드 관련 문제를 해결해주려면

/* Tablet (768px ~ 1279px) */
@media (min-width: 768px) {
  :root {
    --header-padding: 100px;
    --container-padding: 100px;
    --feature-padding: 80px;
  }

  html {
    font-size: 50%; /* 1rem = 8px */
  }

  .feature {
    height: 720px;
    padding: 0;
  }
}

/* Desktop (1280px ~ 1919px) */
@media (min-width: 1280px) {
  :root {
    --header-padding: 200px;
    --container-padding: 200px;
  }

  html {
    font-size: 56.25%; /* 1rem = 9px */
  }
}

/* Large Desktop (1920px and above) */
@media (min-width: 1920px) {
  :root {
    --header-padding: 400px;
    --container-padding: 400px;
  }

  html {
    font-size: 62.5%; /* 1rem = 10px */
  }
}

작은 화면에서부터 미디어 쿼리에 의한 재정의를 하는 구조로 바꿔보시는게 불필요한 스타일을 제거하는데 좀 더 유리합니다.

그리고 공통으로 사용되는 값들 (header의 padding처럼) 을 css 변수로 정의한다음 각 브레이크 포인트에서 변수값만 변경해주는식으로 활용하시면 스타일도 중복 제거하면서 유지보수에도 용이해집니다.

참고해보시고 리팩토링해보세요! :)

[addiescode-sj]

질문에 대한 답변

피그마 시안에서 요소 크기가 px로 지정되어 있어서, 그대로 px 단위로 구현했습니다.

그런데 실제 개발에서는 반응형을 고려해 다른 단위를 사용하는 게 더 좋은지 궁금합니다.
다른 단위를 선택할 때 어떤 기준을 적용하는지도 알고 싶습니다.

반응형 대응을 고려한다면 px같은 값이 변하지 않는 고정 단위보다는 가변되는 값을 가진 상대 단위를 사용해주시는게 좋습니다.
예를 들어, px보다는 rem,em,% 와 같은 단위를 쓰시는게 편할거예요. 그리고 width보다는 max-width, min-width 등을 활용해주시는 방법도 있으니 여러가지 좋은 사례를 찾아보시고 적용해보시면 좋겠네요 :)

현재 작성한 HTML 구조(요소의 묶음, 시맨틱 구조 등)가 적절하게 구성됐는지 궁금합니다.

특히 features section 내부 구조가 반복되고 깊어졌다는 느낌이 들어서,
더 간결하게 구성할 수 있는 팁이 있다면 듣고 싶습니다.

이런걸 궁금해하시고 고민해보는 시도 너무 좋습니다 👍
구조화는 코드를 작성하며 고민과 분석을 많이 할수록 더욱 좋아질거예요.

features section내부에 불필요한 중첩이 있고, 스타일 중복도 많은 편인것같네요.
이런식으로 간소화해볼수있지않을까요?

    <article class="feature">
            <div class="feature-content">
              <span class="badge Text-2lg font-semibold">Hot item</span>
              <h2 class="Text-4xl font-bold">
                인기 상품을 <br />
                확인해보세요
              </h2>
              <p class="Text-2xl font-medium">
                가장 HOT한 중고거래 물품을 <br />
                판다 마켓에서 확인해 보세요
              </p>
            </div>
            <div class="feature-image">
              <img src="images/Img_feature_01.svg" alt="인기 상품" />
            </div>
          </article>
          <article class="feature feature--reverse">
            <div class="feature-content">
              <span class="badge Text-2lg font-semibold">search</span>
              <h2 class="Text-4xl font-bold">
                구매를 원하는<br />상품을 검색하세요
              </h2>
              <p class="Text-2xl font-medium">
                구매하고 싶은 물품은 검색해서<br />쉽게 찾아보세요
              </p>
            </div>
            <div class="feature-image">
              <img src="images/Img_feature_02.svg" alt="상품 검색" />
            </div>
      </article>

feature-inner 와 같은 불필요한 중첩을 줄이고
엘리먼트를 역할에 따라 분리해보고,
중복되는 스타일이 있다면 modifier (ex. --reverse)를 붙여 따로 관리해주면 좀 더 직관적인 구조화가 될 것 같네요 :)

폰트 관련해서는 다음 두 가지가 궁금합니다.

rem 단위를 사용할 때 기준(root font-size)을 어떻게 설정하는 게 좋을지
현재는 font-size와 font-weight를 class로 관리했는데, CSS 변수를 사용하는 방식과 비교했을 때 어떤 방식이 더 효율적인지
클래스 네이밍도 쉽지 않았는데요, 일반적으로 어떤 기준이나 관습이 있는지 조언 듣고 싶습니다.

보통 rem을 사용할때는 계산하기편하게 default font size를 10px로 설정하는편입니다.
그리고 css 변수를 사용하면 같은 값을 중복 사용하지않고 재사용하기때문에 유지보수에 유리합니다.
네이밍 관련해서는 PR 본문 내에 코멘트 드렸습니다 :)

commits 계속 저 내용을 적는 걸까요..?

refactor(mentor): 태그 사용을 말씀하시는거라면 제가 피드백드린 부분에 대한 수정 작업을 하실때만 사용하시면 됩니다 :)