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

[김미진]Week3 #77

Open
wants to merge 1 commit into
base: part1-김미진
Choose a base branch
from
Open

[김미진]Week3 #77

wants to merge 1 commit into from

Conversation

mijin0928
Copy link
Collaborator

@mijin0928 mijin0928 commented Nov 4, 2023 •
edited
Loading

요구사항

기본

  • 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용했나요?
    - PC: 1200px 이상
    - Tablet: 768px 이상 ~ 1199px 이하
    - Mobile: 375px 이상 ~ 767px 이하
    - 375px 미만 사이즈의 디자인은 고려하지 않습니다
  • [랜딩 페이지] 페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 Linkbrary 랜딩 페이지(“/”) 공유 시 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정했나요?
  • [랜딩 페이지] 미리보기에서 제목은 “Linkbrary”, 설명은 “세상의 모든 정보를 쉽게 저장하고 관리해 보세요”로 설정했나요?
  • [랜딩 페이지] 주소와 이미지는 자유롭게 설정했나요?
  • [랜딩 페이지] Tablet 사이즈에서 화면의 너비가 1199px 이하로 작아질 때 “Linkbrary” 로고와 “로그인” 버튼 사이의 간격은 변하지 않게 고정값으로 유지하되 좌우 여백이 줄어드나요?
  • [랜딩 페이지] Tablet 사이즈에서 최소 좌우 여백은 “Linkbrary” 로고의 왼쪽에 여백 32px, “로그인” 버튼 오른쪽 여백 32px을 유지하고“Linkbrary” 로고와 “로그인" 버튼의 간격이 가까워지나요?
  • [랜딩 페이지] PC, Tablet 사이즈의 이미지 크기는 고정값을 사용했나요?
  • [랜딩 페이지] Mobile 사이즈의 이미지는 좌우 여백 32px을 제외하고 이미지 영역이 꽉 차나요?
    (이때 가로가 커지는 비율에 맞춰 세로도 커져야 합니다.)
  • [랜딩 페이지] Mobile 사이즈 너비가 커지면, “Privacy Policy”, “FAQ”, “codeit-2023”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 커지나요?
  • [로그인, 회원가입 페이지] Tablet 사이즈에서 디자인은 PC사이즈와 동일한가요?
  • [로그인, 회원가입 페이지] Mobile 사이즈에서 좌우 여백 32px 제외하고 내부 요소들이 너비를 모두 차지하나요?
  • [로그인, 회원가입 페이지] Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않나요?

심화

  • 팀원의 위클리 미션 PR에 코드 리뷰를 남겼나요?
  • 랜딩 페이지 Mobile 사이즈에서 제품 소개 영역의 순서를 제목, 설명, 이미지 => 제목, 이미지, 설명 순서로 변경했나요?

주요 변경사항

  • 코드잇에서 제공한 1주차 랜딩 페이지 템플릿코드를 가져와 반응형으로 만들었습니다.
  • 랜딩 페이지에 메타태그를 설정하여 미리보기를 볼 수 있도록 만들었습니다.
  • 2주차에서 만든 로그인, 회원가입 페이지를 반응형으로 만들었습니다. (pc와 tablet은 동일)

스크린샷

127 0 0 1_5500_week3_week1_responsive_index html (1)

127 0 0 1_5500_week3_week1_responsive_index html

스크린샷 2023-11-04 141924




127 0 0 1_5500_week3_week2_responsive_signin html

127 0 0 1_5500_week3_week2_responsive_signup html

멘토에게

  • 2주차 위클리미션 수정사항 반영하였습니다.

@mijin0928 mijin0928 changed the title 김미진[Week3] [김미진]Week3 Nov 4, 2023
@mijin0928 mijin0928 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Nov 4, 2023
@mijin0928 mijin0928 changed the base branch from main to part1-김미진 November 4, 2023 06:43
@mijin0928 mijin0928 force-pushed the part1-김미진-week3 branch 2 times, most recently from 16aae53 to 724021c Compare November 5, 2023 07:59
lunaticscode
lunaticscode reviewed Nov 7, 2023
View reviewed changes
week3/linkbrary/index.html Outdated
<header>
<nav>
<a href="index.html">
<img src="./images/logo.svg" alt="홈으로 연결된 Linkbrary 로고" / class="mobile-logo">
Copy link
Collaborator

Choose a reason for hiding this comment

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

중간에 / 는 지워주세요.

week3/linkbrary/index.html Outdated
<section>
<h2 class="title">
<span class="title-1-gradient background-clip-text"> 원하는 링크</span>를
<br / class="pc-hide">
Copy link
Collaborator

Choose a reason for hiding this comment

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

여기도 수정해주세요.

week3/linkbrary/index.html Outdated
</h2>
<p class="description">
나중에 읽고 싶은 글, 다시 보고 싶은 영상,
<br / class="pc-hide">
Copy link
Collaborator

Choose a reason for hiding this comment

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

수정

week3/linkbrary/index.html Outdated
나중에 읽고 싶은 글, 다시 보고 싶은 영상,
<br / class="pc-hide">
사고 싶은 옷, 기억하고 싶은 모든 것을
<br / class="pc-hide">
Copy link
Collaborator

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.

아래 쪽에 <br / class="pc-hide"> 확인하시고 모두 수정해주세요.

@mijin0928
refactor(mentor):
f69ff7c 
- label태그의 for값과 input태그의 id값 수정
- form태그안에 div태그의 클래스명 수정
- 파일경로 수정
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@lunaticscode lunaticscode lunaticscode left review comments

@sooki88 sooki88 Awaiting requested review from sooki88

@imkrmin imkrmin Awaiting requested review from imkrmin

@Useong0 Useong0 Awaiting requested review from Useong0

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

Successfully merging this pull request may close these issues.
2 participants
@mijin0928 @lunaticscode