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

[김정현] Sprint3 #74

Conversation

kjh9852
Copy link
Collaborator

@kjh9852 kjh9852 commented Jun 4, 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 랜딩 페이지(“/”) 공유 시 좌측 예시와 같은 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정해 주세요.
  • 미리보기에서 제목은 “판다 마켓”, 설명은 “일상의 모든 물건을 거래해보세요”로 설정합니다.
  • 주소와 이미지는 자유롭게 설정하세요.

주요 변경사항

  • sns 아이콘 들과 간편 로그인 아이콘들을 이미지 스프라이트 기법으로 바꿨습니다.
  • 안쓰이는 이미지들은 제거했습니다.

스크린샷

screencapture-sprint-fe8-kjh-netlify-app-2024-06-05-02_11_17 (1)

KakaoTalk_20240605_120528829

배포 Link입니다!

멘토에게

  • css 파일은 페이지 별로 나누는게 좋을 지 궁금합니다.
  • 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

kjh9852 added 5 commits June 5, 2024 01:32

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
prettier로 자동정렬시 태그의 꺽쇠 기호가 다음 줄로 내려가는 현상 수정
이미지 이름 직관적으로 수정, 안쓰는 이미지 삭제
img 태그의 alt속성 이미지에 맞게 수정(접근성 향상을 위함)
@kjh9852 kjh9852 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Jun 4, 2024
@kjh9852 kjh9852 changed the title [김정현] sprint3 [김정현] Sprint3 Jun 4, 2024
@kjh9852 kjh9852 requested a review from arthurkimdev June 7, 2024 01:22
Copy link
Collaborator

@arthurkimdev arthurkimdev left a comment

Choose a reason for hiding this comment

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

전반적으로 이미 스프린트2 과제때 스프린트3 내용을 먼저 작업 해주셔서, 그때 받았던 리뷰 사항들을 반영해주신 느낌이네요! 멘토링 & 리뷰 때 말씀드린 내용 하나도 놓치지 않고 반영해주시느라 수고하셨습니다 🙏

Comment on lines +115 to +122
.ir_so {
overflow: hidden;
position: absolute;
width: 0;
height: 0;
line-height: 0;
text-indent: -9999px;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

멘토링 때 말씀드린 블라인드 텍스트까지 추가해주셨군요! 👍

Comment on lines +41 to +45
export function isPasswordHide(btn, input) {
const isPasswordVisible = input.type === 'password';
input.type = isPasswordVisible ? 'text' : 'password';
btn.classList.toggle('show', isPasswordVisible);
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

지난번 리뷰 때 말씀드렸던 내용을 반영해주셨네요! 굳 👍
앞으로도 toggle 을 많이 사용하게될거에요.

Comment on lines +1 to +19
@charset "uft-8";

/* default */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: 'Pretendard Variable', Pretendard, -apple-system,
BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI',
'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}

html {
font-size: 16px;
}

Copy link
Collaborator

Choose a reason for hiding this comment

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

reset.css 파일 추가 좋습니다! 리뷰반영 굳!

Comment on lines +6 to +14
<meta name="description" content="일상의 모든 물건을 거래해보세요" />

<meta property="og:title" content="판다마켓" />
<meta property="og:url" content="https://sprint-fe8-kjh.netlify.app/" />
<meta
property="og:image"
content="https://sprint-fe8-kjh.netlify.app/assets/images/og_image.jpg"
/>
<meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

og 그래프 적용 좋아요!

Comment on lines +9 to +10
<link rel="stylesheet" href="../assets/css/register.css" />
<link rel="stylesheet" href="../assets/css/response.css" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

css를 이렇게 모듈별로 나누는 방법은 현업에서도 많이 사용해요. 굳 👍

Copy link
Collaborator

Choose a reason for hiding this comment

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

css 파일은 페이지 별로 나누는게 좋을 지 궁금합니다.

-> 질문에 대한 답이 되셨을까요!? common한 성격에 css 파일들과 특정 페이지에서만 사용하는 파일들이 있기 때문에 위 처럼 나누는 방법을 사용한답니다.

Comment on lines +16 to +18
html {
font-size: 16px;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

reset css에서 16px 잘해주셨는데요, 그러다보니 rem 사용하실 때 소수점이 나와서 좀 불편하셨을 것 같아요.
이런 방법을 우회하는 방법이 font-size: 62.5% 사용해서 rem 값에 소수점이 발생하지 않도록 하는 방법이 있어요.
링크 남겨드릴테니 다음번에 한번 적용해봐주세요!

https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font-size-trick/

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

넵 감사합니다!

@arthurkimdev arthurkimdev merged commit 3e4b704 into codeit-bootcamp-frontend:Basic-김정현 Jun 8, 2024
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