Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[오다은]Week2 #46

Merged

Conversation

O-daeun
Copy link
Collaborator

@O-daeun O-daeun commented Feb 25, 2024

요구사항

기본

  • [기본] 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 요소 위에 비밀번호를 확인할 수 있는 눈 모양 아이콘을 추가했나요?

주요 변경사항

스크린샷

week2_main

멘토에게

  • class이름 지을 때 block의 기준을 잡기가 어려웠습니다.
    예시로, 로그인 페이지에서 signin__text-wp 부분은 block이 signin이고,
    그 바로 밑의 form은 form 자체를 block 단위로 삼아서 signin-form로 class이름을 지었습니다. 이런 부분이 잘 사용한 것인지 궁금합니다!
    (저는 퍼블리셔로 근무할 때 .signin .text a 이런 식으로 css를 적용했어서 bem방법이 조금 헷갈립니다!)
  • 심화 미션 중 첫 번째로, 브라우저 font-size가 크고 작아짐에 따라 페이지의 여러 요소의 값들이 변경되도록 설정하라는 미션이 있었는데, 이 부분이 rem 단위를 사용하라는 의미인지, 그리고 rem 단위를 현업에서도 많이 사용하게 되는지 궁금합니다! 저는 퍼블리셔로 근무할 때 rem은 사용을 하지 않고 반응형의 경우에는 특정 크기 이하일 때 px단위로만 크기를 지정했어서 rem이나 em을 멘토님께서는 많이 사용하시는지 궁금합니다!
  • 페이지가 첫 로딩될 때 글자가 0.1초 기본글자이다가 폰트가 적용되는데, 이 현상을 해결할 수 있는 방법이 있는지 궁금합니다!

@O-daeun O-daeun requested a review from clianor February 25, 2024 10:08
@O-daeun O-daeun added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Feb 25, 2024
@clianor
Copy link
Collaborator

clianor commented Feb 27, 2024

Q1. class 이름 지을때 block의 기준
A1.
block은 독립적이되 추상적인 개념을 나타내는 것이 재사용성면에서 좋기 때문에 만약 저라면 signin-form 보다는 auth-form 혹은 AuthForm을 block 으로 잡았을것 같습니다.
그렇게 해서 auth-form__input, auth-form__label, auth-form__button 이런식으로 작성 했을것 같습니다.

@clianor
Copy link
Collaborator

clianor commented Feb 27, 2024

Q2. font-size가 크고 작아짐에 따라 페이지의 여러 요소의 값이 변경되도록 설정하라는 미션.
A2.
해당 미션은 rem을 사용하라는 의미가 맞는 것으로 보입니다.
저 같은 경우는 em은 사용해본적은 없지만 rem의 경우는 많이 사용하고 있습니다.

@clianor
Copy link
Collaborator

clianor commented Feb 27, 2024

Q3. 페이지가 첫 로딩될 때 0.1초후 기본 폰트에서 바뀌는 문제
A3.
해당 문제를 해결하기 위해서 나온 것이 font-display 라는 속성입니다.
이 속성은 @font-face에 포함된 속성인데 참고 링크를 남겨드립니다.

참고1
참고2

@O-daeun O-daeun closed this Feb 28, 2024
@O-daeun O-daeun reopened this Feb 28, 2024
@clianor clianor merged commit 6a3a441 into codeit-bootcamp-frontend:part1-오다은 Feb 28, 2024
1 check passed
@clianor
Copy link
Collaborator

clianor commented Feb 28, 2024

크게 지적할 부분은 없는것 같습니다.
몇 가지 말씀드리자면

  1. button 태그를 사용하실때 적절한 type을 항상 주입해주세요.
  2. signin, signup 페이지들에서 signin이라는 접두사를 사용하고 있는데 좀더 범용적인 접두사를 이용하시는게 좋을것 같습니다.
  3. 페이지 전환시 절대 경로를 사용하므로 에셋들도 불러올때 절대 경로를 통해 불러오는게 어떨까 싶습니다.
  4. 클래스명에 ul, li 과 같은 태그를 지정하시기보다 list, item과 같이 목적에 맞춰 지정해주세요.
  5. wp 과 같은 약어는 관련 지식이 없는 분이 봤을때 혼동할 여지가 있습니다. wrapper 혹은 container로 명시하는게 좋습니다.

@clianor
Copy link
Collaborator

clianor commented Feb 28, 2024

고생하셨습니다.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants