lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

lesson15Title

lesson16Title

lesson17Title

webLightBasicChapter1Title

webLightBasicChapter2Title

webLightBasicChapter3Title

# img 태그

`<img>` 태그는 웹 페이지에 이미지를 삽입할 때 사용하는 태그입니다.

img 태그의 주요 속성으로 `src`, `alt`, `width`, `height`가 있습니다.

 

## src 속성

이미지의 주소(URL)를 지정하는 필수 속성입니다.

URL은 동일한 웹 사이트 내 다른 이미지를 가리키거나, 외부 웹 사이트에서 제공하는 이미지를 가리킬 수 있습니다.

src 속성 없이 `<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`

이미지의 너비(Width)와 높이(Height)를 지정하는 속성으로, 기본 단위는 `픽셀(px)`입니다.

픽셀은 화면의 해상도에 따른 하나의 점을 의미합니다. width와 height를 지정하지 않으면 이미지 원본 크기로 표시됩니다.

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

 

## img 태그 사용법

img 태그는 아래와 같이 사용할 수 있습니다.

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>` 태그는 반드시 `src` 속성을 포함해야 합니다. `src` 속성이 없으면 브라우저는 어떤 이미지를 표시해야 할지 알 수 없기 때문에 이미지가 나타나지 않습니다. 따라서 `src` 속성은 필수입니다.

### `<img>` 태그는 이미지의 주소(URL)를 지정하는 `src` 속성이 없으면 대체 이미지를 표시한다.

img 태그

src 속성

alt 속성

width와 height

img 태그 사용법

<img> 태그는 이미지의 주소(URL)를 지정하는 src 속성이 없으면 대체 이미지를 표시한다.

`width`와 `height`

`<img>` 태그는 이미지의 주소(URL)를 지정하는 `src` 속성이 없으면 대체 이미지를 표시한다.