HTML
이미지

통사론

• <img src="" alt="">

매개 변수

이미지 만들기

이미지를 페이지에 추가하려면 이미지 태그를 사용하십시오.

이미지 태그 ( img )에 닫기 태그가 없습니다. img 태그에주는 두 가지 주요 속성은 src , 이미지 소스 및 alt 이며 이미지를 설명하는 대체 텍스트입니다.

<img src="images/hello.png" alt="Hello World">

웹 URL에서 이미지를 가져올 수도 있습니다.

<img src="https://i.stack.imgur.com/ALgZi.jpg?s=48&g=1" alt="StackOverflow user Caleb Kleveter">

참고 : 이미지는 기술적으로 HTML 페이지에 삽입되지 않으며 이미지는 HTML 페이지에 링크됩니다. <img> 태그는 참조 된 이미지를위한 공간을 생성합니다.

base64를 사용하여 이미지를 페이지 내에 직접 삽입하는 것도 가능합니다.

<img src="data:image/png;base64,iVBOR..." alt="Hello World">

팁 : 이미지를 다른 문서에 연결하려면 <a> 태그 안에 <img> 태그를 중첩하면됩니다.

이미지 너비 및 높이

주 : width 및 height 속성은 이미지에서 더 이상 사용 되지 않으며 결코 사용 되지 않습니다 . 그들의 사용은 훨씬 더 엄격 해졌습니다.

이미지의 크기는 이미지 태그의 width 및 height 속성을 사용하여 지정할 수 있습니다.

<img src="images/200x200-img.png" width="200" height="200" alt="A 200x200 image">

이미지의 width 와 height 를 지정하면 실제 이미지 크기를 지정하는 경우에도 페이지에서 레이아웃을 지정하는 방법에 대한 힌트가 브라우저에 제공됩니다. 이미지 크기가 지정되지 않은 경우 브라우저는 이미지가로드 된 후 페이지의 레이아웃을 다시 계산해야합니다. 이로 인해 페이지가로드되는 동안 페이지가 "돌아 다니게"될 수 있습니다.

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="0" height="0" alt="A hidden tracking image">

<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">

<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">
<img src="images/200x200-img.png" width="1" height="200" alt="A 1x200 image">

대체 텍스트 선택

Alt-text는 시각 장애가있는 사용자와 검색 엔진에서 화면 판독기가 사용합니다. 따라서 이미지에 알맞은 alt 텍스트를 작성하는 것이 중요합니다.

alt 속성으로 이미지를 바꾸더라도 텍스트가 올바르게 보입니다. 예 :

<!-- Incorrect -->
<img src="anonymous.png" alt="Anonymous user avatar"/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit icon"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete icon"/></a>

이미지가 없으면 다음과 같이 보입니다.

익명 사용자 avatar 익명 사용자가 쓴 :

Lorem ipsum dolor sed.

아이콘 편집 / 삭제 아이콘

이 문제를 해결하려면 다음을 수행하십시오.

• 아바타의 대체 텍스트를 제거하십시오. 이 이미지는 사용자가 익명임을 보여주기 위해 쉽게 확인할 수있는 아이콘에 대한 정보를 추가하지만이 정보는 이미 텍스트에서 사용할 수 있습니다. ¹
• 아이콘의 대체 텍스트에서 "아이콘"을 제거하십시오. 이것이 아이콘이라면 그 사실이 그 실제 목적을 전달하는 데 도움이되지 않는다는 것을 알았습니다.

<!-- Correct -->
<img src="anonymous.png" alt=""/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete"/></a>

익명 사용자가 쓴 :

Lorem ipsum dolor sed.

수정 / 삭제

각주

¹ 빈 alt 속성을 포함하고 그것을 제외시키는 것은 의미 상의 차이가 있습니다. 빈 alt 속성은 이미지가 콘텐츠의 핵심 부분이 아니라는 것을 나타냅니다 (이 경우 사실 그대로입니다. 나머지 부분을 이해할 필요가없는 추가 이미지입니다). 따라서 렌더링에서 생략 될 수 있습니다. 그러나 alt 속성이 없다는 것은 이미지 가 내용 의 핵심 부분이며 단순히 렌더링에 사용할 수있는 텍스트가 없다는 것을 나타냅니다.

srcset 속성을 사용하는 반응 이미지

크기가있는 srcset 사용

<img sizes="(min-width: 1200px) 580px,
      (min-width: 640px) 48vw,
      98vw"
    srcset="img/hello-300.jpg 300w,
      img/hello-600.jpg 600w,
      img/hello-900.jpg 900w,
      img/hello-1200.jpg 1200w"
    src="img/hello-900.jpg" alt="hello">

sizes 는 이미지가 뷰포트에서 차지하는 공간의 양을 나타내는 미디어 쿼리와 같습니다.

• 뷰포트가 1200px보다 큰 경우 이미지의 크기는 정확히 580px입니다. 예를 들어 컨테이너의 중심은 최대 1200px이고 이미지의 절반은 여백을 뺀 값입니다.
• 뷰포트가 640px와 1200px 사이에 있으면 이미지의 뷰포트가 48 % (예 : 이미지 비늘이 페이지와 같고 뷰포트 너비의 절반에서 여백을 뺀 값)가 소요됩니다.
• 뷰포트가 다른 크기 인 경우 640px보다 작 으면 이미지는 뷰포트의 98 %를 차지합니다 (예 : 페이지의 이미지 배율 및 전체 뷰포트에서 여백을 뺀 값). 마지막 항목에는 미디어 조건을 생략해야합니다.

srcset 는 브라우저에 우리가 사용할 수있는 이미지가 무엇인지, 크기는 무엇인지를 알려주는 것입니다.

• img/hello-300.jpg 는 300px 너비입니다.
• img/hello-600.jpg 는 600px 너비입니다.
• img/hello-900.jpg 는 900px 너비입니다.
• img/hello-1200.jpg 는 너비가 1200 픽셀입니다.

src 는 항상 필수 이미지 소스입니다. srcset 과 함께 사용하는 경우 브라우저가 srcset 지원하지 않는 경우 src 는 대체 이미지를 제공합니다.

크기가없는 srcset 사용하기

<img src="img/hello-300.jpg" alt="hello"
     srcset="img/hello-300.jpg 1x, 
       img/hello-600.jpg 2x,
       img/hello-1200.jpg 3x">

srcset 는 장치 픽셀 비율 x 설명자와 함께 사용 가능한 이미지 목록을 제공합니다.

• 장치 - 픽셀 비율이 1이면 img/hello-300.jpg
• 장치 픽셀 비율이 2 인 경우 img/hello-600.jpg
• 장치 픽셀 비율이 3이면 img/hello-1200.jpg

src 는 항상 필수 이미지 소스입니다. srcset 과 함께 사용하는 경우 브라우저가 srcset 지원하지 않는 경우 src 는 대체 이미지를 제공합니다.

그림 요소를 사용하여 반응하는 이미지

암호

<picture>
  <source media="(min-width: 600px)" srcset="large_image.jpg">
  <source media="(min-width: 450px)" srcset="small_image.jpg">
  <img src="default_image.jpg" style="width:auto;">
</picture>

용법

다른 화면 너비로 다른 이미지를 표시하려면 위 예제에서와 같이 그림 태그에 소스 태그를 사용하여 모든 이미지를 포함해야합니다.

결과

• 화면 너비가 600px보다 큰 화면에서는 large_image.jpg가 표시됩니다.
• 화면 너비가 450 픽셀을 초과하는 화면에서는 small_image.jpg가 표시됩니다.
• 화면 너비가 다른 화면에서는 default_image.jpg가 표시됩니다.