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

7.1 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 CSS

🎯 한 줄 통찰 (One-line insight)

CSS (Cascading Style Sheets) formats the layout of a web page and can be applied to HTML in three ways — inline (style attribute), internal (<style> in <head>), and external (linked .css file). [S1]

🧠 핵심 개념 (Core concepts)

What CSS is — Cascading Style Sheets are used to format the layout of a webpage: color, font, text size, spacing, positioning/layout, background images/colors, responsive displays for different devices and screen sizes, and much more. [S1]
Cascading — a style applied to a parent element also applies to all children elements within the parent. [S1]
Three ways to add CSS — inline (the style attribute on elements), internal (a <style> element in <head>), and external (a <link> to an external .css file). [S1]
Common properties — color (text color), font-family (font), font-size (text size), border, padding (internal spacing), margin (external spacing). [S1]

🧩 추출된 패턴 (Extracted patterns)

Inline pattern — <h1 style="color:blue;">…</h1> styles one element directly. [S1]
Internal pattern — <style> selector { property: value; } </style> inside <head> styles the whole document. [S1]
External pattern — <link rel="stylesheet" href="styles.css"> references a shared stylesheet. [S1]
Box-model pattern — border + padding + margin control an element's framing and spacing. [S1]
Reference-path pattern — external href can be a full URL, a root-relative path, or a same-folder filename. [S1]

📖 세부 내용 (Details)

What is CSS? Cascading Style Sheets (CSS) is used to format the layout of a webpage. With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more. The cascading concept means a style applied to a parent element will also apply to all children elements within the parent. [S1]

Three ways to add CSS [S1]

Inline — using the style attribute on HTML elements
Internal — using a <style> element in the <head> section
External — linking to external CSS files via <link>

Inline CSS [S1]

<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

Internal CSS [S1]

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

External CSS — the HTML file links to an external stylesheet: [S1]

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

The external styles.css file: [S1]

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

CSS color, font-family, and font-size [S1]

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Border, Padding, Margin [S1]

p {
  border: 2px solid powderblue;
}

p {
  border: 2px solid powderblue;
  padding: 30px;
}

p {
  border: 2px solid powderblue;
  margin: 50px;
}

Linking to external CSS — the href can point to a full URL, a root-relative path, or a same-folder filename: [S1]

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

<link rel="stylesheet" href="/html/styles.css">

<link rel="stylesheet" href="styles.css">

Chapter summary [S1]

Use the style attribute for inline styling
Use the <style> element for internal CSS
Use the <link> element for external CSS files
Use the <head> to store style and link elements
The CSS color property controls text colors
The CSS font-family property defines fonts
The CSS font-size property sets text sizes
The CSS border property creates borders
The CSS padding adds internal spacing
The CSS margin adds external spacing

Related HTML tags

Tag	Description
`<style>`	Defines style information for a document
`<link>`	Links a document to an external resource

[S1]

🛠️ 적용 사례 (Applied in summary)

The inline, internal, and external CSS examples above are the canonical applied examples from the source. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Inline (HTML):

<h1 style="color:blue;">A Blue Heading</h1>

Internal:

<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>

External link:

<link rel="stylesheet" href="styles.css">

Box model:

p {
  border: 2px solid powderblue;
  padding: 30px;
  margin: 50px;
}

⚖️ 비교 및 선택 기준 (Comparison & decision criteria)

The source presents three insertion methods; choosing among them: [S1]

Method	How	Scope
Inline	`style` attribute on an element	A single element only
Internal	`<style>` element in `<head>`	The whole document
External	`<link rel="stylesheet">` to a `.css` file	Shareable across many pages

⚖️ 모순 및 업데이트 (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 Colors, HTML Styles, HTML Attributes, HTML Introduction
참조 맥락: Referenced whenever applying styling (color, font, spacing, layout) to HTML, and when choosing inline vs internal vs external CSS.

📚 출처 (Sources)

[S1] W3Schools — HTML CSS — https://www.w3schools.com/html/html_css.asp

📝 변경 이력 (Change history)

2026-06-23: Initial draft synthesized from the W3Schools "HTML CSS" page (Astra wiki-curation, P-Reinforce v3.1 format).

7.1 KiB Raw Blame History