# `<img>` 태그

img 태그는 웹 페이지에 이미지를 삽입할 때 사용하는 태그예요.

 

## **주요 속성**

img 태그의 핵심 속성으로 src, alt, width, height가 있어요.

 

## `src`

이미지의 주소(URL)를 지정하는 필수 속성이에요. URL은 동일한 웹 사이트 내 다른 이미지를 가리키거나, 외부 웹 사이트에 호스팅된 이미지를 가리킬 수 있어요. 이 속성 없이 `<img>` 태그를 사용하면 이미지가 표시되지 않아요.

```html title="img 태그의 src 속성"
<img src="https://example.com/myimage.jpg" />
```

 

## `alt`

이미지의 대체 텍스트를 나타내는 속성이에요. 이미지 로딩에 실패한 경우를 대비하거나, 시각 장애인을 위한 음성 서비스를 제공하기 위한 "대체 텍스트(alternative text)"로 사용해요. 필수적인 속성은 아니지만, 웹 접근성 향상에 중요한 요소로 SEO (검색 엔진 최적화)에 필수적인 속성이에요.

```html title="대체 텍스트 설정"
<img src="https://picsum.photos/300" alt="해질 무렵의 바다 경치" />
```

 

## `width`와 `height`

이미지의 너비와 높이를 지정하는 속성으로, 기본 단위는 픽셀(px)이에요.

```html title="이미지 크기 설정"
<img src="https://picsum.photos/300" width="300" height="200" />
```

 

## **사용법**

1. src, alt 사용

```html title="이미지 태그 기본 사용"
<img src="https://picsum.photos/300" alt="프로필 사진" />
```

 

2. width, height로 이미지 크기 지정

```html title="이미지 크기 설정"
<img
 src="https://picsum.photos/300"
 alt="랜덤 이미지"
 width="200"
 height="150"
/>
```

 

## **img 태그 정리**

- 웹 페이지에 이미지를 삽입하려면 `<img>` 태그를 사용해요.

- `src` 속성을 통해 이미지의 주소(URL)를 지정해요.

- `alt` 속성은 이미지의 설명이나, 이미지가 표시되지 않을 때 사용자에게 보여줄 텍스트를 제공해요.

- 이미지의 크기를 조절하려면 `width`와 `height` 속성을 활용해요.

<img> 태그

주요 속성

src

alt

width와 height

사용법

img 태그 정리

`<img>` 태그

`src`

`alt`

`width`와 `height`