[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 22회차 미션

11 * 2 = 22

패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 22일차입니다!

오늘은 7번째 커리큘럼에서 <img> 태그와 관련된 클립을 모두 수강하였습니다.

사실 수강하면서 <img> 태그에서 alt 속성이 필수인 것도 처음 알았고, 그 외 속성에 대해서도 모두 처음 학습합니다.

앞으로도 MDN 문서를 잘 참고하면서 사용하는 태그와 관련된 정보는 최대한 흡수하려고 노력해야겠어요.

 

오늘은 <img> 태그와 그 속성에 대하여 공부하였습니다.

(01~04. 멀티미디어 - IMG - srcset, sizes 속성 / w, x 단위 / sizes 속성)

srcset과 sizes는 실무에서 사용해본 적이 없어서 왜인지 궁금했는데 IE 지원이 안 되어서 그랬던 것 같아요.

---

<Today I Learned>

<img>

https://developer.mozilla.org/ko/docs/Web/HTML/Element/img

: 이미지 삽입 요소

🔸 필수 속성: src, alt

🔸 width, height 속성: 값으로 'px' 단어를 제외한 숫자 형태 문자 값을 가진다. (ex) <img width="600">

🔸 srcset: IE 지원 X, 브라우저에게 제시할 이미지 URL + 원본 크기의 목록

🔸 sizes: IE 지원 X, 미디어 조건(min-width 등) + 해당 조건일 때  이미지 최적화 크기의 목록

<img srcset="./small.jpg 320w,
             ./medium.jpg 640w,
             ./large.jpg 1024w"
     sizes="(max-width: 480px) 300px,
            (max-width: 800px) 600px,
            900px"
     src="./small.jpg"
     alt="The image" />
     
<img srcset="./image.jpg,
             ./image-1.5x.jpg 1.5x,
             ./image-2x.jpg 2x"
     src="./image.jpg"
     alt="The image" />
     
 <img srcset="경로 원본크기,
          경로 원본크기,
          경로 원본크기"
  sizes="(미디어조건) 최적화출력크기,
         (미디어조건) 최적화출력크기,
         기본출력크기"
  src="경로"
  alt="대체텍스트" />

 

✨ srcset, size 속성이 있으면 src 속성값은 무시됨

 

<srcset 속성>

🔸 브라우저 크기에 맞게 출력될 이미지 후보 리스트 정의

🔹 작은 크기 이미지부터 순서대로 입력

🔸 이미지가 2개 이상일 때 사용 ➡ 이미지가 1개라면 src 속성만 사용하면 됨

🔸 이미지의 가로 너비 단위는 x보다 w 사용을 지향 (더 명시적이기 때문)

 

🔹 sizes와 함께 사용되지 않을 때 ➡ 원본 크기보다 작은 크기의 브라우저에서 이미지를 사용함

- 예제

<img
  srcset="images/small.png 400w,
          images/medium.png 700w,
          images/large.png 1000w"
  src="images/ex.png"
  alt="example" />

🔹 뷰포트 너비가 400px 이하일 때 small.png(400px)가 사용됨.

🔹 뷰포트 너비가 401~700px 일 때 medium.png(700px)가 사용됨.

🔹 뷰포트 너비가 701px 이상일 때 large.png(1000px)가 사용됨.

 

✨ 브라우저 크기에 비하여 이미지의 원본 크기가 클 때, 줄여서 사용하면 이미지가 깨져 나타나지 않으므로 이미지를 늘리지 않는 방식으로 사용됨.

 

<sizes 속성>

🔸 브라우저 크기 기준을 미디어 조건으로 설정하고 그 조건일 때 이미지 너비를 어떻게 출력할 것인지 주문

    ➡ 최적화 조건 명시

🔸 srcset 속성을 정의한 뒤, sizes 대신 width나 height 속성을 사용하면, 브라우저 크기에 따라 목록의 해당 최적화 이미지를 골라 화면에 보여주는 대신 모든 이미지의 너비가 설정된 너비로 같음

🔸 srcset 속성을 정의한 뒤, sizes의 값으로 이미지 최적화 크기 하나만 지정해둔다면, 브라우저 크기에 따라 최적화 이미지를 골라 해당 크기로 화면에서 보여줌.

 

- 예제

<img
  srcset="images/small.png 400w,
          images/medium.png 700w,
          images/large.png 1000w"
  sizes="500px"
  src="images/ex.png"
  alt="example" />

🔹 위 예제는 뷰포트에 상관없이 medium.png 이미지가 너비가 500px인 것으로 화면에 나타남. 이유는 아래에!

    ➡ 브라우저의 크기가 400px 이하일 때: 이미지의 크기를 500px로 설정하는데, 400px짜리 small.png 이미지를 사용하면 이미지를 늘리는 것이 되므로 적합하지 않음.

    ➡ 브라우저의 크기가 401px~700px 일 때: medium.png 파일이 적합함

    ➡ 브라우저의 크기가 701px 이상일 때: 원본 너비가 1000px의 large.png의 너비를 500px로 줄이는 것보다 원본 너비가 700px인 medium.png의 너비를 줄이는 것이 더 최적의 방법임

 

 

✨ sizes 속성과 width 속성을 함께 사용될 경우, width 속성이 우선시 사용되어 sizes 속성은 무시됨

✨ srcset과 sizes 속성은 IE에서 지원되지 않기 때문에 미디어 쿼리로 CSS에서 대신 사용하는 것을 추천함

✨ 개발자 도구에서 Network > disable cache 선택하면 캐시가 남지 않음

---

학습 내용 출처 (1) : https://heropy.blog/2019/05/26/html-elements/

한눈에 보는 HTML 요소(Elements & Attributes) 총정리

학습 내용 출처 (2) : https://heropy.blog/2019/06/16/html-img-srcset-and-sizes/

HTML IMG의 srcset과 sizes 속성(updated)

강의 링크: https://bit.ly/3m0t8GM