-
Notifications
You must be signed in to change notification settings - Fork 45
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 #89
The head ref may contain hidden characters: "Basic-\uC624\uBA85\uC12D-sprint3"
[오명섭] Sprint3 #89
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
고생많으셨습니다. 지난주에 비해 코드가 많이 정리되었네요!
part1도 고생많으셨고 part2 도 화이팅하세요💪💪
<a href="/index.html">판다마켓</a> | ||
</div> | ||
</header> | ||
<div class="blank"></div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
여백을 주실 땐 empty tag 를 사용하는 것보다 css 의 padding, margin, 또는 display: flex
gap: 00px
를 사용해주시는게 좋습니다.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
제거하고 아래 태그에서 마진 탑을 줘서 처리했습니다.
<div class="blank"></div> | ||
<main> | ||
<div class="content-big"> | ||
<span>이메일</span> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
form 양식을 구현하실 땐 form, label 태그를 이용해보시는걸 추천드려요.
지난 리뷰에도 남겨드렸는데 반영이 안된것같네용
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
form 태그로 변경했습니다.
type="password" | ||
placeholder="비밀번호를 다시 한 번 입력해주세요" | ||
/> | ||
<img class="eye" src="/img/public/ic_inputEye.png" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
img 태그에는 가급적 alt 속성을 추가해주세요~!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
수정했습니다.
background-position: bottom; | ||
font-family: Pretendard, "ROKAF Sans"; | ||
} | ||
:root { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Color 변수 잘 설정해주셨네요 👍
padding-left: 10px; | ||
} | ||
|
||
@media (max-width: 1199px) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
미디어 쿼리도 잘 사용해주셨습니다!
@@ -0,0 +1,140 @@ | |||
<html> | |||
<head> | |||
<meta charset="utf-8" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
meta 태그 잘 추가해주셨네요 ㅎㅎ
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
필요한 이미지 파일인가요?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
제거했습니다.
base 브랜치 설정이 잘못되어 머지가 막혀있네요. 수정 부탁드려요~! |
요구사항
##기본 요구사항
브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
[O] PC: 1200px 이상
[O] Tablet: 768px 이상 ~ 1199px 이하
[O] Mobile: 375px 이상 ~ 767px 이하
[O] 375px 미만 사이즈의 디자인은 고려하지 않습니다
[O] Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록
“판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
[O] Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록
“판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
[O] 화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다.
[O]Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
[O]Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
[O]Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.
##체크리스트 [심화]
[O]페이스북, 카카오톡, 디스코드, 트위터 등 SNS에서 Linkbrary 랜딩 페이지(“/”) 공유 시
좌측 예시와 같은 미리보기를 볼 수 있도록 랜딩 페이지 메타 태그를 설정해 주세요.
[O]미리보기에서 제목은 “판다 마켓”, 설명은 “일상의 모든 물건을 거래해보세요”로 설정합니다.
[O]주소와 이미지는 자유롭게 설정하세요
스크린샷
아래 링크 참고 부탁드립니다.
https://sprint2oms.netlify.app/
멘토에게