[강화진] Sprint1

[ghkwls9910]

요구사항

기본

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

심화

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

주요 변경사항

스크린샷

주강사님에게

• 기본 3,4 번이나 심화 요구 사항 같이 화면 크기에 따라서 바뀌는 반응형 같은 것을 잘 못하겠습니다.
• 코드를 작성할 때 태그, 클래스, 아이디를 너무 많이 작성한 것 같아서 여기에 대해서도 리뷰 부탁드립니다.
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[baeggmin]

첫 스프린트 미션을 수행하시느라 고생 많으셨습니다! HTML구조를 깔끔하게 잘 잡아주셨네요 👍
자세한 리뷰는 인라인 코멘트를 참고해주시고, 질문주신 내용에 대해서는 아래 이어서 남기겠습니다.

[baeggmin]

한국어 사이트인 만큼 lang="ko" 가 더 적합할 것 같습니다.

[baeggmin]

여러 곳에서 id="introduce"가 중복으로 사용되고 있습니다. Id 는 페이지 내에서 고유해야 하므로, 중복되는 Id는 class 로 대체해주시고나 고유 id 로 수정해주세요!

[baeggmin]

여기는 <section> 태그를 활용해보시면 좋겠네요!

[baeggmin]

navbar 와 같은 header 영역을 구현할 때에는 <header> 태그를 사용하면 좋습니다.

[baeggmin]

시맨틱 태그인 footer 를 사용해주신 점 좋습니다! 👍

[baeggmin]

#sectionImg와 #section1Img 이 혼용되어 사용되고 있습니다. id는 다르게 정의되어 있는데 쓰임은 명확히 구분되지 않는 것 같아요. 하나로 통일하거나 class로 바꾸는게 좋아보입니다.

[baeggmin]

이 부분은 padding: 9px 400px 로 축약해서 쓸 수 있습니다.

[baeggmin]

<a><button></button></a> 구조는 a와 button 태그가 불필요한 중첩되는 것 같아요. a 태그만 사용하는게 더 좋아보입니다.
(예)
<a href="/items" class="btn">구경하러 가기</a>

[baeggmin]

1. 현재 html, css, 이미지 파일이 모두 루트에 위치해있어 관리가 어려워질 것 같습니다.
   아래 예시 구조와 같이 목적별로 폴더를 분리해서 관리하는걸 추천드립니다.

├── index.html
├── styles/
│   └── home.css
├── assets/
│   ├── images/
│   └── icons/

[baeggmin]

2. mission1.html, mission1.css 와 같은 파일명은 이름만 보고 무슨 페이지인지 유추가 어렵습니다. index.html, landing.html, home.html 등 의미 있는 역할명으로 변경해주세요.

mission1.css도 마찬가지입니다. 프로젝트 전체를 구성하는 스타일이라면 style.css, 특정 페이지라면 home.css와 같이 명확히 지어주시는게 좋습니다.

[baeggmin]

이미지 파일명도 직관적으로 역할을 알 수 있도록 지어주시는게 좋습니다. section1, section2 처럼 랜덤한 숫자가 붙으면 역할을 파악하기 어려우니 보다 직관적인 이름으로 변경해주시면 좋을 것 같습니다.

[baeggmin]

기본 3,4 번이나 심화 요구 사항 같이 화면 크기에 따라서 바뀌는 반응형 같은 것을 잘 못하겠습니다.
반응형 구현은 처음에는 어렵게 느껴질 수 있지만, 기본적인 원리와 몇 가지 패턴만 익히면 생각보다 쉽게 적용할 수 있습니다. 반응형 웹은 주로 '미디어 쿼리'를 이용해서 구현합니다. 아래 간단한 예시를 기재해드리니 참고해주세요! 😊

/* 기본 (PC) 스타일 */
.container {
  padding: 0 200px;
}

/* 화면이 768px 이하일 때 (Tablet & Mobile) */
@media screen and (max-width: 768px) {
  .container {
    padding: 0 24px;
  }
}

또한, 현재 .navbar나 .section 같은 클래스에 width: 1920px처럼 고정된 값을 쓰고 있는데, 이건 화면이 작아질 때 콘텐츠가 잘리는 원인이 됩니다. 아래처럼 수정하면 좋을 것 같습니다.

/* before */
.section {
  width: 1920px;
}

/* after */
.section {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

추가 팁을 드리자면, 단위는 px보다 rem, %, vw 등 유동적인 단위를 조금씩 써보면 좋습니다.
미디어 쿼리를 학습하신 후에 유동적인 단위에 대해서도 학습해보시길 추천드립니다.

[baeggmin]

코드를 작성할 때 태그, 클래스, 아이디를 너무 많이 작성한 것 같아서 여기에 대해서도 리뷰 부탁드립니다.
태그/클래스/아이디가 너무 많아지면 오히려 유지보수가 어렵고, CSS가 꼬일 확률이 높아집니다. 따라서 각각의 역할과 우선순위를 구분해두시면 좋습니다.

• id: 페이지 내 고유값, JS로 특정 요소를 조작할 때
• class: 여러 요소에 재사용 가능, 스타일 적용 시 가장 자주 사용
• tag 선택자: 스타일이 전역적으로 바뀔 위험이 있어 최소한으로 사용

결론적으로, 스타일 적용은 class 중심으로 잡아주시고, Id 는 특별한 경우에만 사용해주시는게 좋습니다.
추가로, 클래스는 역할 중심으로 작명하면 나중에 유지보수하기 쉬워집니다. (.section-title, .login-button, .main-image, .footer-link 등)