[이유진] sprint3 #156
[이유진] sprint3 #156
Conversation
- 로고 이미지 파일명 변경 - srcset, sizes 적용으로 화면 크기별 최적 이미지 선택 - 미디어쿼리로 로고 이미지 max-width 제어하여 width/sizes 속성 충돌 해결
addiescode-sj
left a comment
addiescode-sj
left a comment
There was a problem hiding this comment.
수고하셨습니다!
주요 리뷰 포인트
- 미디어쿼리 사용 관련
- 이미지 최적화
| color: var(--primary-color-100); | ||
| } | ||
|
|
||
| @media (min-width: 768px) { |
There was a problem hiding this comment.
기본 스타일은 모바일 기준으로 작성하고, 화면이 넓어지는 순서대로 미디어 쿼리를 써줘서 불필요한 스타일 재정의를 줄였네요 👍 굳굳!
There was a problem hiding this comment.
다만, 지금처럼 미디어 타입을 명시하지 않으면 CSS 명세에서는 이를 자동으로 아래와 같이 all로 간주합니다.
@media all and (min-width: 768px) { ... }all 키워드를 사용하시면, 불필요한 미디어 유형까지 체크하고 특정 속성만 변경되는 경우에도 모든 스타일을 재계산해 성능에 좋지 않은 선택입니다. 보통 우리는 웹을 개발하니까 screen 미디어 타입만 특정해주면 되겠죠?
|
|
||
| @media (min-width: 768px) { | ||
| .content { | ||
| max-width: 640px; |
There was a problem hiding this comment.
컨테이너의 주요 레이아웃 속성 (너비, 여백 등) 은 CSS variable로 관리해주면, 각 값이 나타내는 의미도 명확해지고, 미디어쿼리를 사용해 분기가 생길때 쉽게 업데이트할수있으니 훨씬 관리가 편해질거예요!
예시)
:root {
--container-width: 100%;
}
@media (min-width: 768px) {
:root {
--container-width: 750px;
}
}
.container {
width: var(--container-width);
}| .tb { | ||
| display: none; | ||
|
|
||
| @media (min-width: 768px) { |
There was a problem hiding this comment.
이 파일에서도 위에 달아드렸던 코멘트 참고해보시고, 리팩토링해보세요! :)
| <picture> | ||
| <source srcset="images/logo_l_2x.svg" media="(min-width: 1024px)" /> | ||
| <source srcset="images/logo_l_1x.svg" media="(min-width: 768px)" /> | ||
| <img src="images/logo_m.svg" alt="로고" width="153" height="51" /> | ||
| </picture> |
There was a problem hiding this comment.
<img
src="images/logo_m.svg"
srcset="images/logo_m.svg 153w,
images/logo_l_1x.svg 768w,
images/logo_l_2x.svg 1024w"
sizes="(min-width: 1024px) 1024px,
(min-width: 768px) 768px,
153px"
alt="로고"
width="153"
height="51"
/>picture태그를 사용하는것보다 img태그의 srcset과 sizes를 사용하면 불필요한 오버헤드를 줄이면서도 마크업이 간결해질 수있어요.
- srcset은 각 이미지 소스와 해당 이미지의 너비(w)를 명시
- sizes는 미디어 조건에 따라 이미지가 표시될 크기를 지정
이렇게 써주면, 브라우저가 현재 뷰포트 크기와 해상도에 가장 적합한 이미지를 자동으로 선택할거예요 :)
There was a problem hiding this comment.
안녕하세요 멘토님, srcset과 w 디스크립터 관련해서 개념적으로 혼란이 있어 질문드립니다.
공부한 바로는 w 디스크립터는 각 이미지의 실제 픽셀 너비를 의미하고, 브라우저는 sizes 속성으로 계산된 렌더링 너비와 디바이스 픽셀 비율(DPR)을 고려하여 가장 적절한 이미지를 srcset에서 선택한다고 알고 있습니다.
아래는 제가 작성한 코드입니다.
<img
src="images/logo_m.svg"
srcset="
images/logo_m.svg 103w,
images/logo_m.svg 206w,
images/logo_l_1x.svg 153w,
images/logo_l_2x.svg 306w
"
sizes="(max-width: 767px) 103px, 153px"
alt="로고"
width="153"
height="51"
/>.logo img {
max-width: 103px;
}
@media (min-width: 768px) {
.logo img {
max-width: 153px;
}
}의도는 다음과 같습니다.
- 모바일: 103px → 일반 이미지와 2x 대응 이미지(206w)
- 태블릿 및 데스크탑: 153px → 일반(153w) 및 2x 대응(306w) 이미지
그런데 문제는 데스크탑 환경에서 DPR이 2가 아닌 1.333...인 경우,
브라우저가 153px × 1.333... = 약 204px 정도의 이미지를 요구하게 되고,
그에 가장 근접한 w 디스크립터 값인 206w 이미지(즉, 모바일용 이미지)가 선택되고 있습니다.
그래서 아래와 같은 점들이 헷갈립니다:
- w 디스크립터는 "이미지의 실제 픽셀 폭"이라 배웠는데, 작은 값(103, 153 등)을 써도 맞는 걸까요?
(적어주신 예시에서 1024w라 적혀있어 헷갈립니다!) - 데스크탑에서 DPR이 2일 거라 생각하고 306w를 준비했지만, 실제로는 1.333...이라 206w가 더 가까워지는 상황은 어떻게 처리해야 할까요?
- 이 경우, 데스크탑 대응용 이미지를 하나 더 넣어야 할까요? 그렇다면 적절한 w 값은 어느 정도로 계산해야 하는 걸까요?
관련해서 제가 정리한 글도 아래에 공유드립니다.혹시 제가 잘못 이해하고 있는 부분이 있다면 피드백 부탁드리겠습니다 🙏
감사합니다!
There was a problem hiding this comment.
우선 전반적인 개념들은 아주 잘 이해하셨습니다. w 디스크립터는 이미지 파일 자체의 실제 픽셀 너비를 사용해야하므로, 실제 크기에 맞게 지정하면됩니다. 예시로 드린 코드는 해당 이미지 파일의 실제 너비를 1024픽셀로 가정했기때문에 적용한 예시입니다.
DPR 불일치 문제의 경우 정상적인 동작으로 문제가 될 건 없지만 중간 크기의 해상도 이미지를 추가하거나하는 등으로 좀더 최적화된 이미지를 제공할수있습니다.
일반적으로는 1x, 1.5x, 2x까지를 고려하면 대부분의 디바이스별 해상도를 커버하실수있고, 현재 벡터 기반 파일인 svg를 사용하고계셔서 여러 해상도에서 사용해도 문제가 없을겁니다 :) 참고해두세요~!
| </div> | ||
| <div class="img-box flex-center"> | ||
| <img src="images/Img_footer-banner.svg" alt="판다마켓 푸터 배너 이미지" width="746" height="397" /> | ||
| <img |
There was a problem hiding this comment.
첫 화면에 보이는 이미지가 아닌 스크롤을 쭉 내려야 보이는 이미지라면 레이지로딩을 적용해보는건 어떨까요?
질문에 대한 답변
로컬에서 관리해주면 폰트 최적화를 다양하게 시도할수있어 도움이 됩니다! :) 나머지 질문들은 PR 본문 내에서 상세히 답변드렸습니다 :) |
2 participants
배포 링크
https://frabjous-youtiao-ccda2d.netlify.app/
요구사항
기본
메인 페이지
로그인, 회원가입 페이지
Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.
심화
주요 변경사항
스크린샷
멘토에게
감사합니다!