Skip to content

[김미진]Week3#77

Open
mijin0928 wants to merge 1 commit intocodeit-bootcamp-frontend:part1-김미진from
mijin0928:part1-김미진-week3

Hidden character warning

The head ref may contain hidden characters: "part1-\uae40\ubbf8\uc9c4-week3"
Open

[김미진]Week3#77
mijin0928 wants to merge 1 commit intocodeit-bootcamp-frontend:part1-김미진from
mijin0928:part1-김미진-week3

Conversation

@mijin0928
Copy link
Copy Markdown
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
Comment thread week3/linkbrary/index.html
<header>
<nav>
<a href="index.html">
<img src="./images/logo.svg" alt="홈으로 연결된 Linkbrary 로고" / class="mobile-logo">
Copy link
Copy Markdown
Collaborator

@lunaticscode lunaticscode Nov 7, 2023

Choose a reason for hiding this comment

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

중간에 / 는 지워주세요.

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

@lunaticscode lunaticscode Nov 7, 2023

Choose a reason for hiding this comment

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

여기도 수정해주세요.

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

@lunaticscode lunaticscode Nov 7, 2023

Choose a reason for hiding this comment

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

수정

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

@lunaticscode lunaticscode Nov 7, 2023

Choose a reason for hiding this comment

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

수정

Copy link
Copy Markdown
Collaborator

@lunaticscode lunaticscode Nov 7, 2023

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태그의 클래스명 수정
- 파일경로 수정
@mijin0928 mijin0928 force-pushed the part1-김미진-week3 branch from d1e989a to f69ff7c Compare November 20, 2023 03:08
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