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 #4

Conversation

striker1826
Copy link
Collaborator

요구사항

기본

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

심화

  • palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.
  • 비밀번호 input 요소 위에 눈모양 아이콘을 추가해 주세요.

주요 변경사항

스크린샷

image

멘토에게

  • 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

@striker1826 striker1826 marked this pull request as draft February 23, 2024 02:09
@striker1826 striker1826 requested a review from devToram February 23, 2024 02:19
@striker1826 striker1826 marked this pull request as ready for review February 23, 2024 02:22
Copy link
Collaborator

@devToram devToram left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reset CSS 적용해보시면 좋을 거 같고, css class 들을 통해서 css 중복을 줄여보심 좋을 거 같습니다!
+다음 번에는 커밋 나눠주세요!

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width= , initial-scale=1.0" />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

width 를 쓰신다면 숫자를, 안쓰신다면 제거해주세요~

</div>
</section>

<section class="section manage">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

클래스 이름으로 태그 이름을 쓰시는 건 지양해주세요! 실제 하는 역할을 나타내는 클래스 이름을 추천드립니다!

--Gray5: #f0f6ff;
--Gray6: #6b6b6b;
--Grey-Light: #f5f5f5;
--gra-purpleblue-to-skyblue: linear-gradient(91deg, #6d6afe 0.12%, #6ae3fe 101.84%);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

css변수 규칙이 있으면 좋을 거 같아요 다 대문자로 시작하는데 , gra~ 변수만 소문자로 시작하네요!

padding: 16px 20px;
border-radius: 8px;
border-radius: 8px;
text-decoration: none;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

같은 속성은 한 번만 적어주세요!

Comment on lines +23 to +24
text-decoration: none;
text-align: center;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이런 속성은 아마 figma에서 그대로 따오신 거 같은데, 피그마는 진짜 참고이고, 실제로 사용하는 최소한의 속성만 기재해주세요!

}

.move-link p {
color: var(--black, #000);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

기존 변수는 --Black 이었던 거 같아요!

}

.social-login p {
color: var(--Linkbrary-gray100, #373740);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이미 지정해놓은 css 변수에 대해서는 대체 컬러를 지정하지 않아도 될 거 같아요!

@devToram devToram merged commit 2d83cd8 into codeit-bootcamp-frontend:part1-김민섭 Feb 24, 2024
kiJu2 pushed a commit that referenced this pull request Mar 19, 2024
style: sign-in 오류 시 input style에 red border 추가
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants