<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
</head>
<body>
<h2>예시</h2>
<pre><code class="hljs language-js">&#x3C;img src=<span class="hljs-string">"https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&#x26;cs=tinysrgb&#x26;dpr=1&#x26;w=500"</span> alt=<span class="hljs-string">"아름다운 고양이"</span>>
</code></pre>
<div class="content-ad"></div>
<h2>Src</h2>
<p>이 속성은 표시할 이미지의 경로를 지정합니다.</p>
<p>이는 절대 URL(예: <a href="https://example.com/image.jpg" rel="nofollow" target="_blank">https://example.com/image.jpg</a>) 또는 상대 경로(예: images/photo.jpg)가 될 수 있습니다.</p>
<p>이 속성이 없으면 브라우저가 이미지를 찾을 수 있는 위치를 모르기 때문에 이미지가 표시되지 않습니다.</p>
<div class="content-ad"></div>
<h2>Alt</h2>
<p>이 속성은 이미지가 사용할 수 없거나 사용자가 스크린 리더를 사용하는 경우 표시되는 이미지에 대한 대체 텍스트를 제공합니다.</p>
<p>그것은 접근성 및 SEO에 중요합니다. 이미지 내용을 볼 수없는 사람들에게 이미지 내용을 설명하는 데 도움이 됩니다.</p>
<h2>너비, 높이</h2>
<div class="content-ad"></div>
<p>가로 - 이 속성은 이미지 요소의 너비를 지정합니다.</p>
<p>세로 - 이 속성은 이미지의 높이를 지정합니다.</p>
<p>이미지를 더 작거나 크게 만들기 위해 높이와 너비를 설정할 수 있습니다. 하지만, 추천하는 방법은...</p>
</body>
</html>







## 예시

```js
<img src="https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="아름다운 고양이">
``` 


<div class="content-ad"></div>

## Src

이 속성은 표시할 이미지의 경로를 지정합니다.

이는 절대 URL(예: https://example.com/image.jpg) 또는 상대 경로(예: images/photo.jpg)가 될 수 있습니다.

이 속성이 없으면 브라우저가 이미지를 찾을 수 있는 위치를 모르기 때문에 이미지가 표시되지 않습니다.

<div class="content-ad"></div>

## Alt

이 속성은 이미지가 사용할 수 없거나 사용자가 스크린 리더를 사용하는 경우 표시되는 이미지에 대한 대체 텍스트를 제공합니다.

그것은 접근성 및 SEO에 중요합니다. 이미지 내용을 볼 수없는 사람들에게 이미지 내용을 설명하는 데 도움이 됩니다.

## 너비, 높이

<div class="content-ad"></div>

가로 - 이 속성은 이미지 요소의 너비를 지정합니다.

세로 - 이 속성은 이미지의 높이를 지정합니다.

이미지를 더 작거나 크게 만들기 위해 높이와 너비를 설정할 수 있습니다. 하지만, 추천하는 방법은...

HTML 초보자를 위한 시리즈 이미지 사용법 5

예시

Src

Alt

너비, 높이