HTML <img> 태그
정의와 사용법
<img> 태그는 HTML 페이지에 이미지를 삽입하는 데 사용됩니다.
기술적으로, 실제로 이미지를 웹 페이지에 삽입하는 것은 아니라, 이미지를 웹 페이지에 링크합니다.<img> 태그는 이미지를 참조하는 컨테이너를 만듭니다.
<img> 태그는 두 가지 필수 속성을 가집니다:
주의:또한, 항상 이미지의 너비와 높이를 지정해야 합니다. 너비와 높이가 지정되지 않으면, 이미지를 로드할 때 페이지가 깜박일 수 있습니다.
힌트:다른 문서로 이미지를 링크하려면, 단순히 <img> 태그가 포함되어 있습니다. <a> 태그 내에 (아래의 예제를 참조하세요).
다른 것을 참조하세요:
HTML 교육:HTML 이미지
HTML DOM 참조 설명서:Image 객체
CSS 교육:이미지 스타일 설정
확장 학습:이미지를 올바르게 사용하는 방법
예제
예제 1
아래의 예제에서, 우리는 CodeW3C.com의 엔지니어가 상해 꽃화공에서 촬영한 장미 사진을 페이지에 삽입했습니다:
<img src="tulip.jpg" alt="상해 꽃화공 - 장미" />
예제 2
이미지를 삽입하는 또 다른 예제:
<img src="dancer.png" alt="무용가" width="500" height="749">
힌트:페이지 하단에 더 많은 예제가 제공됩니다.
속성
| 속성 | 값 | 설명 |
|---|---|---|
| alt | 텍스트 | 이미지의 대체 텍스트를 정의합니다. |
| crossorigin |
|
허용된 크로스 도메인 접근 가능한 제3자 웹사이트의 이미지와 캔버스와 함께 사용할 수 있습니다. |
| height | 픽셀 | 이미지의 높이를 정의합니다. |
| ismap | ismap | 이미지를 서버 측 이미지 맵핑으로 정의합니다. |
| loading |
|
브라우저가 즉시 이미지를 로드해야 하는지, 아니면 특정 조건이 충족되면 로드를 지연시켜야 하는지 지정합니다. |
| longdesc | URL | 이미지의 상세 설명을 가리키는 URL을 정의합니다. |
| referrerpolicy |
|
이미지를 가져오는 데 사용할 참조 정보를 정의합니다. |
| sizes | 크기 | 다른 페이지 레이아웃의 이미지 크기를 정의합니다. |
| src | URL | 이미지 경로를 정의합니다. |
| srcset | URL-list | 다른 상황에서 사용할 이미지 파일 목록을 정의합니다. |
| usemap | #mapname | 이미지를 클라이언트 측 이미지 맵으로 정의합니다. |
| width | 픽셀 | 이미지의 너비를 정의합니다. |
전역 속성
<img> 표지자는 이벤트 속성을 지원합니다 HTML에서 전역 속성。
이벤트 속성
<img> 표지자는 이벤트 속성을 지원합니다 HTML에서 이벤트 속성。
更多实例
예제 3
이미지 정렬(사용 CSS):
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left">
예제 4
이미지에 경계선 추가(사용 CSS):
<img src="flower.gif" alt="[#1#]" style="border:5px solid black">
예제 5
이미지에 좌우 여백 추가(사용 CSS):
<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">
예제 6
이미지에 상하외간 여백 추가(사용 CSS):
<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">
예제 7
어떻게 다른 폴더나 다른 웹사이트에서 이미지를 삽입하나요:
<img src="/photo/flower.gif" alt="Flower" width="180" height="180"> <img src="https://www.codew3c.com/photo/tree.png" alt="Tree" width="150" height="161">
예제 8
이미지에 링크를 추가하는 방법:
<a href="https://www.codew3c.com"> <img src="w3logo.png" alt="codew3c.com" width="400" height="225"> </a>
예제 9
클릭 가능한 영역을 가진 이미지 맵을 만드는 방법.
<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451"> <map name="lifemap"> <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html"> <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html"> <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html"> </map>
확장阅读 - 이미지를 올바르게 사용하는 방법
HTML과 XHTML의 가장 독특한 특징 중 하나는 문서의 텍스트에 이미지를 포함할 수 있다는 것입니다. 이미지를 문서의 내부 객체(인라인 이미지)로 사용하거나, 다운로드 가능한 별도의 문서로 사용하거나, 문서의 배경으로 사용할 수 있습니다.
문서 내용에 이미지(스태틱이거나 애니메이션 효과가 있는 아이콘, 사진, 설명, 그림 등)을 합리적으로 추가하면 문서가 더 생동감 있고 매력적이며 전문적이고 정보가 풍부해 보이며 쉽게 탐색할 수 있습니다. 특정 이미지를 클릭 가능한 링크의 시각적 가이드로 사용할 수도 있습니다.
그러나 이미지를 과도하게 사용하면 문서가 끊어져서 혼란스럽고 읽기 어려워집니다. 사용자가 페이지를 다운로드하고 보기 위해 기다릴 시간도 많이 소요됩니다.
아래의 기사를 읽어 웹에서 주요 이미지 형식인 GIF와 JPEG, 그리고 이미지를 올바르게 사용하는 방법을 배웁니다:
브라우저 지원
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 지원 | 지원 | 지원 | 지원 | 지원 |
