[홍승전] sprint 1&2

[damiano1130]

요구사항

기본

[o] React와 같은 UI 라이브러리를 사용하지 않고 진행합니다

[o] PC사이즈만 고려해 주어진 디자인으로 구현합니다.

[o] HTML, CSS 파일을 Netlify로 배포해 주세요. (참고: https://www.codeit.kr/learn/5309)

[o] 랜딩 페이지의 url path는 루트(‘/’)로 설정합니다.

[o] title은 “판다마켓”로 설정합니다.

[o] “판다마켓” 로고 클릭 시 루트 페이지(‘/’)로 이동합니다.

[o] '로그인' 버튼 클릭 시 로그인 페이지(‘/login’)로 이동합니다 (빈 페이지)

[o] “구경하러 가기”버튼 클릭 시(’/items’)로 이동합니다. (빈 페이지)

[o] “Privacy Policy”, “FAQ”는 클릭 시 각각 Privacy 페이지(‘/privacy’), FAQ 페이지(‘/faq’)로 이동합니다.(모두 빈 페이지)

[o] 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.

[x] 아래로 스크롤해도 “판다 마켓” 로고와 “로그인” 버튼이 있는 상단 내비게이션 바(Global Navigation Bar)가 최상단에 고정되게 해 주세요.

[o] 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다.

[x] 화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px, “로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소 간 거리가 가까워지도록 설정합니다.

[o] 화면의 너비가 1920px 이상이면 내부에 있는 요소 간 동일한 간격을 유지하며 가운데 정렬해야 합니다.

[x] 화면의 너비가 1920px 보다 작아질 때, 최하단에 있는 “codeit-2024”의 왼쪽 여백 200px과 SNS 아이콘들의 오른쪽 여백 200px을 유지하면서 가운데 있는 “Privacy Policy”, “FAQ” 요소와 각각 동일한 간격을 유지하며 가까워져야 합니다.

[x] 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer로 설정합니다.

[o] README.md 파일을 작성해 주세요.

[o] 마크다운 언어를 숙지하여 작성해 주세요.
[o] 내용은 자유롭게 작성해 주세요.
[o] 본인 브랜치(ex)part1-홍길동)에 스프린트 미션을 업로드해 주세요.

[o] 적절한 커밋 메시지를 남겨 주세요.

[o] 1-Sprint-Mission 레포지토리를 fork 합니다.

[o] GitHub에 PR(Pull Request)을 생성해 upstream의 본인 브랜치(ex)part1-홍길동)에 미션을 제출합니다.

[o] PR 코멘트에 아래 내용들을 포함해 주세요.

[o] 스프린트 미션 요구사항 체크리스트

[o] 아래 예시 사진과 같이 완료한 만큼 체크 표시를 해 주세요. 참고
[o] 주요 변경사항

[o] 멘토님에게 남길 메시지

[o] Git 활용 과정에서 유닉스 커맨드를 활용해 주세요.

[o] HTML, CSS 파일을 Netlify로 배포합니다. (참고: https://www.codeit.kr/learn/5309)

로그인 페이지, 회원가입 페이지 공통

[x] “판다마켓" 로고 클릭 시 루트 페이지(“/”)로 이동합니다.
[x] 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다.
[o] SNS 아이콘들은 클릭 시 각각 “https://www.google.com/”, “https://www.kakaocorp.com/page/” 으로 이동합니다.
[o] input 요소에 focus in 일 때, 테두리 색상은 ##3692FF입니다.
[o] input 요소에 focus out 일 때, 테두리는 없습니다.
로그인 페이지

[o] “회원가입”버튼 클릭 시 “/signup” 페이지로 이동합니다.
회원가입 페이지

[o] “로그인”버튼 클릭 시 “/login” 페이지로 이동합니다

심화

[ ] reset.css를 설정해 주세요.
[ ] 사용자의 브라우저 설정에 따라 기본 폰트 크기 설정이 변화함에 따라서 페이지의 요소 간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 주세요.
[ ] palette에 있는 color값들을 css 변수로 등록해서 사용합니다.
[ ] 구글 애널리틱스로 방문자 수 확인하기 할 수 있도록 설정합니다.
로그인 페이지, 회원가입 페이지 공통

[ ] 비밀번호, 비밀번호 확인 input 요소 오른쪽에 비밀번호를 확인할 수 있는 눈 모양 아이콘을 추가합니다.

주요 변경사항

스크린샷

멘토에게

• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[Irelander]

전반적으로 HTML 구조를 의미에 맞게 잘 구성하셨고, CSS 스타일링도 꼼꼼하게 잘 구현해주셨습니다.

잘한 점

• 의미론적 HTML 마크업: header, main, footer, nav, section, h1, h2 등 시맨틱 태그를 적절하게 사용하여 웹 페이지의 구조를 명확하게 표현했습니다. 이는 웹 접근성과 SEO(검색 엔진 최적화)에 큰 도움이 됩니다.
• CSS 스타일링: style.css와 login.css에서 각 요소에 대한 스타일을 체계적으로 잘 작성해주셨습니다.

개선이 필요한 부분

1. CSS 선택자 우선순위 관리

• 문제점: 현재 style.css와 login.css에서 다소 불필요하게 복잡한 선택자를 사용하고 있습니다. 예를 들어 .header-container > .logo와 같이 자식 결합자(>)를 사용하거나, .icon-list > .icon-item > a 처럼 여러 단계에 걸쳐 선택자를 사용하는 경우가 많습니다. 이는 코드의 가독성을 해치고, 나중에 스타일을 수정하거나 유지보수할 때 어려움을 줄 수 있습니다. 또한, 선택자가 복잡해질수록 CSS 우선순위(Specificity)가 높아져서 다른 스타일을 덮어쓰기 위해 더 복잡한 선택자나 !important를 사용하게 될 수 있습니다.
• 개선 제안:
  • 가능한 한 클래스 선택자를 직접 사용하여 스타일을 적용하는 것이 좋습니다. 예를 들어, 로고 이미지에 직접 클래스(예: .logo-img)를 부여하고 해당 클래스에 스타일을 적용하면 .header-container > .logo > img 와 같은 복잡한 선택자를 피할 수 있습니다.
  • BEM(Block, Element, Modifier)과 같은 CSS 방법론을 학습하고 적용해보는 것을 추천합니다. BEM은 블록(Block), 요소(Element), 상태(Modifier)로 나누어 클래스 이름을 작성하는 규칙으로, 코드의 재사용성을 높이고 유지보수를 용이하게 만듭니다. 예를 들어, .header__logo 와 같이 작성할 수 있습니다.
• 참고 자료:
  • MDN - CSS Specificity
  • BEM 101

2. 코드 중복 제거

• 문제점: login.css와 style.css에 중복되는 스타일 코드가 일부 존재합니다. 예를 들어, a 태그에 대한 text-decoration: none; 이나 color 속성 등이 여러 곳에서 반복적으로 사용되고 있습니다.
• 개선 제안:
  • 공통으로 사용되는 스타일은 common.css 또는 reset.css 같은 별도의 파일로 분리하여 관리하는 것이 좋습니다. 모든 페이지에 공통으로 적용되는 스타일(예: a 태그, button 스타일 초기화 등)을 이곳에 정의하고, 각 HTML 파일에서 함께 링크하여 사용하면 코드 중복을 줄이고 일관성을 유지할 수 있습니다.
  • CSS 변수(Custom Properties)를 사용하여 색상, 폰트 크기, 간격 등 반복적으로 사용되는 값들을 관리하면 좋습니다. 심화 요구사항에도 포함된 내용이니 꼭 한번 적용해보세요!
• 참고 자료:
  • MDN - CSS Custom Properties

3. 웹 접근성 향상

• 문제점:
  • <img> 태그에 alt 속성이 비어있는 경우가 있습니다. alt 속성은 이미지를 볼 수 없는 사용자(예: 스크린 리더 사용자)나 이미지가 로드되지 않았을 때 해당 이미지를 설명해주는 중요한 텍스트입니다.
  • SNS 아이콘처럼 의미 있는 이미지인데 alt 속성이 없으면, 스크린 리더 사용자는 어떤 링크인지 전혀 알 수 없습니다.
• 개선 제안:
  • 모든 <img> 태그에는 의미에 맞는 alt 속성을 작성해주세요. 만약 이미지가 순수하게 장식용이고 의미가 없다면 alt="" 와 같이 빈 값으로 두어 스크린 리더가 무시하도록 할 수 있습니다. 하지만 판다마켓 로고, SNS 아이콘 등은 명확한 의미가 있으므로 "판다마켓 로고", "페이스북으로 이동" 과 같이 구체적인 설명을 추가하는 것이 좋습니다.

4. 파일 및 폴더 구조

• 문제점: 현재 sprint 폴더 내에 이미지, 폰트, CSS, HTML 파일이 모두 섞여 있습니다. 프로젝트 규모가 커지면 파일 관리가 매우 어려워집니다.
• 개선 제안:
  • assets 또는 resources 와 같은 폴더를 만들고, 그 안에 images, css, fonts 등의 하위 폴더를 만들어 파일을 종류별로 정리하는 것을 추천합니다. 이렇게 하면 프로젝트 구조가 훨씬 깔끔해지고 파일을 찾기도 쉬워집니다.

    sprint/
    ├── assets/
    │   ├── css/
    │   │   ├── style.css
    │   │   └── login.css
    │   ├── images/
    │   │   ├── panda_face.svg
    │   │   └── ...
    │   └── fonts/
    │       └── ...
    ├── index.html
    └── login.html
    

총평

이번 스프린트 미션을 통해 웹 페이지의 기본적인 구조를 잡고 스타일링하는 능력을 충분히 보여주셨습니다. 위에서 제안해드린 내용들은 코드를 조금 더 효율적이고 전문적으로 만들어 줄 수 있는 부분들이니, 시간을 내어 꼭 한번 적용해보시면 좋겠습니다. 특히 폴더 구조를 만들어 체계적으로 관리하는 부분은 중요한 부분이니 꼭 적용하시면 좋을 것 같습니다 :)

[Irelander]

폰트 파일을 직접 링크하는 방식은 몇 가지 단점이 있습니다.

1. 경로 문제: 현재 'ROKAF Sans Medium.otf' 파일이 HTML과 같은 위치에 있다고 가정하고 있는데, 만약 파일 위치가 변경되면 폰트가 로드되지 않습니다.
2. 성능: 폰트 파일은 용량이 크기 때문에 로딩 속도에 영향을 줄 수 있습니다.
3. 포맷: 웹에서는 WOFF2, WOFF 같은 웹폰트 형식을 사용하는 것이 압축률이 높아 더 효율적입니다.

[개선 제안]
CSS 파일 내에서 @font-face 규칙을 사용하여 폰트를 불러오는 것을 권장합니다. 이렇게 하면 폰트 관련 코드를 CSS에서 한번에 관리할 수 있어 유지보수가 편리해집니다.

예시:

  @font-face {
      font-family: 'ROKAF Sans';
      font-weight: 500;
      src: url('ROKAF Sans Medium.otf') format('opentype');
  }

[Irelander]

로고 부분은 사용자가 클릭했을 때 메인 페이지로 이동하는 링크 역할을 하는 것이 일반적입니다.
a 태그로 로고 전체를 감싸주면 더 좋을 것 같아요.

[Irelander]

img 태그에 alt 속성을 추가하여 웹 접근성을 높여주세요.
alt 속성은 이미지를 볼 수 없는 사용자를 위해 이미지에 대한 설명을 제공합니다.

[Irelander]

content1, content2, content3는 각각의 독립적인 구획을 나타내므로 <div> 보다는 <section> 태그를 사용하는 것이 시맨틱 마크업 관점에서 더 좋습니다.

[Irelander]

"Privacy Policy", "FAQ"는 각각 별도의 페이지로 이동하는 링크여야 합니다.
<p> 태그 대신 <a> 태그를 사용해서 구현해야 요구사항에 맞게 동작합니다.

[Irelander]

폰트 선언 순서에 대한 제안입니다.
브라우저는 font-family에 명시된 순서대로 폰트를 찾습니다.
따라서 가장 우선적으로 적용하고 싶은 폰트를 맨 앞에 두는 것이 좋습니다.
'ROKAF Sans'를 메인으로 사용하고 싶다면 'ROKAF Sans, Pretendard, sans-serif' 순서로 작성하는 것이 좋습니다.
또한, 폰트 이름에 공백이 포함된 경우 따옴표로 묶어주는 것이 안전합니다. 예: 'ROKAF Sans'

[Irelander]

태그 선택자(h1, p, span)에 직접 스타일을 적용하면 모든 해당 태그에 영향을 주게 되어,
다른 영역에서 원치 않는 스타일 변경이 발생할 수 있고 재사용성도 떨어집니다.

[개선 제안]
각각의 스타일에 맞는 클래스를 만들어서 적용하는 것을 추천합니다.
예를 들어, 메인 타이틀에 .main-title이라는 클래스를 부여하고 스타일을 정의하면,
다른 h1 태그와는 독립적으로 스타일을 관리할 수 있습니다.

[Irelander]

position: sticky 속성은 스크롤 위치에 따라 동적으로 동작하므로,
상단에 항상 고정되는 GNB 요구사항에는 position: fixed 가 더 적합할 수 있습니다.
position: fixed는 뷰포트를 기준으로 위치를 고정시키기 때문입니다.
다만 sticky를 사용했다면, top: 0; 속성을 추가해야 스크롤 시 상단에 붙어있게 됩니다.

[Irelander]

gap 속성 대신 justify-content: space-between 을 사용하면 양쪽 끝으로 요소를 정렬할 수 있어,
화면 너비 변화에 더 유연하게 대응할 수 있습니다.
현재 gap: 1000px;은 고정된 값이라 화면이 줄어들 때 요소가 겹치거나 깨질 수 있습니다.
컨테이너(.header-container 같은)를 하나 만들고 그 안에서 space-between으로 처리하는 것을 권장합니다.

[Irelander]

float: left; 속성은 예전 방식의 레이아웃 기술입니다.
현재는 Flexbox나 Grid를 사용하는 것이 훨씬 더 효율적이고 강력합니다.
이미 display: flex;를 사용하고 있으므로 float 속성은 제거해도 됩니다.