[배의진] Week2

[BaeUiJin]

요구사항

○공통

• palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.
• 사용자의 브라우저 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 보세요.
  Q. 위 요구사항은 아직 구현하지 못했습니다. '랜딩.html' 7줄에 meta 태그를 넣긴 했지만, 각 속성들이 어떤 기능을 가지고 있는지, minimum-scale, maximum-scale 값은 얼마를 줘야 하는지 몰라서 반영하지 못했고, 과제 제출 후 알아려고 합니다.

○랜딩page

• 랜딩 페이지의 url path는 루트(‘/’) 입니다.

• title은 Linkbrary로 설정해 주세요.

• 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 cursor: pointer를 설정해 주세요.

• Linkbrary 아이콘은 클릭 시 루트 페이지(‘/’)로 이동 합니다.

Q. 루트 페이지 = 랜딩 페이지 인가요?

• 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 해주세요.
• 화면의 너비가 1920px 보다 작아질 때, “Linkbrary” 로고의 왼쪽 여백 200px “로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워져야 합니다. >> 1920px 이상이면?
  Q. 1920px 보다 클 때는 로고 왼쪽 여백도 창 크기에 비례해 커져야 할까요? 1920px 을 기준으로 적으면 200px 로 고정되고, 크면 창의 크기에 비례해 늘어나는 기능은 어떻게 구현해야 할까요?
• 아래로 스크롤 해도 “Linkbrary” 로고와 “로그인” 버튼이 있는 상단 네비게이션 바(Global Navigation Bar)가 최상단에 고정되게 해주세요.

○랜딩page-header

• “로그인”은 클릭 시 로그인 페이지(‘/signin’)로 이동 합니다.
• “링크 추가하기”는 클릭 시 회원가입(‘/signup’)로 이동 합니다.

○랜딩page-footer

• 화면의 너비가 1920px 이상이면 내부에 있는 요소간 동일한 간격을 유지하며 가운데 정렬해야 합니다.
• 화면의 너비가 1920px 보다 작아질 때, 최하단에 있는 “codeit-2023”의 왼쪽 여백 104px과 SNS 아이콘들의 오른쪽 여백 104px을 유지하면서 가운데 있는 “Privacy Policy”, “FAQ” 요소와 각각 동일한 간격을 유지하며 가까워져야 합니다.
• “Privacy Policy”, “FAQ”는 클릭 시 각각 Privacy 페이지(‘/privacy’), FAQ 페이지(‘/faq’)로 이동 합니다.
• 페이스북, 트위터, 유튜브, 인스타그램 아이콘은 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동 합니다.

○로그인page

• Linkbrary 로고 클릭시 루트 페이지(“/”)로 이동해야 합니다.

• 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일해야 합니다.

• input 요소에 focus in 일 때, 테두리 색상은 파랑색입니다.(pseudo class를 활용해 보세요. 참고)

• input 요소에 focus out 일 때, 테두리 색상은 회색입니다.

• input 요소에 빨강색 테두리와 아래 빨강색 문구는 무시해 주세요.(추후 만들어갈 예정이에요.)

• SNS 아이콘들은 클릭시 각각 “https://www.google.com/”, “https://www.kakaocorp.com/page/” 으로 이동합니다.

• “회원 가입하기”는 클릭시 “/signup” 페이지로 이동합니다.

• 2주차 심화 요구사항(로그인, 회원가입 페이지 공통)

비밀번호 input 요소 위에 눈모양 아이콘을 추가해 주세요.(추후 클릭으로 비밀번호를 보거나 가릴 수 있도록 기능을 만들어 갈 예정이에요.)

○회원가입page

• “로그인 하기”는 클릭시 “/signin” 페이지로 이동합니다.

주요 변경사항

• 기능 구현

스크린샷

멘토에게

• 질문은 해당하는 요구사항 옆에 적었습니다!
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다. 감사합니다.

[Siihyun]

고생하셨습니다! :) 과제 구현 요구사항과 관련된 질문은 운영 QnA에 남겨주시면 감사하겠습니다🙇‍♂️

질문 답변드립니다.

Q. 위 요구사항은 아직 구현하지 못했습니다. '랜딩.html' 7줄에 meta 태그를 넣긴 했지만, 각 속성들이 어떤 기능을 가지고 있는지, minimum-scale, maximum-scale 값은 얼마를 줘야 하는지 몰라서 반영하지 못했고, 과제 제출 후 알아려고 합니다.

=> meta tag의 minimum-scale과 maximum-scale은 뷰포트의 축소 및 확대 범위를 결정하는데 사용되는 속성이에요 :)

minimum-scale은 사용자가 페이지를 축소할 수 있는 최소 비율을 정의합니다. 예를 들어, minimum-scale=1.0으로 설정하면 사용자는 페이지를 100% 이하로 축소할 수 없습니다!
maximum-scale은 반대로 사용자가 페이지를 확대할 수 있는 최대 비율을 정의합니다.

meta tag 잘 적용해 주셨는데, 사실 사용자의 브라우저 크고 작아짐에 따라 크기를 변경해달라는 요구사항은 반응형과 관련된 요구사항입니다.

따라서 meta tag를 수정하는게 아닌 media-query를 사용해주셔야 합니다. 링크 한번 읽어보시고 적용해보세요!

Q. 1920px 보다 클 때는 로고 왼쪽 여백도 창 크기에 비례해 커져야 할까요? 1920px 을 기준으로 적으면 200px 로 고정되고, 크면 창의 크기에 비례해 늘어나는 기능은 어떻게 구현해야 할까요?

=> 이 질문은 잘 이해를 못했는데, 멘토링 시간에 같이 보시죠!

[Siihyun]

eye-off, eye-on png와 svg를 둘다 사용하신 이유가 있을까요?
사용하지 않는다면 삭제해주시는게 좋습니다 :)

png를 사용하신 곳이 있고 svg를 사용하신 곳이 있는데, 어떤 기준으로 적용하신건지 궁금합니다😯

[BaeUiJin]

svg 가 이미지 크기를 줄여도 해상도가 낮아지지 않는다고 해서, 처음에는 png 로 했다가 나중에 svg 로 모두 바꾸었습니다. png 인 곳은 제가 실수로 놓친 부분입니다.^^;
https://www.adobe.com/kr/creativecloud/file-types/image/comparison/png-vs-svg.html

[Siihyun]

button 태그 자체에 스타일을 주는 방식보다는, class를 활용하면 어떨까요?
태그 자체에 스타일이 붙는 경우, 모든 button 태그에 영향을 주기 때문에 코드 재사용이 어렵고 디버깅도 어려워지게 됩니다!

특별한 이유가 있었던게 아니시면 class를 활용하는 방향으로 변경해주세요 :)

[Siihyun]

한글 파일명은 피하는게 좋습니다! 영어로 바꿔주세요!

1. 사용자의 접속 브라우저 환경에 따라 파일을 제대로 가져오지 못할 위험성이 존재합니다.(유니코드 이슈)
2. 현업에서도 아마 위와 같은 이유로 컨벤션에 맞지 않아 기각당할 확률이 높습니다😅