Conversation
There was a problem hiding this comment.
투명 배경을 지원할 필요가 없으면 png보다는 jpg 파일 사용을 권장드립니다.
추천 드리자면:
- 벡터 기반의 장점을 활용할수있거나, path 정보가 간단한 로고, 아이콘등의 파일: svg
- 투명 배경을 지원할 필요가 있는 큰 이미지 파일: png
- 투명 배경을 지원할 필요가 없는 큰 이미지 파일: 최소 2x의 고배율 jpg, jpeg => 고배율 이미지를 써야하므로 png, jpeg보다 압축률이 좋은 webp로 변환해 picture태그와 함께 사용 추천
컨텐츠의 특성 혹은 몇가지 조건에 따라 올바른 파일 포맷을 고르는것도 최적화에 포함됩니다.
제가 추천드린것말고도 여러가지 참고해보시고 적용해보세요 :)
| overflow-x: hidden; | ||
| } | ||
|
|
||
| .flex-content { |
There was a problem hiding this comment.
flex-content > flex-center 로 바꾸는게 네이밍이 더 적절할것같네요 :)
| @media (min-width: 375px) and (max-width: 767px) { | ||
| .login-container { | ||
| max-width: 400px; | ||
| padding: 0 16px; | ||
| } | ||
| } |
There was a problem hiding this comment.
기본 스타일은 모바일에 맞추고, 미디어 쿼리 조건 평가문에서도 min-width를 사용해 작은 화면에서부터 큰 화면으로 점차 확장해나가는 순서로 작성하시면 불필요한 스타일 재정의 및 코드 중복을 효과적으로 줄일 수 있답니다 :)
There was a problem hiding this comment.
그리고 컨테이너 요소의 레이아웃과 관련된 속성은 아래 예시와 같이 CSS 변수로 만들어서 관리하게되면 좀더 코드도 명료해지고 관리도 쉬워질거예요! :)
예시)
:root {
--container-width: 100%;
}
@media (min-width: 768px) {
:root {
--container-width: 750px;
}
}
.container {
width: var(--container-width);
}| /> | ||
| <link rel="stylesheet" href="reset.css" /> | ||
| <link rel="stylesheet" href="commod-form.css" /> | ||
| <link rel="stylesheet" href="sprint-mission3-login.css" /> |
There was a problem hiding this comment.
파일 이름에 sprint-mission3가 포함될 이유가 있을까요?
| <body> | ||
| <div class="login-container"> | ||
| <a href="/" class="logo" aria-label="새로고침" rel="noopener noreferrer"> | ||
| <img src="img/logo.png" alt="판다마켓 로고" /> |
There was a problem hiding this comment.
여기 쓰인 이미지도 srcset과 sizes 사용을 고려한다면 반응형 이미지 리소스 최적화가 이루어질수있겠죠? 첫 화면에 보이는 이미지가 아닌 스크롤을 쭉 내려야 보이는 이미지라면 레이지로딩을 적용할수도있고요 :)
질문에 대한 답변
미디어쿼리는 공통 CSS보다는 페이지별 CSS 파일 (로컬 파일)에서 사용해주시는게 좋습니다. 관련해서 본문에 자세히 피드백 드렸습니다 :) |
요구사항
기본
Sprint Mission 3 기본 요구사항
PC: 1200px 이상 - Tablet: 768px 이상 ~ 1199px 이하 - Mobile: 375px 이상 ~ 767px 이하
Sprint Mission 3기본 요구사항 (로그인, 회원가입 페이지 공통)
Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.
심화
주요 변경사항
스크린샷
멘토에게