[이상달] Sprint2

[asksa1256]

요구사항

기본

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

로그인 페이지

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

회원가입 페이지

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

심화

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

주요 변경사항

• 미션 1 수정사항 반영
• 모호한 클래스명 수정
• 미디어쿼리 재정의 (모바일 기준 반응형으로 변경)

스크린샷

배포 사이트 (fork repository 연동)

panda-market-fe16sd.netlify.app

멘토에게

• 미디어쿼리 반응형을 rem 단위로 구현할 때, breakpoint마다 html의 font-size를 바꾸다보면 어떤 요소들은 변환된 픽셀값이 정수로 떨어지지 않고 소수점이 찍혀서 나옵니다.(ex: 25.7px) 이렇게 소수점 픽셀로 계산되어 렌더링 되어도 괜찮은 건가요..?
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[addiescode-sj]

수고하셨습니다!
전체적으로 클래스이름 변경도 적절하게 잘 이뤄졌고, 저번에 드린 피드백을 잘 이해하시고 적용하신것같아요. 습득력이 좋으시네요. 이번에도 또 고민해보거나 생각해볼만한 코멘트 더 드려봤어요~! :)

주요 리뷰 포인트

• 이미지 최적화
• 접근성 향상

[addiescode-sj]

질문에 대한 답변

멘토에게

• 미디어쿼리 반응형을 rem 단위로 구현할 때, breakpoint마다 html의 font-size를 바꾸다보면 어떤 요소들은 변환된 픽셀값이 정수로 떨어지지 않고 소수점이 찍혀서 나옵니다.(ex: 25.7px) 이렇게 소수점 픽셀로 계산되어 렌더링 되어도 괜찮은 건가요..?
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

주요 브라우저 (크롬, 파이어폭스, 사파리) 들은 대부분 서브픽셀 렌더링을 잘 수행해줍니다.
다만, 브라우저가 서브픽셀 렌더링을 수행해야하고 (안티 앨리어싱(anti-aliasing) 등의 부가적인 작업 필요, 약간의 성능 저하로 이어질 수 있음)
다양한 디바이스 해상도가 있는데 이에 따라 영향을 받을 수 있고, 브라우저마다도 반올림하여 정수로 처리하는 등 다르게 처리될수있어 주의하셔야합니다.

즉 결론만 얘기하자면 메이저 모던 브라우저 기준으로 소수점 픽셀도 처리해주지만 약간의 성능 저하 및 일관성 문제가 생길 수 있으니 주의를 요하고, 정수값 픽셀을 사용하시는게 좋습니다 :)