[정새론] sprint2

[Squarecat-meow]

요구사항

기본

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

심화

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

주요 변경사항

• 시맨틱 태그 사용
• div 중첩 최소화

스크린샷

멘토에게

• 심화 체크리스트에 있는 비밀번호 확인용 아이콘을 추가하는데 컨테이너에 inline-flex를, 버튼에 absolute를 사용했습니다. input 태그는 self-closing tag라서 안에 img나 button을 넣지는 못 했는데 바깥에서 inline-flex를 사용하는게 맞는 사용법인가요?

[addiescode-sj]

수고하셨습니다~!

주요 리뷰 포인트

• id 중복 제거
• noopener noreferrer 추가
• 접근성 향상
• 사용성 개선

[addiescode-sj]

NIT: CSS를 연결하는 방식 차이에서도 비교할점이 있다는 것을 알고계실까요?

지금과 같이 HTML에서 여러개의 CSS파일을 import하게되면: CSS 파일을 병렬로 로드하기때문에 큰 CSS 파일이나 많은 CSS파일이 있는 경우 성능적으로 유리합니다. 다만, 모든 html 파일마다 import문을 반복해야하고 css파일간 의존성이 있다면 html단에서 관리해야하는 단점이 생겨 파일이 많아질수록 관리가 어려워집니다.

CSS에서 @import를 사용해 로드하게되면: @import는 병렬적으로 로드되는게아니라, 순차적으로 로드되므로 파일이 많으면 다소 성능이 저하될수있습니다. 하지만 CSS 파일 간의 의존성을 CSS 내부에서 관리할 수 있어 모듈화에 용이합니다. 따라서 작은 CSS 파일이 많고 의존성이 복잡할 경우 이 방식을 채택하시는게 좋습니다.

지금과 같이 파일 크기가 크지않다면 CSS 파일안에서 @import를 사용하시는게 구조화에는 더 도움이 될 거예요.

CSS 전처리기 (Sass, Less)나 번들러를 사용하면 두 방식을 장점을 합친 방식으로 관리하면서도 스타일 충돌과 중복을 줄일 수 있기때문에,
지금은 global.css, reset.css와 같이 명확하게 용도를 나눠 의존성을 관리하는것을 목표로 잡고
다음 단계로 넘어가기전에 병렬 처리를 하면 왜 성능에 도움이 된다는건지 미리 학습해보시면 좋을 듯합니다 :)

[Squarecat-meow]

global.css 하나를 html문서 안에서 link하고, global.css안에서 style.css나 login.css를 @import로 가져오면 되는걸까요?

[addiescode-sj]

전부 @import로 가져오는 방식으로 지금은 통일하시는게 좋을것같아요~!

[addiescode-sj]

질문에 대한 답변

심화 체크리스트에 있는 비밀번호 확인용 아이콘을 추가하는데 컨테이너에 inline-flex를, 버튼에 absolute를 사용했습니다. input 태그는 self-closing tag라서 안에 img나 button을 넣지는 못 했는데 바깥에서 inline-flex를 사용하는게 맞는 사용법인가요?

네, input 태그는 self-closing이므로 내부에 요소를 넣을 수 없어서 지금과 같이 버튼을 바깥으로 빼고 inline-flex 속성을 가진 컨테이너로 감싸는 것이 올바른 HTML 구조입니다! 잘하셨어요 :)

[addiescode-sj]

@Squarecat-meow 새론님, NIT 코멘트는 학습적인 목적으로 달아두는거라 반영하기보단 참고 목적 정도로만 보시면 돼요. 머지해드리겠습니다 :)