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.

Sign up for GitHub

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

Jump to bottom

[나윤주] Sprint2 #46

Merged
merged 6 commits into from
Jun 1, 2024
Merged

[나윤주] Sprint2 #46

merged 6 commits into from
Jun 1, 2024

Conversation

naynara87
Copy link
Collaborator

판다마켓

사이트주소: https://pandamarket-momo.netlify.app/

요구사항

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

기본

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

심화

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

주요 변경사항

//scss 변환
sass assets/scss/style.scss assets/css/style.css

스크린샷

main
signup
login

멘토에게

@naynara87 naynara87 requested a review from wlgns2223 May 31, 2024 04:37
@naynara87 naynara87 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label May 31, 2024
@naynara87
Copy link
Collaborator Author

naynara87 commented May 31, 2024 •
edited
Loading

제가 스프린트 미션2 커밋을 나누지 못하고 그냥 한번에 올렸습니다.
미션3 부터는 커밋 정리 나눠서 올려야할까요?
아니면 미션 3이라고 해서 한번에 올리는게 나을까요?

wlgns2223
wlgns2223 reviewed Jun 1, 2024
View reviewed changes
index.html
Comment on lines +23 to +32
<div class="main-banner">
<div class="banner-background">
<div class="banner-wrap">
<div class="banner-text">
<h2 class="title">일상의 모든 물건을<br>거래해 보세요</h2>
<a class="btn-lg btn-primary" href="/items">구경하러 가기</a>
</div>
</div>
</div>
</div>
Copy link
Collaborator

Choose a reason for hiding this comment

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

다들 image 태그로 많이 하시는데 배경 이미지로 하신것은 좋은 접근법인것 같습니다 !!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

다들 image 태그로 많이 하시는데 배경 이미지로 하신것은 좋은 접근법인것 같습니다 !!

네 감사합니다.

index.html
Comment on lines +36 to +38
<div class="section-img">
<img src="./assets/img/Img_home_01.png" alt="Hot item">
</div>
Copy link
Collaborator

Choose a reason for hiding this comment

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

section-img의 width와 height를 없애더라도 레이아웃에는 변화가 없습니다.
img은 width:100% 로 되어있습니다. width:100%가 있던 없던 이미지의 레이아웃은 변하지 않습니다. 어떻게 img 태그는 이미지의 사이즈를 알고 있을까요?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

section-img의 width와 height를 없애더라도 레이아웃에는 변화가 없습니다. img은 width:100% 로 되어있습니다. width:100%가 있던 없던 이미지의 레이아웃은 변하지 않습니다. 어떻게 img 태그는 이미지의 사이즈를 알고 있을까요?

놓치고 갔나봅니다. 다시 확인해보겠습니다^^

index.html
Comment on lines +46 to +56
<section class="section sec02 reverse">
<div class="section-img">
<img src="./assets/img/Img_home_02.png" alt="Search">
</div>
<div class="section-text">
<span class="label">Search</span>
<h3 class="title">구매를 원하는<br>상품을 검색하세요</h3>
<p class="description">구매하고 싶은 물품은 검색해서<br>
쉽게 찾아보세요</p>
</div>
</section>
Copy link
Collaborator

Choose a reason for hiding this comment

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

클래스 이름 재사용을 잘 하고 계시네요 !

index.html

<footer>
<div class="footer-wrap">
<div class="copyright">©codeit - 2024</div>
Copy link
Collaborator

Choose a reason for hiding this comment

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

여기는 p 또는 span 태그가 더 적절해 보이네요 !

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

여기는 p 또는 span 태그가 더 적절해 보이네요 !

네 수정해보겠습니다~

index.html
<h1 class="sr-only">판다마켓</h1>
</a>

<a href="/login" class="btn-sm btn-primary">로그인</a>
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
<a href="/login" class="btn-sm btn-primary">로그인</a>
<a href="/login.html" class="btn-sm btn-primary">로그인</a>

.html 확장자를 붙여주어서 이동이 가능하게 만들어주세요 !

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

.html 확장자를 붙여주어서 이동이 가능하게 만들어주세요 !

넵

login.html
Comment on lines +18 to +19
<fieldset>
<legend class="sr-only">판다마켓 로그인</legend>
Copy link
Collaborator

Choose a reason for hiding this comment

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

fieldset legend 그리고 IR기법까지 사용하셨네요 !! 👍

@wlgns2223 wlgns2223 merged commit e68ad6c into codeit-bootcamp-frontend:Basic-나윤주 Jun 1, 2024
@wlgns2223
Copy link
Collaborator

경력자이셔서 아주 군더더기 없이 잘 하신것 같아요 !
스프린트 미션 수고하셨습니다 !

@wlgns2223
Copy link
Collaborator 

제가 스프린트 미션2 커밋을 나누지 못하고 그냥 한번에 올렸습니다.
미션3 부터는 커밋 정리 나눠서 올려야할까요?
아니면 미션 3이라고 해서 한번에 올리는게 나을까요?

git 연습도 할 겸 , 미션 3부터는 브랜치를 나눠서 올리는것을 권장드리겠습니다 !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@wlgns2223 wlgns2223 wlgns2223 left review comments

Assignees
No one assigned
Labels
매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@naynara87 @wlgns2223