[안연정] sprint2

[annmmww]

요구사항

기본

공통

• 아래로 스크롤 해도 상단 네비게이션 바(Global Navigation Bar)가 최상단에 고정됩니다.
• "판다마켓" 클릭 시 루트 페이지("/")로 이동합니다.(새로고침)
• 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다.
• SNS 아이콘들은 클릭시 각각 실제 서비스 홈페이지로 이동합니다.

로그인 페이지

• "회원가입"버튼 클릭 시 "/signup" 페이지로 이동합니다.

회원가입 페이지

• "로그인"버튼 클릭 시 "/login" 페이지로 이동합니다.

심화

• palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.
• 비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 아이콘을 추가해 주세요.

주요 변경사항

• login.html, signup.html 페이지 추가

스크린샷

netlify 배포 주소

멘토에게

텍스트 중앙 정렬

.social-login-content {
  width: 100%;
  display: flex;
  align-items: center;
  margin: 16px 23px;
  vertical-align: middle;
  font-weight: 500;
  height: 16px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0%;
  color: #1F2937;
}

텍스트 블록은 정중앙인데, 텍스트는 블록 내 중앙이 아닌 것 같은데 조정할 수 있는 방법이 궁금합니다.

프로젝트 구조

현재 html 파일은 여러 개, css 파일은 하나인데, 이 구조가 맞는지
추후 프레임워크가 도입되면 프로젝트 구조는 보통 어떻게 만들어지는지 궁금합니다.

[baeggmin]

텍스트 중앙정렬
지금 .social-login-content는 height: 16px이고 line-height: 26px로 설정되어 있어서 위로 치우치는 것 같습니다. line-height를 height와 같게 맞춰주시면 해결될거에요.

프로젝트 구조
현재 한 css 파일의 책임이 너무 커지고 있는 것 같습니다. 아래와 같은 구조로 분리되면 좋을 것 같아요.

project/
├── index.html
├── login.html
├── signup.html
├── css/
│   ├── reset.css        ← 브라우저 초기화
│   ├── base.css         ← 공통 레이아웃, 폰트, 컬러
│   ├── form.css         ← 로그인/회원가입 공통 input, label, button 스타일
│   ├── home.css         ← index.html 전용
│   ├── login.css        ← login.html 전용
│   └── signup.css       ← signup.html 전용

추가로, 추후 react와 같은 프레임워크를 도입하면 HTML, CSS, JS가 하나의 컴포넌트 안에 묶이는 구조로 바뀝니다.

스타일도 모듈화되거나 styled-components처럼 JS 안에서 함께 관리할 수 있어요.

또한 모든 페이지가 하나의 앱 내부에서 이동되기 때문에 index.html은 보통 하나만 존재합니다.

지금은 위 폴더구조를 참고해서 전체적인 구조를 이해해주시면 충분할 것 같습니다. 추후 프레임워크를 배우시면 자연스럽게 새로운 구조에 익숙해지실거에요. 화이팅입니다! 💪

[baeggmin]

form 요소 구현 시에는 <form> 태그를 활용해주시면 좋습니다.

[baeggmin]

라벨 요소는 <label> 태그를 활용해주세요!

[baeggmin]

또한 label 태그의 for 속성을 이용하면 input과 연동이되어 접근성이 좋아집니다.

<label for='email'>

[baeggmin]

form 태그 내부의 제출 버튼에 <button type='submit'> 을 추가해주면 input들과 연동이 되어 접근성을 개선할 수 있습니다.

[baeggmin]

signup-page > signup-container > signup-content처럼 레이아웃을 구조적으로 잘 나누어주셨습니다👍

[baeggmin]

autocomplete 속성도 활용해보셨군요! 👍HTML 속성은 대소문자를 구분하지 않긴하지만, HTML 표준 or 린터에서 경고가 날 수 있어 일관되게 소문자(autocomplete)로 작성하는 게 좋습니다.

[baeggmin]

alt 속성이 누락되었네요!

[baeggmin]

font awsome을 활용해주셔도 상관없긴하지만, 그러면 image asset 으로 등록한 눈 아이콘은 불필요해질 것 같아요. 불필요한 코드 or 이미지는 제거해주시면 좋겠습니다.

[baeggmin]

실무에서는 영역별로 의미 있는 숫자 범위를 나눠서 유지보수 하기 쉽게 관리하는 편입니다.

예를 들어 기본 콘텐츠는 0-10, 헤더나 푸터는 100, 드롭다운이나 모달은 500, 알림창 로딩창은 999,1000 이상으로요!