-
Notifications
You must be signed in to change notification settings - Fork 1
/
chapter2.html
96 lines (94 loc) · 25.2 KB
/
chapter2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>2장 | IT Cookbook, HTML5 프로그래밍 입문 (3판)</title>
<meta name="description" content="지원 페이지">
<meta name="twitter:card" content="summary">
<meta name="twitter:description" content="IT Cookbook, HTML5 프로그래밍 입문 (3판)">
<meta property="og:type" content="website">
<meta property="og:site_name" content="IT Cookbook, HTML5 프로그래밍 입문 (3판)">
<meta property="og:title" content="IT Cookbook, HTML5 프로그래밍 입문 (3판)">
<meta property="og:image" content="">
<link rel="icon" href="">
<link rel="preload" href="/academy-html/assets/css/0.styles.b42b3a41.css" as="style"><link rel="preload" href="/academy-html/assets/js/app.3d869fd2.js" as="script"><link rel="preload" href="/academy-html/assets/js/3.129ab191.js" as="script"><link rel="preload" href="/academy-html/assets/js/44.1afb2e9f.js" as="script"><link rel="prefetch" href="/academy-html/assets/js/1.28ccbd44.js"><link rel="prefetch" href="/academy-html/assets/js/10.8f9d94c9.js"><link rel="prefetch" href="/academy-html/assets/js/11.e6a00e77.js"><link rel="prefetch" href="/academy-html/assets/js/12.529df5bb.js"><link rel="prefetch" href="/academy-html/assets/js/13.8d057a38.js"><link rel="prefetch" href="/academy-html/assets/js/14.c22c5113.js"><link rel="prefetch" href="/academy-html/assets/js/15.da5f58f8.js"><link rel="prefetch" href="/academy-html/assets/js/16.fe348235.js"><link rel="prefetch" href="/academy-html/assets/js/17.6ca3cf57.js"><link rel="prefetch" href="/academy-html/assets/js/18.4c65c5c9.js"><link rel="prefetch" href="/academy-html/assets/js/19.43d585a4.js"><link rel="prefetch" href="/academy-html/assets/js/20.cab2fc08.js"><link rel="prefetch" href="/academy-html/assets/js/21.f73ab258.js"><link rel="prefetch" href="/academy-html/assets/js/22.d9dd986c.js"><link rel="prefetch" href="/academy-html/assets/js/23.7e9581c0.js"><link rel="prefetch" href="/academy-html/assets/js/24.100694f6.js"><link rel="prefetch" href="/academy-html/assets/js/25.62839264.js"><link rel="prefetch" href="/academy-html/assets/js/26.c49da0c5.js"><link rel="prefetch" href="/academy-html/assets/js/27.9efaf755.js"><link rel="prefetch" href="/academy-html/assets/js/28.91f93c79.js"><link rel="prefetch" href="/academy-html/assets/js/29.10315443.js"><link rel="prefetch" href="/academy-html/assets/js/30.c81b3d82.js"><link rel="prefetch" href="/academy-html/assets/js/31.6dd4deb4.js"><link rel="prefetch" href="/academy-html/assets/js/32.42ef884a.js"><link rel="prefetch" href="/academy-html/assets/js/33.71c42c33.js"><link rel="prefetch" href="/academy-html/assets/js/34.79f9a827.js"><link rel="prefetch" href="/academy-html/assets/js/35.5aad55ad.js"><link rel="prefetch" href="/academy-html/assets/js/36.55ac6503.js"><link rel="prefetch" href="/academy-html/assets/js/37.d84294e1.js"><link rel="prefetch" href="/academy-html/assets/js/38.8b9ba42e.js"><link rel="prefetch" href="/academy-html/assets/js/39.fa7358a2.js"><link rel="prefetch" href="/academy-html/assets/js/4.f2f6a78d.js"><link rel="prefetch" href="/academy-html/assets/js/40.fafd005c.js"><link rel="prefetch" href="/academy-html/assets/js/41.bde5fc7d.js"><link rel="prefetch" href="/academy-html/assets/js/42.a3167122.js"><link rel="prefetch" href="/academy-html/assets/js/43.dd5e0fb9.js"><link rel="prefetch" href="/academy-html/assets/js/45.35f48f34.js"><link rel="prefetch" href="/academy-html/assets/js/46.0fa345a6.js"><link rel="prefetch" href="/academy-html/assets/js/47.ec43490e.js"><link rel="prefetch" href="/academy-html/assets/js/48.7feb1ea8.js"><link rel="prefetch" href="/academy-html/assets/js/49.95902448.js"><link rel="prefetch" href="/academy-html/assets/js/5.cb6c0eaf.js"><link rel="prefetch" href="/academy-html/assets/js/50.4ee69372.js"><link rel="prefetch" href="/academy-html/assets/js/51.f5ac3dc9.js"><link rel="prefetch" href="/academy-html/assets/js/52.4773deaa.js"><link rel="prefetch" href="/academy-html/assets/js/53.2937a0b6.js"><link rel="prefetch" href="/academy-html/assets/js/54.e272cd2c.js"><link rel="prefetch" href="/academy-html/assets/js/55.9f7cdce5.js"><link rel="prefetch" href="/academy-html/assets/js/56.79838d97.js"><link rel="prefetch" href="/academy-html/assets/js/57.9c5746ab.js"><link rel="prefetch" href="/academy-html/assets/js/58.a95125a4.js"><link rel="prefetch" href="/academy-html/assets/js/59.636f5031.js"><link rel="prefetch" href="/academy-html/assets/js/6.c8943960.js"><link rel="prefetch" href="/academy-html/assets/js/60.517d1800.js"><link rel="prefetch" href="/academy-html/assets/js/61.c4a37dfd.js"><link rel="prefetch" href="/academy-html/assets/js/62.1e040048.js"><link rel="prefetch" href="/academy-html/assets/js/63.e45cd82a.js"><link rel="prefetch" href="/academy-html/assets/js/64.681210a5.js"><link rel="prefetch" href="/academy-html/assets/js/65.afed9a14.js"><link rel="prefetch" href="/academy-html/assets/js/66.c30f9ab8.js"><link rel="prefetch" href="/academy-html/assets/js/67.c4646054.js"><link rel="prefetch" href="/academy-html/assets/js/68.4e81e186.js"><link rel="prefetch" href="/academy-html/assets/js/69.689a4206.js"><link rel="prefetch" href="/academy-html/assets/js/7.dab25f9a.js"><link rel="prefetch" href="/academy-html/assets/js/70.04392753.js"><link rel="prefetch" href="/academy-html/assets/js/71.57a24a1f.js"><link rel="prefetch" href="/academy-html/assets/js/72.a5c4bff2.js"><link rel="prefetch" href="/academy-html/assets/js/73.b7b54a14.js"><link rel="prefetch" href="/academy-html/assets/js/74.3f50792f.js"><link rel="prefetch" href="/academy-html/assets/js/75.d0e65116.js"><link rel="prefetch" href="/academy-html/assets/js/76.b1fb0b0b.js"><link rel="prefetch" href="/academy-html/assets/js/77.8f33a906.js"><link rel="prefetch" href="/academy-html/assets/js/78.6735e396.js"><link rel="prefetch" href="/academy-html/assets/js/79.4e8cc855.js"><link rel="prefetch" href="/academy-html/assets/js/8.ea7ba426.js"><link rel="prefetch" href="/academy-html/assets/js/80.51cc14da.js"><link rel="prefetch" href="/academy-html/assets/js/81.a51e561a.js"><link rel="prefetch" href="/academy-html/assets/js/82.161e83cb.js"><link rel="prefetch" href="/academy-html/assets/js/83.fa225d84.js"><link rel="prefetch" href="/academy-html/assets/js/84.ec64cb0e.js"><link rel="prefetch" href="/academy-html/assets/js/85.51b99c98.js"><link rel="prefetch" href="/academy-html/assets/js/86.b32f8972.js"><link rel="prefetch" href="/academy-html/assets/js/9.bd745842.js">
<link rel="stylesheet" href="/academy-html/assets/css/0.styles.b42b3a41.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/academy-html/" class="home-link router-link-active"><!----> <span class="site-name">IT Cookbook, HTML5 프로그래밍 입문 (3판)</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/academy-html/" class="nav-link">Home</a></div><div class="nav-item"><a href="/academy-html/guide/" class="nav-link router-link-active">코드 데모</a></div> <a href="https://github.com/rintiantta/academy-html" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/academy-html/" class="nav-link">Home</a></div><div class="nav-item"><a href="/academy-html/guide/" class="nav-link router-link-active">코드 데모</a></div> <a href="https://github.com/rintiantta/academy-html" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><a href="/academy-html/guide/" class="sidebar-link">코드 동작 페이지</a></li><li><a href="/academy-html/guide/chapter1.html" class="sidebar-link">1장</a></li><li><a href="/academy-html/guide/chapter2.html" class="active sidebar-link">2장</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/academy-html/guide/chapter2.html#기본예제-2-1" class="sidebar-link">기본예제 2-1</a></li><li class="sidebar-sub-header"><a href="/academy-html/guide/chapter2.html#기본예제-2-2" class="sidebar-link">기본예제 2-2</a></li><li class="sidebar-sub-header"><a href="/academy-html/guide/chapter2.html#기본예제-2-3" class="sidebar-link">기본예제 2-3</a></li><li class="sidebar-sub-header"><a href="/academy-html/guide/chapter2.html#기본예제-2-4" class="sidebar-link">기본예제 2-4</a></li></ul></li><li><a href="/academy-html/guide/chapter3.html" class="sidebar-link">3장</a></li><li><a href="/academy-html/guide/chapter4.html" class="sidebar-link">4장</a></li><li><a href="/academy-html/guide/chapter5.html" class="sidebar-link">5장</a></li><li><a href="/academy-html/guide/chapter6.html" class="sidebar-link">6장</a></li><li><a href="/academy-html/guide/chapter7.html" class="sidebar-link">7장</a></li><li><a href="/academy-html/guide/chapter8.html" class="sidebar-link">8장</a></li><li><a href="/academy-html/guide/chapter9.html" class="sidebar-link">9장</a></li><li><a href="/academy-html/guide/chapter10.html" class="sidebar-link">10장</a></li><li><a href="/academy-html/guide/chapter11.html" class="sidebar-link">11장</a></li><li><a href="/academy-html/guide/chapter12.html" class="sidebar-link">12장</a></li><li><a href="/academy-html/guide/chapter13.html" class="sidebar-link">13장</a></li><li><a href="/academy-html/guide/chapter14.html" class="sidebar-link">14장</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="_2장-웹-페이지-기본-구조와-작성-방법"><a href="#_2장-웹-페이지-기본-구조와-작성-방법" aria-hidden="true" class="header-anchor">#</a> 2장 웹 페이지 기본 구조와 작성 방법</h1> <p class="book-info"><span class="book-info-label"><img src="/academy-html/svg/book.svg" class="fa-icon" style="vertical-align: middle"></span> <!----> <span class="book-info-page">56페이지</span></p> <div class="code-caption"><b class="code-caption-label">코드 2-1 HTMLPage.html</b></div> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype"><!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>HTML5 Basic<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Hello World..!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre></div><h2 id="기본예제-2-1"><a href="#기본예제-2-1" aria-hidden="true" class="header-anchor">#</a> 기본예제 2-1</h2> <p class="book-info"><span class="book-info-label"><img src="/academy-html/svg/book.svg" class="fa-icon" style="vertical-align: middle"></span> <!----> <span class="book-info-page">58페이지</span></p> <div class="code-caption"><b class="code-caption-label">코드 2-2 HTMLPageWithStyle.html</b></div> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype"><!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>HTML5 Basic<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token selector">h1</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Hello World..!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre></div><iframe src="/academy-html/example/chapter_2/HTMLPageWithStyle.html" style="height:200px;"></iframe> <h2 id="기본예제-2-2"><a href="#기본예제-2-2" aria-hidden="true" class="header-anchor">#</a> 기본예제 2-2</h2> <p class="book-info"><span class="book-info-label"><img src="/academy-html/svg/book.svg" class="fa-icon" style="vertical-align: middle"></span> <!----> <span class="book-info-page">59페이지</span></p> <div class="code-caption"><b class="code-caption-label">코드 2-3 style.css</b></div> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">h1</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="code-caption"><b class="code-caption-label">코드 2-4 HTMLPageWithLink.html</b></div> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype"><!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>HTML5 Basic<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Style.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Hello World..!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre></div><iframe src="/academy-html/example/chapter_2/HTMLPageWithStyle.html" style="height:200px;"></iframe> <h2 id="기본예제-2-3"><a href="#기본예제-2-3" aria-hidden="true" class="header-anchor">#</a> 기본예제 2-3</h2> <div class="code-caption"><b class="code-caption-label">코드 2-5 HTMLPageWithScript.html</b></div> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype"><!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>HTML5 Basic<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token comment">// 경고 창을 출력합니다.</span>
document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">'Hello JavaScript .. !'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre></div><iframe src="/academy-html/example/chapter_1/HTMLPageWithScript.html" style="height:200px;"></iframe> <h2 id="기본예제-2-4"><a href="#기본예제-2-4" aria-hidden="true" class="header-anchor">#</a> 기본예제 2-4</h2> <div class="code-caption"><b class="code-caption-label">코드 2-6 OuterJavaScript.js</b></div> <div class="language-javascript extra-class"><pre class="language-javascript"><code>document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">'Hello JavaScript .. !'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><div class="code-caption"><b class="code-caption-label">코드 2-7 HTMLPageWithOuterScript.htmll</b></div> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype"><!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>HTML5 Basic<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>OuterJavaScript.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre></div><iframe src="/academy-html/example/chapter_1/HTMLPageWithScript.html" style="height:200px;"></iframe></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/academy-html/guide/chapter1.html" class="prev">
1장
</a></span> <span class="next"><a href="/academy-html/guide/chapter3.html">
3장
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/academy-html/assets/js/app.3d869fd2.js" defer></script><script src="/academy-html/assets/js/3.129ab191.js" defer></script><script src="/academy-html/assets/js/44.1afb2e9f.js" defer></script>
</body>
</html>