[유주섭] Sprint 3

[yujuseop]

요구사항

기본

메인페이지

• 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
• Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
• Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.

로그인, 회원가입 페이지

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

심화

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

주요 변경사항

스크린샷

멘토에게

https://panda1111111.netlify.app/

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

[withyj-codeit]

스프린트 미션 하느라 수고 많으셨어요~👏🏻

화면이 커졌을 때 스타일에 이슈가 있는데, 확인해주세요.

로그인 버튼 크기, input 높이 등 디자인 시안하고 다른 부분 확인해주세요.

[withyj-codeit]

login.css 와 signup.css 공통적으로 사용하는 스타일을 파일로 분리해서 하나로 만들고, 달라지거나 추가되는 것만 각각의 파일에 남겨두는 방향으로 수정해도 좋을 것 같아요.

[withyj-codeit]

styles.css, login.css, signup.css 모두 색상 변수를 사용하는데, 서비스 전반에 공통적으로 사용하는 변수나 스타일링 초기화 같은 것들을 파일 분리해서 스타일의 관심사를 분리해주면 좋을 것 같아요.