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

[정인재] sprint3 #82

Merged
merged 2 commits into from
Jun 9, 2024
Merged

[정인재] sprint3 #82

merged 2 commits into from
Jun 9, 2024

Conversation

Injaeeee
Copy link
Collaborator

@Injaeeee Injaeeee commented Jun 7, 2024

요구사항

공통

  • 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
    PC: 1200px 이상
    Tablet: 768px 이상 ~ 1199px 이하
    Mobile: 375px 이상 ~ 767px 이하
    375px 미만 사이즈의 디자인은 고려하지 않습니다

랜딩 페이지

  • Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
  • Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
  • 화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다.

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

  • Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
  • Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
  • Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.

체크리스트 [심화]

  • 페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 Linkbrary 랜딩 페이지(“/”) 공유 시 좌측 예시와 같은 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정해 주세요.
  • 미리보기에서 제목은 “판다 마켓”, 설명은 “일상의 모든 물건을 거래해보세요”로 설정합니다.
  • 주소와 이미지는 자유롭게 설정하세요.

주요 변경사항

스크린샷

멘토에게

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

@Injaeeee Injaeeee requested a review from wlgns2223 June 7, 2024 05:03
@Injaeeee Injaeeee added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Jun 7, 2024
@Injaeeee Injaeeee closed this Jun 7, 2024
@Injaeeee Injaeeee reopened this Jun 7, 2024
@Injaeeee Injaeeee closed this Jun 7, 2024
@Injaeeee Injaeeee reopened this Jun 7, 2024
@Injaeeee Injaeeee closed this Jun 7, 2024
@Injaeeee Injaeeee reopened this Jun 7, 2024
@Injaeeee Injaeeee changed the base branch from main to Basic-정인재 June 7, 2024 06:01
wlgns2223
wlgns2223 reviewed Jun 9, 2024
View reviewed changes
index.html
Comment on lines 26 to 28
<div class="frame-text">
일상의 모든 물건을 </br>
거래해보세요
일상의 모든 물건을<br class="line mobile-line" /> 거래해보세요
</div>
Copy link
Collaborator

Choose a reason for hiding this comment

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

이 부분은 div 태그보다 p 태그를 쓰는게 더 시멘틱합니다.

Copy link
Collaborator

Choose a reason for hiding this comment

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

image

이미지를 보시면 컨텐츠의 너비가 부모요소의 패딩을 침범하고 있습니다. 모바일일때 패딩을 좀 줄이면 더 좋은 레이아웃이 될 것 같습니다 !

index.html
@@ -37,45 +36,43 @@

<article class="element">

<img src="/img/Img_home_01.png">
<img class="element-img" src="/img/Img_home_01.png">
Copy link
Collaborator

Choose a reason for hiding this comment

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

image

이미지에 vw 단위를 주셨네요 ! vw는 실무에서도 반응형 작업을 할때 많이 사용을 했습니다 !

article의 전체 사이즈가 이미지의 vw에 의존하고 section 태그의 display: flex, align-items: center에 의해 컨텐츠가 가운대로 모였습니다.

저는 개인적인 경험으로는 section 태그에 상하좌우 패딩을 주어 모서리와 컨텐츠간의 일정 부분 간격을 보장하는것이 좋다고 생각합니다. section 태그가 일종의 container 역할을 하고 있는데, 대부분의 디자인에서는 container가 패딩을 가지고 있습니다.

image

위는 section에 임의의 패딩을 준 모습입니다. 개인적인 경험으로 이런 모습이 조금 더 유지보수하기 용이한 레이아웃이었습니다.

index.html
쉽게 등록하세요
</p>
</div>
</article>
</section>

</div>

<div class="frame">
Copy link
Collaborator

Choose a reason for hiding this comment

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

image

이 부분도 컨텐츠가 패딩을 침범하네요 ~ 패딩을 좀 줄이면 될 것 같습니다.

index.html
Copy link
Collaborator

Choose a reason for hiding this comment

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

body에 태그 자체에 margin 스타일을 부여하셨네요. html 태그에 직접적인 스타일링은 웬만하면 지양해야합니다.
다른 개발자들과의 협업을 어렵게 만드는 요소입니다.

Copy link
Collaborator

Choose a reason for hiding this comment

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

image

footer의 디자인이 시안과 다르게 되어있네요. 이 부분 확인 부탁드립니다.

login/index.html
@@ -9,13 +9,13 @@
</head>

<body class="loginPage">
Copy link
Collaborator

Choose a reason for hiding this comment

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

image
body에 8px의 마진이 들어 가 있습니다. 컨텐츠가 오른쪽으로 치우쳐 져 보이네요.
body에 마진을 빼면 해결 됩니다.

login/index.html
Copy link
Collaborator

Choose a reason for hiding this comment

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

input, label 속성등에 html 태그에 직접적인 스타일링이 되어있네요. 클래스 이름을 통해서 스타일을 해주시길 바랍니다.

login/index.html
Copy link
Collaborator

Choose a reason for hiding this comment

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

디자인 시안상 모바일 사이즈는 400px을 넘기지 않아야하기때문에 최대 400px까지는 커져야합니다.
input 태그에 모바일 사이즈 기준으로 width를 343px을 주셨고, 부모태그의 너비가 컨텐츠의 넓이에 의해 결정되므로 form태그의 너비가 343px 쯤으로 머무르는걸로 판단됩니다.

form 태그의 max-width를 400px로 하고 input 태그의 너비를 width: 100%로 주는 접근을 하는것이 좀 더 나은 마크업이라고 생각합니다.

@wlgns2223
Copy link
Collaborator

스프린트 미션 3 수고하셨습니다 !!

@wlgns2223 wlgns2223 merged commit 9ca1f42 into codeit-bootcamp-frontend:Basic-정인재 Jun 9, 2024
3 checks passed
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
@Injaeeee @wlgns2223