Files

T

koriweb 9609c04755 docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)

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>

2026-06-23 19:21:18 +09:00

8.8 KiB

Raw Blame History

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

title

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]

<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]

<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]

<img src="wrongname.gif" alt="Flowers in Chania">

Image Size — Width and Height Using the style attribute: [S1]

<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]

<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]

<!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]

<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]

<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]

<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]

<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]

<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):

<img src="img_chania.jpg" alt="Flowers in Chania">

Sized via style:

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

Image as a link:

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Floated image:

<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).

8.8 KiB Raw Blame History