HTML 태그 정리

X Descriptor 구현

1. 해당기기의 픽셀 밀도를 감지하여 이미지 출력
   srcset 속성을 사용하여 해상도(배율)에 따라 이미지를 변경
   1x: 일반 해상도(예: 1920x1080 디스플레이)
   2x: 고해상도(레티나 디스플레이 등)

    <img
      srcset="
        /src/assets/logo/netflix@1x.png 1x,
        /src/assets/logo/netflix@2x.png 2x
      "
      src="/src/assets/logo/netflix@1x.png"
      alt="넷플릭스"
    />

W Descriptor 구현

1. 화면 크기 대응
   source 태그는 미디어 쿼리(media="")를 사용하여 화면 크기에 따라 적절한 이미지를 선택
   550w, 1024w, 1600w는 해당 이미지의 너비를 의미
   max-width: 500px → 화면 너비가 500px 이하일 때 small-550.jpg를 사용
   max-width: 768px → 화면 너비가 768px 이하일 때 medium-1024.jpg를 사용
   기본적으로 normal-1920.jpg가 표시됨

    <picture>
      <source
        srcset="/src/assets/rwd/small-550.jpg 550w"
        media="(max-width: 500px)"
      />
      <source
        srcset="/src/assets/rwd/medium-1024.jpg 1024w"
        media="(max-width: 768px)"
      />
      <source
        srcset="/src/assets/rwd/large-1600.jpg 1600w"
        media="(max-width: 1280px)"
      />

      <img src="/src/assets/rwd/normal-1920.jpg" alt="" />
    </picture>