수색…


통사론

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

매개 변수

매개 변수 세부
src 이미지의 URL을 지정합니다.
srcset 다른 상황에서 사용할 이미지 (예 : 고해상도 디스플레이, 소형 모니터 등)
sizes 중단 점 간의 이미지 크기
crossorigin 요소가 교차 구독 요청을 처리하는 방법
usemap 사용할 이미지 맵 이름
ismap 이미지가 서버 측 이미지 맵인지 여부
alt 어떤 이유로 이미지를 표시 할 수없는 경우 표시해야하는 대체 텍스트
width 이미지 너비를 지정합니다 (선택 사항).
height 이미지의 높이를 지정합니다 (선택 사항).

이미지 만들기

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

이미지 태그 ( 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 속성은 이미지에서 더 이상 사용 되지 않으며 결코 사용 되지 않습니다 . 그들의 사용은 훨씬 더 엄격 해졌습니다.

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

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

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

4.1

CSS 픽셀 수 또는 이미지의 실제 크기에 대한 비율로 이미지의 폭과 높이를 지정할 수 있습니다.

다음 예제는 모두 유효합니다.

<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">
5

이미지의 폭과 높이는 CSS 픽셀로 지정해야합니다. 백분율 값은 더 이상 유효한 값이 아닙니다. 또한 두 속성을 모두 지정하면 가로 세로 비율을 유지 하는 세 가지 수식 중 하나에 맞아야합니다. 유효하지만 width 및 height 속성을 사용하여 이미지를 더 큰 크기로 늘리지 않아야합니다.

다음 예제는 유효합니다.

<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.
아이콘 편집 / 삭제 아이콘

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

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

각주

1 빈 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가 표시됩니다.


Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow