[정지성] Week2

[Byukchong]

요구사항

기본

• PC사이즈만 고려해 주어진 디자인을 구현했나요?
• ] HTML, CSS 파일을 Netlify로 배포했나요? (참고: https://www.codeit.kr/learn/5309)
• 랜딩 페이지의 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 요소 위에 비밀번호를 확인할 수 있는 눈 모양 아이콘을 추가했나요?

주요 변경사항

• 랜딩페이지, 회원가입 페이지, 로그인 페이지를 시안에 맞게 작성하였습니다.

스크린샷

https://2nd-week-mission-team12-jisungjeong.netlify.app/

멘토에게

• 사용자의 브라우저 크기가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, 폰트 사이즈 등 모든 크기와 관련된 값이 크고 작아지도록 설정했나요? 라는 심화 질문에 있어, width 값을 vw 또는 % 로 할당해주어 창크기에 맞춰 반응하게끔 만들었으나, min 값을 주지 않아 창의 크기가 크게 작아졌을때는 규격이 엉망이 되어버립니다. 이럴때에 효율적으로 텍스트 나 이미지가 유연하게 반응하게끔 하려면, 폰트 사이즈나 이미지 width height를 vw 나 %로 주는게 맞을까요?

[o-seung-yeon]

첫번째 미션 고생하셨습니다!
기한 맞춰 제출해주시고 시안에 들어가는 요소들은 다 추가해주셨네요.

배포한 사이트 확인해봤는데 질문 남겨주신 것처럼 브라우저 크기를 줄이고 키웠을 때 의도한 대로 구현이 되지 않은 것 같습니다.

반응형 디자인을 구현할 때 폰트 사이즈는 rem 단위를 많이 사용하므로 요걸 찾아보시면 좋을 것 같고, 이미지 사이즈는 따로 지정하지 않고 이미지 요소를 감싸고 있는 컨테이너 요소를 상대적인 단위로 설정하고, 이미지는 컨테이너에 꽉차는 형태로 수정해보면 어떨까 합니다!

반응형 디자인 관련해선 아래 도요타 사이트를 참고해보세요. 어떤 단위를 사용했는지를 중점적으로 보시면 좋을 것 같습니다.
https://www.toyota.co.kr/?utm_source=google&utm_medium=paidsearch&utm_campaign=brand&utm_content=all&gad_source=1&gclid=CjwKCAiA0PuuBhBsEiwAS7fsNUgPL1grAypC4khuLvNKWNTkcBg1JrjlLKmB1qcfh1dmbWPNDreqXBoCXiEQAvD_BwE

[o-seung-yeon]

lang 속성값으로 en 을 지정해주셨네요.
lang 은 사용할 언어를 정의하는 것이고 한국어로 디자인된 사이트를 작업하고 있으니
한국어를 나타내는 값으로 수정해야 합니다.
찾아보시고 수정해주세요!

[o-seung-yeon]

이미지 사이즈를 잘 지정해주셨네요~
다만 가독성을 위해 한줄에 한가지 속성만 존재하도록 엔터를 입력해 수정해 주세요.

[o-seung-yeon]

section1 과 content1 클래스를 가진 div 를 하나로 합치면 좋을 것 같습니다.
중첩해서 관리해야하는 이유가 분명하지 않다면 필요한 태그만 남기는 게 구조를 파악하기가 쉽기 때문입니다.

[o-seung-yeon]

변수를 지정할 때도 들여쓰기해주시고, 콜론 오른쪽에만 공백을 둬서 작성해주세요.

:root {
  --primary: #FFFFFF;
}

구글 컨벤션 링크 첨부합니다.
https://google.github.io/styleguide/htmlcssguide.html#Declaration_Stops

[o-seung-yeon]

전역적으로 모든 태그에 폰트가 설정되도록 해주셨네요 👍

추가로 말씀드리고 싶은 건 대소문자인데요.
font-face 로 지정한 폰트 명이 'Pretendard-Regular' 인데 'pretendard-Regular' 로 설정해주셨어요.
font-family 에 설정하는 폰트 명은 대소문자를 구분하지 않기 때문에 정상동작 하겠지만 혼선이 있을 수 있으니 대소문자도 일치시켜 작업해주시면 좋을 것 같습니다.

[o-seung-yeon]

이런 공백은 신경써서 지워주시고 블록 단위마다 엔터를 입력해 각 스타일을 구분하기 쉽도록 수정해주세요.

[o-seung-yeon]

css 파일 네이밍을 의미있게 수정하면 좋을 것 같습니다.
signin 페이지에서 사용되는 스타일시트니 signin.css 를 추천드립니다.

[o-seung-yeon]

또한 해당 색상 변수나 글꼴 설정은 여러 페이지에서 동일한 값을 사용하고 있다보니
color.css 와 같은 파일을 생성해 import 해서 사용하면 불필요한 중복을 줄일 수 있습니다.