[오동혁] Week2

[ohdong9795]

요구사항

기본

• PC 사이즈만 고려해 주어진 디자인을 구현했나요?
• HTML, CSS 파일을 Netlify로 배포했나요? (참고: https://www.codeit.kr/learn/5309)
  배포 url : https://65daabcac4acfb74598568a7--glowing-muffin-067f52.netlify.app/
• 랜딩 페이지의 url path는 루트(‘/’)로 설정했나요?
• title은 Linkbrary로 설정했나요?
• 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 했나요?
• 화면의 너비가 1920px 보다 작아질 때, “Linkbrary” 로고의 왼쪽 여백 200px “로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 했나요?
• Linkbrary 아이콘은 클릭 시 루트 페이지(‘/’)로 이동하나요?
• 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 cursor: pointer를 설정했나요?
• “로그인”은 클릭 시 로그인 페이지(‘/signin’)로 이동하나요?
• “링크 추가하기”는 클릭 시 회원가입(‘/signup’)로 이동하나요?
• 화면의 너비가 1920px 이상이면 내부에 있는 요소간 동일한 간격을 유지하며 가운데 정렬해야 합니다.
• 화면의 너비가 1920px 보다 작아질 때, 최하단에 있는 “codeit-2023”의 왼쪽 여백 104px과 SNS 아이콘들의 오른쪽 여백 104px을 유지하면서 가운데 있는 “Privacy Policy”, “FAQ” 요소와 각각 동일한 간격을 유지하며 가까워져야 합니다.
• “Privacy Policy”, “FAQ”는 클릭 시 각각 Privacy 페이지(‘/privacy’), FAQ 페이지(‘/faq’)로 이동하나요?
• 페이스북, 트위터, 유튜브, 인스타그램 아이콘은 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동 하나요?
• 아래로 스크롤 해도 “Linkbrary” 로고와 “로그인” 버튼이 있는 상단 네비게이션 바(Global Navigation Bar)영역이 최상단에 고정되게 했나요?
• Linkbrary 로고 클릭시 루트 페이지(“/”)로 이동하나요?
• 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일한가요?
• input 요소에 focus in 일 때, 테두리 색상이 파랑색인가요?
• input 요소에 focus out 일 때, 테두리 색상이 회색인가요?
• SNS 아이콘들은 클릭시 각각 “https://www.google.com/”, “https://www.kakaocorp.com/page/” 으로 이동하나요?
• “회원 가입하기”는 클릭시 “/signup” 페이지로 이동하나요?
• “로그인 하기”는 클릭시 “/signin” 페이지로 이동하나요?

심화

• 사용자의 브라우저 font-size가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정했나요?
• palette에 있는 color값들을 css 변수로 등록하고 사용했나요?
• 비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 눈 모양 아이콘을 추가했나요?

주요 변경사항

스크린샷

멘토에게

• 요구사항 안 보고 만들다가 확인했더니 비밀번호 눈 모양 이미지에 기능 구현은 필요 없었는데 만들어뒀습니다.
• 위와 같은 이유로 비밀번호 확인 기능도 넣어뒀습니다.
• 멘토님이 말씀해주신 vite 환경에서 개발하다가 js 파일에서 document.getElementById()를 사용해서 이벤트 리스너를 달아주려 했는데 에러가 나서 확인해보니 node.js 환경에서는 DOM이 없다고 해서 태그에 onclick, onkeyup 함수 연결해주고 함수내에서 this.document 사용해서 해결은 했는데 어떻게 처리하는 것이 좋나요?
• 심화 요구사항 중 페이지 크기에 따라 font-size 등 모든 크기와 관련된 값을 동적으로 설정하라는 요구사항을 처리하지 모못했는데
  vw, vh, em, rem, %를 사용한다고 하면 fhd 기준으로 전체화면 1920 x 1080 기준으로 전체화면일때 100px이 되어야하고 브라우저의 크기가 줄을수록 비례하여 줄게 만드려면 어떤식으로 처리해야합니까?