[이은빈] sprint1

[eunbinnie]

요구사항

기본

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

심화

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

주요 변경사항

• 메인 페이지 작업 완료
• https://symphonious-cascaron-bddc4e.netlify.app/

스크린샷

멘토에게

• 폰트 사이즈는 px보다 rem을 사용하는 게 더 좋나요?
• inner 가운데 맞춤을 위해 섹션별로 inner 클래스를 추가해서 최대 너비를 잡는 게 좋나요? 아님 페이지 전체 container에 inner 클래스를 넣어서 가운데 정렬한 후 그 안에 섹션을 넣는 게 좋나요?
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[leejyart]

사용자 지정 CSS 속성 사용한 부분이 훌륭합니다!

[leejyart]

image 의 alt 속성이 빠져있네요! alt 속성은 이미지가 렌더링되지 못할 때 나타날 문자열을 지정하기 위한 값으로 웹 접근성과 SEO 에 영향을 줄 수 있습니다. 웹 표준기관 WHATWG 의 대체 텍스트 제공 가이드라인 에도 다음과 같은 문구가 있습니다.

"Except where otherwise specified, the alt attribute must be specified and its value must not be empty"
달리 지정된 경우를 제외하고 alt 특성을 지정해야만 하며 해당 값은 비워 둘 수 없습니다.

alt 속성과 관련된 문서도 첨부드리니 참고해보세요 : )
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt

[leejyart]

1. 폰트사이즈를 반응형으로 작업하려면 rem을 사용하는게 좋은가요?

네, 반응형 페이지구현을 위해서는 px과 같은 절대적인 고정형 단위가 아닌 rem 과 같은 상대적인 단위를 활용하는 것이 좋습니다.
상대적 단위와 관련된 추천 영상을 공유 드립니다 : )
https://www.youtube.com/watch?feature=shared&embeds_referring_euri=https%3A%2F%2Fhawaiian-pizza-it.tistory.com%2F44&source_ve_path=MzY4NDIsMzY4NDIsMzY4NDIsMzY4NDIsMzY4NDIsMTM5MTE3LDI4NjY0LDE2NDUwNg&feature=emb_share&v=7Z3t1OWOpHo

또 한가지 팁을 드리자면, rem은 반응형 글꼴 크기 조정에 적합하지만 홀수를 rem으로 변환하거나 매우 큰 숫자로 작업해야 하는 경우 계산이 불편할 수 있습니다. 이 경우 rem을 사용하는 동안 친숙한 10진수에서 생각할 수 있어 62.5% 글꼴 크기 트릭을 사용하는 것이 도움이 될 수 있습니다.
html { /* 10px */ font-size: 62.5%; }

구체적인 설명은 아래 링크를 참고해주세요!
https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font-size-trick/#setting-the-root-font-size-to-625percent

2. inner 가운데 맞춤을 위해 섹션별로 inner 클래스를 추가해서 최대 너비를 잡는 게 좋나요? 아님 페이지 전체 container에 inner 클래스를 넣어서 가운데 정렬한 후 그 안에 섹션을 넣는 게 좋나요?

공통적으로 반복되는 코드는 상위 컨테이너에서 일괄 적용 하는 것이 좋을 것 같습니다. 그래야 만약 차후 수정 할 일이 생기더라도 실수로 빠뜨리거나 요소마다 스타일이 다르게 적용되는 일이 없을거예요.

[leejyart]

첫 과제를 아주 깔끔하게 잘 해주셨습니다 : )
은빈님의 앞으로가 매우 기대됩니다 ㅎㅎ