koriweb
9609c04755
W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더). - Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외) - Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체) - Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속) 각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
213 lines
8.8 KiB
Markdown
213 lines
8.8 KiB
Markdown
---
|
|
id: html-images
|
|
title: "HTML Images"
|
|
category: "Frontend"
|
|
status: "draft"
|
|
verification_status: "conceptual"
|
|
canonical_id: ""
|
|
aliases: ["img tag", "src attribute", "alt attribute", "HTML image size", "image as link", "image float"]
|
|
duplicate_of: ""
|
|
source_trust_level: "B"
|
|
confidence_score: 0.90
|
|
created_at: 2026-06-23
|
|
updated_at: 2026-06-23
|
|
review_reason: ""
|
|
merge_history: []
|
|
tags: ["html", "web", "frontend", "w3schools", "images", "media"]
|
|
raw_sources: ["https://www.w3schools.com/html/html_images.asp"]
|
|
applied_in: []
|
|
github_commit: ""
|
|
---
|
|
|
|
# [[HTML Images]]
|
|
|
|
## 🎯 한 줄 통찰 (One-line insight)
|
|
The HTML `<img>` tag embeds an image via its required `src` (path) and `alt` (alternate text) attributes; images are linked into the page, not technically inserted. [S1]
|
|
|
|
## 🧠 핵심 개념 (Core concepts)
|
|
- **`<img>` tag** — embeds an image in a web page; it is empty (attributes only), has no closing tag, and images are linked to pages rather than inserted into them. [S1]
|
|
- **`src` attribute** — specifies the path to the image; the browser fetches it from a web server at load time. [S1]
|
|
- **`alt` attribute** — required; provides alternate text describing the image for when it cannot be viewed, and for screen readers. [S1]
|
|
- **Size** — set width/height via the `style` attribute or the `width`/`height` attributes (always in pixels); the source suggests using `style`. [S1]
|
|
- **Paths** — images can live in a sub-folder (include the folder in `src`) or on another server (use an absolute URL). [S1]
|
|
- **Animated GIFs, image links, floating** — HTML allows animated GIFs; nest `<img>` in `<a>` for a link; use CSS `float` to float an image left/right of text. [S1]
|
|
|
|
## 🧩 추출된 패턴 (Extracted patterns)
|
|
- **Embed pattern** — `<img src="url" alt="alternatetext">`. [S1]
|
|
- **Sizing pattern** — `style="width:500px;height:600px;"` or `width="500" height="600"`. [S1]
|
|
- **Sub-folder / cross-server pattern** — `src="/images/file.gif"` or `src="https://host/path.jpg"`. [S1]
|
|
- **Image-link pattern** — `<a href="..."><img ...></a>`. [S1]
|
|
- **Float pattern** — `style="float:right;"` / `style="float:left;"`. [S1]
|
|
|
|
## 📖 세부 내용 (Details)
|
|
Images can improve the design and the appearance of a web page. [S1]
|
|
|
|
**HTML Images Syntax**
|
|
The HTML `<img>` tag is used to embed an image in a web page. Images are not technically inserted into a web page; images are linked to web pages. The `<img>` tag is empty, it contains attributes only, and does not have a closing tag. The two required attributes are `src` (the path to the image) and `alt` (an alternate text for the image). [S1]
|
|
```html
|
|
<img src="url" alt="alternatetext">
|
|
```
|
|
|
|
**The `src` Attribute**
|
|
When a web page loads, it is the browser, at that moment, that gets the image from a web server and inserts it into the page. [S1]
|
|
```html
|
|
<img src="img_chania.jpg" alt="Flowers in Chania">
|
|
```
|
|
|
|
**The `alt` Attribute**
|
|
The required `alt` attribute provides an alternate text for an image, if the user for some reason cannot view it. The value of the `alt` attribute should describe the image. A screen reader is a software program that reads the HTML code, and allows the user to "listen" to the content. [S1]
|
|
```html
|
|
<img src="wrongname.gif" alt="Flowers in Chania">
|
|
```
|
|
|
|
**Image Size — Width and Height**
|
|
Using the `style` attribute: [S1]
|
|
```html
|
|
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
|
|
```
|
|
Using the `width` and `height` attributes (these always define the size in pixels): [S1]
|
|
```html
|
|
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
|
|
```
|
|
> **Note:** Always specify the width and height of an image. If width and height are not specified, the web page might flicker while the image loads. [S1]
|
|
|
|
**Width and Height, or Style?**
|
|
The `width`, `height`, and `style` attributes are all valid in HTML. However, the source suggests using the `style` attribute. [S1]
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
img {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
|
|
|
|
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
|
|
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
**Images in Another Folder**
|
|
If you have your images in a sub-folder, you must include the folder name in the `src` attribute. [S1]
|
|
```html
|
|
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
|
|
```
|
|
|
|
**Images on Another Server/Website**
|
|
Some web sites point to an image on another server. To point to an image on another server, you must specify an absolute (full) URL in the `src` attribute. [S1]
|
|
```html
|
|
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
|
|
```
|
|
> **Note:** External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; they can suddenly be removed or changed. [S1]
|
|
|
|
**Animated Images**
|
|
HTML allows animated GIFs. [S1]
|
|
```html
|
|
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
|
|
```
|
|
|
|
**Image as a Link**
|
|
To use an image as a link, put the `<img>` tag inside the `<a>` tag. [S1]
|
|
```html
|
|
<a href="default.asp">
|
|
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
|
|
</a>
|
|
```
|
|
|
|
**Image Floating**
|
|
Use the CSS `float` property to let the image float to the right or to the left of a text. [S1]
|
|
```html
|
|
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
|
|
The image will float to the right of the text.</p>
|
|
|
|
<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
|
|
The image will float to the left of the text.</p>
|
|
```
|
|
|
|
**Common Image Formats** [S1]
|
|
|
|
| Abbreviation | File Format | File Extension |
|
|
|---|---|---|
|
|
| APNG | Animated Portable Network Graphics | .apng |
|
|
| GIF | Graphics Interchange Format | .gif |
|
|
| ICO | Microsoft Icon | .ico, .cur |
|
|
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
|
|
| PNG | Portable Network Graphics | .png |
|
|
| SVG | Scalable Vector Graphics | .svg |
|
|
|
|
**Chapter Summary** [S1]
|
|
- Use the HTML `<img>` element to define an image
|
|
- Use the HTML `src` attribute to define the URL of the image
|
|
- Use the HTML `alt` attribute to define an alternate text for an image, if it cannot be displayed
|
|
- Use the HTML `width` and `height` attributes or the CSS `width` and `height` properties to define the size
|
|
- Use the CSS `float` property to let the image float to the left or to the right
|
|
|
|
> **Note:** Loading large images takes time, and can slow down your web page. Use images carefully. [S1]
|
|
|
|
**HTML Image Tags** [S1]
|
|
|
|
| Tag | Description |
|
|
|---|---|
|
|
| `<img>` | Defines an image |
|
|
| `<map>` | Defines an image map |
|
|
| `<area>` | Defines a clickable area inside an image map |
|
|
| `<picture>` | Defines a container for multiple image resources |
|
|
|
|
## 🛠️ 적용 사례 (Applied in summary)
|
|
The Chania, img_girl, HTML5 icon, animated GIF, image-link, and floating examples above are the canonical applied examples from the source. No external project/commit applications found in the source.
|
|
|
|
## 💻 코드 패턴 (Code patterns)
|
|
Basic image (HTML):
|
|
```html
|
|
<img src="img_chania.jpg" alt="Flowers in Chania">
|
|
```
|
|
Sized via style:
|
|
```html
|
|
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
|
|
```
|
|
Image as a link:
|
|
```html
|
|
<a href="default.asp">
|
|
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
|
|
</a>
|
|
```
|
|
Floated image:
|
|
```html
|
|
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
|
|
```
|
|
|
|
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
|
|
The source notes that `width`/`height` attributes and the `style` attribute are all valid for sizing, but suggests using `style`: [S1]
|
|
|
|
| Approach | Note |
|
|
|---|---|
|
|
| `width`/`height` attributes | Valid; always in pixels |
|
|
| `style` attribute | Valid; suggested (avoids conflicts with stylesheet `width`/`height`) |
|
|
|
|
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
|
No contradictions found in the source.
|
|
|
|
## ✅ 검증 상태 및 신뢰도
|
|
- **상태:** draft
|
|
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
|
|
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
|
- **신뢰 점수:** 0.90
|
|
- **중복 검사 결과:** 신규 생성 (New discovery)
|
|
|
|
## 🔗 지식 그래프 (Knowledge Graph)
|
|
- **상위/루트:** [[HTML Tutorial]]
|
|
- **관련 개념:** [[HTML Links]], [[HTML Favicon]], [[HTML CSS]], [[HTML Attributes]]
|
|
- **참조 맥락:** Referenced whenever embedding images, sizing them, linking via images, or floating images alongside text.
|
|
|
|
## 📚 출처 (Sources)
|
|
- [S1] W3Schools — HTML Images — https://www.w3schools.com/html/html_images.asp
|
|
|
|
## 📝 변경 이력 (Change history)
|
|
- 2026-06-23: Initial draft synthesized from the W3Schools "HTML Images" page (Astra wiki-curation, P-Reinforce v3.1 format).
|