[김다진]Week2

[GoldenHamsterK]

요구사항

기본

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

심화

• palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.
• 사용자의 브라우저 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 보세요.
• 비밀번호 input 요소 위에 눈모양 아이콘을 추가해 주세요.
(추후 클릭으로 비밀번호를 보거나 가릴 수 있도록 기능을 만들어 갈 예정이에요.)

주요 변경사항

• Netlify 배포 : https://65e1c6a1207176caec426ad6--tourmaline-smakager-4af4da.netlify.app/

스크린샷

멘토에게

• 반응형 검색해서 해보려고했는데 폰트가 이상해집니다
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[Siihyun]

style.css 파일이 글로벌 스타일을 담당하는것 같은데, 의미를 조금 더 잘 담도록 global-style.css or globalStyle.css로 변경해서 사용하는건 어떨까요?

고생많으셨습니다!! :)

[Siihyun]

이미지 태그 사용하실때 alt 태그 함께 넣어주시는게 좋습니다. alt 태그에 대해서 잘 설명된 링크 첨부드리니, 한번 참고해보세요ㅎㅎ 링크

[Siihyun]

footer 태그에 스타일을 주는 방식보다는, class를 활용하면 어떨까요?

태그 자체에 스타일이 붙는 경우, 모든 footer 태그에 영향을 주기 때문에 코드 재사용이 어렵고 디버깅도 어려워지게 됩니다!

특별한 이유가 있었던게 아니시라면 class를 활용하는 방향을 추천드립니다.

[Siihyun]

lang="ko"를 사용하는건 어떨까요?