[최권진] Sprint3

[kwonjin2]

요구사항

• Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
• 피그마 디자인에 맞게 페이지를 만들어 주세요.
• React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.

기본

• 브라우저에 현재 보이는 화면의 영역(viewport) 너비를 기준으로 분기되는 반응형 디자인을 적용합니다.
• Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
• Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
• 화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다.
• Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
• Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
• Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.

심화

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

주요 변경사항

• div에 height 높이만큼 여백을 주는 방식 -> margin을 통해 여백을 주는 방식으로 수정했습니다.
• eyes에 px에 작성했던 소수점 제거 했습니다.
• 화면이 커지면 이미지가 뭉개지는 현상 수정했습니다.

멘토에게

• 공통 스타일관리를 어떻게 해야할지, 어떤 자료를 찾으면 저에게 도움이 될지 궁금합니다.

[dongqui]

권진님 이번 미션도 잘 마무리 해주셨네요 💯

요소 배치하실 때 조금 더 유연한 방법들을 고려해보셔도 좋을 거 같습니다 :) (flex, grid 등)

공통 스타일관리를 어떻게 해야할지, 어떤 자료를 찾으면 저에게 도움이 될지 궁금합니다.
-> 지금은 간단하게만 해보셔도 좋아요! 재사용되는 코드, 같은 목적을 가진 코드를 한 곳에 모아주면 좋습니다! 예를 들면 지금 login.css, signup.css, style.css 파일들에 색상 변수가 각각 정의되어 있는데, 여기에 색상이 추가되면 어떻게 될까요? 모든 css 파일을 찾아다니며 새로운 색상을 추가하시게 될 거에요! 페이지가 늘어나고 css 파일이 늘어날수록 관리가 더욱 힘들어지겠죠. 😢
이 때 공통으로 사용되는 스타일을 관리하는 css파일을 만들고 관리 하시면 유지보수가 훨씬 편해집니다 :)
예를 들면 아래처럼 common.css에는 공통 스타일이 있고 login.css에는 login 관련 스타일만 넣고 사용하는 거죠!

<link rel="stylesheet" href="./css/common.css" />
<link rel="stylesheet" href="./css/login.css" />

지금은 사용 중인 부분에서 공통만 뽑아내셔도 좋습니다! 이후에 reset css, css 유틸리티 클래스를 키워드로 조금 더 검색해 보시면 좋습니다 :)

[dongqui]

html 태그가 잘못 들어온 거 같네요🤣

[dongqui]

가운데 정렬을 의도하신거라면 부모 태그에서 text-align을 사용하실 수 있어요 :)

[dongqui]

불필요한 코드 같네요! 🤔

[dongqui]

반응형 이미지로 picture를 사용해보셔도 좋아요!

[dongqui]

어떤 이유로 %가 들어갔을까요!? 요구 사항과 다르게 간격이 너무 멀어지는 거 같습니다!

[dongqui]

fit-content와 block을 사용하신 이유는 무엇일까요!? 속성 하나하나 짚어가시면 좋습니다 :)

[dongqui]

relative가 자주 쓰이는 거 같은데, 정말 필요한지 생각해보시면 좋을 거 같아요! position을 통해 요소를 옮겨야하는 경우도 물론 있지만, 지금 같은 경우만 봐도 left 400px로 요소를 옮기는 것이 아니라 '가운데'로 옮기는 것이 맞겠죠 :)