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

[김태훈] sprint2 #31

Conversation

SHAKALOHANA
Copy link
Collaborator

요구사항

Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
Netlify에 파일 배포가 아닌 포크한 Github 레포지토리로 연결합니다.
피그마 디자인에 맞게 페이지를 만들어 주세요.
React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.

기본

로그인 페이지, 회원가입 페이지 공통

  • “판다마켓" 로고 클릭 시 루트 페이지(“/”)로 이동합니다.
  • 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다.
  • input 요소에 focus in 일 때, 테두리 색상은 #3692FF입니다.
  • input 요소에 focus out 일 때, 테두리는 없습니다.
  • SNS 아이콘들은 클릭시 각각 실제 서비스 홈페이지로 이동합니다.

로그인 페이지

  • “회원가입”버튼 클릭 시 “/signup” 페이지로 이동합니다.

회원가입 페이지

  • “로그인”버튼 클릭 시 “/login” 페이지로 이동합니다.

심화

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

@SHAKALOHANA SHAKALOHANA added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Aug 17, 2024
Copy link
Collaborator

@JaeSang1998 JaeSang1998 left a comment

Choose a reason for hiding this comment

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

태훈님 이번 과제 너무 열심히 잘해주셨습니다 :) 고생하셨어요!

Copy link
Collaborator

Choose a reason for hiding this comment

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

오 태훈님 js 로 토글도 동작하게 만들어주셨군요! 너무 좋은데요?

<div class="section-box">
<img class="section_content" src="images/Img_home_01.png" alt="Hot item 그림">
<div class="section_content_p_box">
<p class="section_content_p1">Hot item</p>
Copy link
Collaborator

Choose a reason for hiding this comment

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

css 클래스이름을 엄청 꼼꼼하게 잘 작성해주셨네요.

한가지 아쉬운점은 어떤것은 kebab-case 로 작성되어있고 어떤건 snake_case 로 작성되어 있는 점이에요.
둘 중 어떤게 옳다! 라기보다는 하나로 맞춰서 일관성 있게 작성되면 좋을 것 같아요 :)

}

:root {
--primary-color100: #3692FF;
Copy link
Collaborator

Choose a reason for hiding this comment

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

오 컬러팔레트도 잘 이용해주셨군요 너무 좋습니다 :)

.section-container-right {
max-width: 1920px;
height: 985px;
padding: 190px 200px 190px 200px;
Copy link
Collaborator

Choose a reason for hiding this comment

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

이런경우에는 padding: 190px 200px 요렇게 축약해서 나타낼 수 있었을것 같아요



:root {
--primary-color100: #3692FF;
Copy link
Collaborator

Choose a reason for hiding this comment

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

css variant 를 설정해주는곳이 두군데가 되었어요. 이 부분만 별도로 분리해서 css 를 import 하게 하는건 어떨까요?

label {
font-size: 18px;
font-weight: 700;
font-family: 'pretendard';
Copy link
Collaborator

Choose a reason for hiding this comment

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

font-family 는 별도의 이유가 없다면 최대한 가장 위! root 에서 공통으로 적용되도록 해주시는게 좋습니다 :)

</a>
</div>
<div class="header-login-box">
<a href="login.html">
Copy link
Collaborator

Choose a reason for hiding this comment

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

login.html 로 보내는것도 방법이지만, 멘토링때 이야기했던 것 처럼 login page 를 만들어서 /login 으로 보내고 해당 폴더의 index.html 을 불러오게끔 하는것도 좋은 방법입니다!

}

.footer-link {
margin: 0px 10px 0px 10px;
Copy link
Collaborator

Choose a reason for hiding this comment

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

margin 도 동일하게 margin: 0px 10px 이렇게 표현할 수 있을 것 같네요!

@JaeSang1998 JaeSang1998 merged commit dcaabd3 into codeit-bootcamp-frontend:Basic-김태훈 Aug 20, 2024
1 check failed
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