lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

webIntroHtmlChapter2Title

webIntroHtmlChapter1Title

webIntroHtmlChapter3Title

webIntroHtmlChapter4Title

<!DOCTYPE html>
<html lang="ko">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <link
 href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
 rel="stylesheet"
 />
 <title>img 태그 예시</title>
 </head>

 <body>
 <img src="https://picsum.photos/200/300" alt="랜덤 이미지" />
 <img
 src="https://picsum.photos/200/300"
 alt="랜덤 이미지"
 width="200"
 height="150"
 />
 </body>
</html>

# 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 태그 사용법

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` 속성을 통해 이미지의 주소(URL)를 지정합니다.

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

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