[๐ฑ๋ชฉ์ฐจ๐ฑ]
- HTML์ ๊ตฌ์ฑ์์ - Tag
- HTML์ ๊ตฌ์ฑ์์ - ์์(Elements)
- ๋น ์์(Empty Element)
- ๋ธ๋ฝ ์์(Empty Element)
- ์ธ๋ผ์ธ ์์(Inline Element) (+์ธ๋ผ์ธ-๋ธ๋ก์์)
- HTML์ ๊ตฌ์ฑ์์ - ์์ฑ(attribute)
- Tag์ ์ข
๋ฅ
- ์ ๋ชฉ ํ๊ทธ
- ๋ณธ๋ฌธ ํ๊ทธ
- ์ค ๋ฐ๊ฟ ํ๊ทธ
- ๋ชฉ๋ก ํ๊ทธ
- ์ํ์ค ํ๊ทธ
- ์ธ ๋ฌธ์ ๊พธ๋ฏธ๊ธฐ ํ๊ทธ (+์ค์ต)
- ์ด๋ฏธ์ง๋ฅผ ๋ฃ์ด์ฃผ๋ <img>ํ๊ทธ
- ํ์ดํผ๋งํฌ๋ฅผ ๋ฃ๋ <a>ํ๊ทธ (+์ค์ต)
ํ๊ทธ๋ ์์ํ๊ทธ์ ์ข ๋ฃํ๊ทธ contents, element
01. HTML ์ ๊ตฌ์ฑ์์ - Tag
์ HTML Tag์ ๊ตฌ์ฑ์์ ์ฌ์ง์ ๋ณด๋ฉด, p ๋ ํ๊ทธ์ ์ด๋ฆ, <> ๋ ์์ํ๊ทธ, ์ฌ๋ ํ๊ทธ ์ ๋๋ค. ์๊ฐ ํ๊ทธ์ ๋ถ๊ฐ์ ์ธ ๊ฒ์ ์ธ ์๋ ์๊ณ ์์ธ ์๋ ์์ต๋๋ค. class๋ ์์ฑ๋ช ์ด๊ณ foo ๋ ์์ฑ ๊ฐ์ ๋๋ค. </p>๋ ๋ซ๋ํ๊ทธ, ์ข ๋ฃํ๊ทธ ์ ๋๋ค. ๊ตฌ๊ธ๋ง์ ์ํด ์์ด๋ช ๋ ์์ ๋์๋ฉด ์ข์ ๊ฒ๊ฐ์ต๋๋ค.
02. HTML์ ๊ตฌ์ฑ์์ - ์์(Elements)
์์ํ๊ทธ์ ์ข ๋ฃํ๊ทธ ์ฌ์ด์ ์ฌ์ฉํฉ๋๋ค. ํฌ๊ฒ 1. ๋น์์(Empty Element), 2. ๋ธ๋ก์์(Block Element), 3. ์ธ๋ผ์ธ์์(Inline Element)๋ก ๋๋์ด์ง๋๋ค.
02-01. ๋น ์์(Empty Element)
๋ด์ฉ ์์ด ๊ตฌ์กฐ์ ์ธ ๊ธฐ๋ฅ๋ง ํ๋ ์์ ์ ๋๋ค. <br> <hr> ๋ฑ์ด ์์ต๋๋ค.
02-02. ๋ธ๋ก ์์(Block Element)
๊ธฐ๋ณธ์ ์ผ๋ก ๋ถ๋ชจ์์์ ์ ์ฒด ๋๋น๋ฅผ ์ฐจ์งํฉ๋๋ค. ํ๊ทธ๊ฐ ์์๋๋ฉด ๋ฌด์กฐ๊ฑด ๊ฐํ(์ค๋ฐ๊ฟ)์ด ์ผ์ด๋ฉ๋๋ค. ํฌ๊ธฐ๊ฐ์ ๊ฐ์ง ์ ์์ต๋๋ค.(๊ฐ๋ก,์ธ๋ก ํฌ๊ธฐ ์ง์ ๊ฐ๋ฅ) ์ํ์ข์ฐ margin๊ณผ padding์ ๊ฐ์ง ์ ์์ต๋๋ค. ๋ ์ด์์์ ์์ ํ๋ ์์๋ก ์ ํฉํ๋๋ค. ๋ชจ๋ ์ธ๋ผ์ธ ์์๋ฅผ ํฌํจํ๊ฑฐ๋ ๋ค๋ฅธ ๋ธ๋ก์์๋ฅผ ํฌํจํฉ๋๋ค. <h1></h1>,<div></div>,<p></p>,<hr>๊ฐ ์์ต๋๋ค.
02-03. ์ธ๋ผ์ธ ์์(Inline Element)
ํ ์คํธ ํน์ ์ด๋ฏธ์ง ํฌ๊ธฐ์ ๋ง๋ ํ์ํ ๊ณต๊ฐ๋ง์ ์ฐจ์งํ๋ ์์์ ๋๋ค. ์์๋ค์ด ์ํ ์ฆ, ๊ฐ๋ก๋ก ์์ ๋๋ค. ๋๋น์ ๋์ด๋ฅผ ์ง์ ํ ์ ์๊ณ ๋ธ๋ก ์์ ์์ ํฌํจ๋์ด ์๋ ๊ฒ์ผ๋ก ์ธ๋ผ์ธ ์์๋ง ๊ฐ์ง ์ ์์ต๋๋ค. ํ ์คํธ๋ฅผ ์์ ํ๋ ์์๋ก ์ ํฉํฉ๋๋ค. <a></a>,<span></span>,<strong></strong> ๋ฑ์ด ์์ต๋๋ค.
+์ธ๋ผ์ธ-๋ธ๋ก์์(inline-block Element)
์ธ๋ผ์ธ-๋ธ๋ก์์๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ธ๋ผ์ธ ์์๊ธฐ ๋๋ฌธ์ ์ํ์ผ๋ก ์์ด๊ฒ ๋์ง๋ง ๋ธ๋ก์์์ฒ๋ผ ์ฌ์ด์ฆ๋ฅผ ์ง์ ํ ์ ์์ต๋๋ค. ์ฆ, ํฌ๊ธฐ๊ฐ์ ๊ฐ์ง ์ ์์ต๋๋ค. ์ฌ์ฉ ๊ฐ๋ฅํ ํ์ํ ๋งํผ์ ์์ญ์ ์ฌ์ฉํฉ๋๋ค. <img><input><button> ๋ฑ์ด ์์ต๋๋ค.
03. HTML์ ๊ตฌ์ฑ์์ - ์์ฑ(attribute)
ํ๊ทธ๋ฅผ ๋ณด์กฐํ๋ ๋ช ๋ น์ด๋ก ํ๊ทธ ์์ชฝ์์ ์๋๋ฉ๋๋ค. id, class, style, width, height ๋ฑ์ด ์์ต๋๋ค. ํ๊ทธ๋ง๋ค ์ฌ์ฉ ๊ฐ๋ฅํ ์์ฑ์ด ์ ํด์ ธ ์์ต๋๋ค.
<a href="" style=""></a>
<!-- href, style ์์ฑ ์ฌ์ฉ๊ฐ๋ฅ-->
04. Tag ์ ์ข ๋ฅ
HTML์ ๊ธฐ๋ณธํ๊ทธ์๋
<h1> </h1> | <a> </a> | <p> </p> | <div> </div> |
<br> | <span> </span> | <img> | <ul> </ul>, <ol> </ol>, <li> </li> |
04-01. ์ ๋ชฉ ํ๊ทธ
์ ๋ชฉ ํ๊ทธ๋ <h1 ~6></h1~6>์ด ์์ผ๋ฉฐ ์ ๋ชฉ์ ๋ปํ๋ Heading์ ์ฝ์์ธ h๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ ๋ชฉ์ด๋๊น ์๋ ์ค๋ฐ๊ฟ๊ธฐ๋ฅ์ด ์์ต๋๋ค. ํ๋์ HTML ๋ฌธ์์๋ ํ๋์ h1ํ๊ทธ๋ฅผ ๊ถ์ฅํฉ๋๋ค. ์น ๊ฒ์ ์์ง์ด ์ ์ผ ๋จผ์ ๊ฒ์ํ๋ ํ๊ทธ์ ๋๋ค.
04-02. ๋ณธ๋ฌธ ํ๊ทธ
๋ณธ๋ฌธ์ ๋ปํ๋ paragraph์ ์ฝ์๋ก <p>๋ฅผ ์ฌ์ฉํฉ๋๋ค. ๋ณธ๋ฌธ์ ์ ๊ธฐ ์ํ ํ๊ทธ์ ๋๋ค.
04-03. ์ค ๋ฐ๊ฟ ํ๊ทธ
์ค๋ฐ๊ฟ์ ์๋ฏธํ๋ break ์ ์ฝ์๋ก <br>์ ์ฌ์ฉํฉ๋๋ค. ์ค์ ๋ฐ๊ฟ์ฃผ๋ ํ๊ทธ์ ๋๋ค. ์ด๊ณ ๋ซ๋ ํ๊ทธ๊ฐ ์กด์ฌํ์ง ์์ <br>๋ง ์จ์ฃผ์ ๋ ๊ด์ฐฎ์ต๋๋ค.
04-04. ๋ชฉ๋กํ๊ทธ
์์ ์๋ ๋ชฉ๋ก์ธ unordered list์ ์ฝ์๋ก <ul>ํ๊ทธ๋ฅผ ์ฌ์ฉํฉ๋๋ค. ๋ ์์ ์๋ ๋ชฉ๋ก์ธ ordered list ์ ์ฝ์๋ก <ol>ํ๊ทธ๋ฅผ ์ฌ์ฉํฉ๋๋ค. ๋ชฉ๋ก ์์ ๋ง์ปค๋ฅผ ์ค์ ํ๋ type์์ฑ์ ์ด์ฉํ์ฌ ๋ชจ์์ ์ ํ ์๋ ์์ต๋๋ค. ex) <ul type="square">,<ol type="1" start="4" reversed> ->๋ชฉ๋ก์ ๋ง์ปค๋ฅผ ์ซ์๋ก ์ค์ , 4๋ถํฐ์์, ๊ฑฐ๊พธ๋ก (4,3,2,1) olํ๊ทธ์ type์์ฑ์ 1(default),a,A,i,I๋ฑ์ด ์์ต๋๋ค.
<!-- emmet: ํค์๋๋ก html ๊ตฌ์กฐ ์ก์์ฃผ๋ ๊ฒ -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tag ์ข
๋ฅ</title>
</head>
<body>
<h1>Tag ์ข
๋ฅ์ ๋ํด ๋ฐฐ์๋ณด์!</h1>
<h2>์ ๋ชฉ2</h2>
<h3>์ ๋ชฉ3</h3>
<h4>์ ๋ชฉ4</h4>
<h5>์ ๋ชฉ5</h5>
<h6>์ ๋ชฉ6</h6>
<p>์ฌ๊ธฐ๋ ๋ณธ๋ฌธํ๊ทธ์
๋๋ค!</p>
<br>
<br>
<br>
<br>
<br>
<p>์ฌ๊ธฐ๋ ๋ณธ๋ฌธํ๊ทธ์
๋๋ค!</p>
<h3>์ค๋์ ํ ์ผ</h3>
<!-- ul tag type attribute: disc(default), square, circle, none -->
<ul type="square">
<li>html ๊ณต๋ถํ๊ธฐ</li>
<li>์ด๋ํ๊ธฐ</li>
<li>๋ฐฉ ์ฒญ์ํ๊ธฐ</li>
</ul>
</body>
</html>
Tag ์ข ๋ฅ์ ๋ํด ๋ฐฐ์๋ณด์!
์ ๋ชฉ2
์ ๋ชฉ3
์ ๋ชฉ4
์ ๋ชฉ5
์ ๋ชฉ6
์ฌ๊ธฐ๋ ๋ณธ๋ฌธํ๊ทธ์ ๋๋ค!
์ฌ๊ธฐ๋ ๋ณธ๋ฌธํ๊ทธ์ ๋๋ค!
์ค๋์ ํ ์ผ
- html ๊ณต๋ถํ๊ธฐ
- ์ด๋ํ๊ธฐ
- ๋ฐฉ ์ฒญ์ํ๊ธฐ
04-05.์ํ์ค
A horizontal rule์ ์ฝ์๋ก <hr>ํ๊ทธ๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ํ์ผ๋ก ๋ ์ค์ ๊ทธ์ด ์ค๋๋ค. ๋ฐ๋ก ์ข ๋ฃํ๊ทธ๊ฐ ์กด์ฌํ์ง ์์ <hr>๋จ๋ ์ผ๋ก ์ฌ์ฉํด ์ฃผ์๋ฉด ๋ฉ๋๋ค.
04-06.์ธ ๋ฌธ์ ๊พธ๋ฏธ๊ธฐ ํ๊ทธ
<b> </b> | ๊ธ์จ๋ฅผ ๋๊ป๊ฒ ๋ง๋ค์ด ์ค๋๋ค. |
<strong> </strong> | ๊ธ์จ๋ฅผ ๋๊ป๊ฒ ๋ง๋ค์ด ์ค๋๋ค. + semanticํ ์๋ฏธ๋ฅผ ์ง๋๋๋ค. |
<i> </i> | ๊ธ์จ๋ฅผ ์ดํค๋ฆญ๊ธ์๋ก ๋ง๋ค์ด ์ค๋๋ค. |
<em> </em> | emphasized์ ์ฝ์๋ก ๊ธ์จ๋ฅผ ๊ฐ์กฐํ๋ ์ญํ ์ ํฉ๋๋ค. =๊ธ์จ๊ฐ ๊ธฐ์ธ์ฌ์ ธ์ ํ์๋ฉ๋๋ค. |
<del> </del> | ๊ธ์จ์ ์ค๊ฐ ์ค์ด ๊ทธ์ด์ง๋๋ค. |
<u> </u> | ๊ธ์จ์ ๋ฐ ์ค์ด ๊ทธ์ด์ง๋๋ค. |
์ค์ต) ์นดํ ์๋ฃ ๋ฌธ์ ์์ฑ
- ์นดํ ์ด๋ฆ์ <h1>
- ๋ฉ๋ด ์ด๋ฆ์ <h2>
- ์นดํ ์ ์ฒด ์๋ฃ ๋ฆฌ์คํธ๋ <ul>ํ๊ทธ, ์๋ฃ ์ต์ 5๊ฐ (<ul>์ ์์ ์์ <ol> ์์๋ฅผ ๋ฃ๊ณ ๊ฐ๊ฒฉ์ ํ์)
- <ul> ํ๊ทธ ์๋์ ์ํ ์ค์ ์ถ๊ฐํ๊ณ ๊ทธ ์๋์ ๊ฐ๊ฐ ์๋ฃ์ ๋ํ ์ค ๋ช ์ <p>, <span> ํ๊ทธ๋ฅผ ๋ฒ๊ฐ์ ์ฌ์ฉํ์ฌ ํ์
- ์นดํ ์ด๋ฆ์ ํ๋์ ์ผ๋ก ํ์ ( style=“color:blue;” ์์ฑ ์ถ๊ฐ )
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>์ด๋์ผ</title>
</head>
<body>
<h1 style="color:blue";>์ด๋์ผ</h1>
<ul>
<li><h2>์๋ฉ๋ฆฌ์นด๋
ธ</h2>
<ol>
<li>L : 3,200์</li>
<li>EX : 3,200์</li>
</ol>
</li>
<li><h2>๋์ธ ํฌ๋ฆผ ๋ผ๋ผ</h2>
<ol>
<li>L : 4,700์</li>
</ol>
</li>
<li><h2>์ฐ์ ์นดํ๋ผ๋ผ</h2>
<ol>
<li>L :4,500์</li>
<li>EX : 5,700์</li>
</ol>
</li>
<li><h2>์นดํ๋ผ๋ผ</h2>
<ol>
<li>L : 4,200์</li>
<li>EX : 5,00์</li>
</ol>
</li>
<li><h2>์นดํ๋ชจ์นด</h2>
<ol>
<li>L :4,500์</li>
<li>EX : 5,700์</li>
</ol>
</li>
</ul>
<hr>
<h2>์๋ฃ์ค๋ช
</h2>
<p>์๋ฉ๋ฆฌ์นด๋
ธ๋ ๊ตฌ์ด ๊ฒฌ๊ณผ๋ฅ์ <b>๊ณ ์ํ ํฅ๋ฏธ</b>์ ๋คํฌ์ด์ฝ๋ ์ <b>Bitter</b> </p>
<span>๋์ธ ํฌ๋ฆผ๋ผ๋ผ๋ <strong>๋ถ๋๋ฌ์ด ํฌ๋ฆผ</strong>๊ณผ <b>์์คํ๋ ์</b>,๋ํฐ ํ๋ ์ด๋ฒ๊ฐ ์ด์ฐ๋ฌ์ ธ ๋ง๋ค์ด์ง ์๋ฒฝํ ํ์์ ๋ผ๋ผ์
๋๋ค. </span>
<p>์ฐ์ ์นดํ๋ผ๋ผ๋ ๋ฒ ํธ๋จํ ์ฐ์ ์ ๋ฌ์ฝคํ ๋ง๊ณผ ์์คํ๋ ์๊ฐ ์ ๋ฌํ๊ฒ ์ด์ฐ๋ฌ์ ธ ๋๊ตฌ๋ ์ฝ๊ฒ ์ฆ๊ธธ ์ ์๋ ๋ถ๋๋ฌ์ด ์ปคํผ์๋ฃ์
๋๋ค. </p>
<span>์นดํ๋ผ๋ผ๋ <em>์งํ ์์คํ๋ ์</em>์ <em>๋ถ๋๋ฌ์ด ์ฐ์ </em>๊ฐ ๋ง๋ ๊ณ ์ํ ํ๋ฏธ๋ฅผ ๋ํ๋ ๋ฉ๋ด</span>
<p>์นดํ๋ชจ์นด๋ ์์คํ๋ ์์ ๋ฌ์ฝค ์์ธ๋ฆํ ๋ชจ์นด์๋ฝ์ด ๋ง๋ ํ์ธต ํ๋ถํด์ง ๋ง๊ณผ ๋ถ๋๋ฌ์์ด ๋๊ปด์ง๋ ์๋ฃ์
๋๋ค.</p>
</body>
</html>
04-07. ์ด๋ฏธ์ง๋ฅผ ๋ฃ์ด์ฃผ๋ <img>ํ๊ทธ
<img>ํ๊ทธ๋ ์ด๋ฏธ์ง๋ฅผ ๋ฃ์ ๋ ์ฌ์ฉํฉ๋๋ค. ์์ฑ ๊ฐ ์ค ํ๋์ธ src๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ด๋ฏธ์ง ๋ก๋๊ฐ ์๋ ๊ฒฝ์ฐ alt ์์ฑ์ด ์ฃผ์ํฉ๋๋ค. ํ์ผ์ ์ง์ ๊ฐ์ ธ์ค๊ฑฐ๋, ์ธํฐ๋ท ์ฃผ์์์ ๊ฐ์ ธ์ค๋ ๋ฐฉ๋ฒ์ด ์์ต๋๋ค.
04-07-01. ์ด๋ฏธ์ง (์ ๋๊ฒฝ๋ก vs ์๋๊ฒฝ๋ก)
์ ๋๊ฒฝ๋ก๋ , ํ์ด์ง ์์ ๋ค๋ฅธ ์๋ฒ์ ์๋ ์ด๋ฏธ์ง๋ ํ์ด์ง ๋ฑ์ ํ์ผ์ ์ฐ๊ฒฐ ์ํฌ ๋ ์ฌ์ฉํ๋ค.
. :ํ์ฌํด๋
.. :๋ถ๋ชจํด๋
ex) ./img/sesac.jpg : ํ์ฌ ์์น์์ img ํด๋ ์์ sesac.jpg ํ์ผ์ ์ฐพ์๋ผ -> ์๋๊ฒฝ๋ก
ex) C:\Users\sesac\Documents\sesac-ydp-5\02-html\img\sesac.jpg : root ๋ถํฐ ์์ํ๋ ๊ฒฝ๋ก -> ์ ๋๊ฒฝ๋ก
+ ์ธํฐ๋ท ์ฃผ์๋ก ์ด๋ฏธ์ง ์ค์ (์ ๋ ๊ฒฝ๋ก)
์ด๋ฏธ์ง ์ฃผ์๋ฅผ ๋ณต์ฌํ์ฌ img ํ๊ทธ์ ๋ฃ์ผ๋ฉด ๋๋ค.
04-08. ํ์ดํผ๋งํฌ๋ฅผ ๋ฃ๋ <a> ํ๊ทธ
anchor์ ์ฝ์์ธ <a>ํ๊ทธ๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์์ฑ๊ฐ์๋ Hypertext Reference์ ์ฝ์์ธ href๊ฐ ์ฌ์ฉ๋๊ณ ์ด๋ํ ํ์ด์ง์ ๋งํฌ ์ ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์์ฑ๊ฐ ์ค ํ๋์ธ target์ ๋งํฌ ๋ ๋ฌธ์๋ฅผ ์ด์์ ๋ ๋ฌธ์๊ฐ ์ด๋ฆด ์์น๋ฅผ ํ์ํฉ๋๋ค. _blank๋ ์๋ก์ด ํญ์์ ๋ฌธ์๊ฐ ์ด๋ฆฌ๊ณ _self๋ ํ์ฌ ํญ์์ ์ด๋ฆฌ๊ฒ ๋ฉ๋๋ค.
์ค์ต) img, a ํ๊ทธ ์ค์ต
- ์์์ ์งํํ ์ค์ต 1์ ์ด๋ฏธ์ง๋ฅผ ์ถ๊ฐํ์์ค.
- ์ด๋ฏธ์ง์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ ธ์ ๋ ์นดํ ์ด๋ฆ์ด ๋์ค๋๋ก ํ์์ค.
- ์ด๋ฏธ์ง๋ฅผ ํด๋ฆญํ์ ๋ https://google.com์ผ๋ก ์ด๋ํ๊ฒ ํ์์ค.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>์ด๋์ผ</title>
</head>
<body>
<!--์์ฑ๊ฐ์ ์ด๋์ผ ์ปคํผ -->
<a href="https://www.google.com"><img src="EDIYA.png" alt="์ด๋์ผ ์ปคํผ"></a>
<h1 style="color:blue";>์ด๋์ผ</h1>
<ul>
<li><h2>์๋ฉ๋ฆฌ์นด๋
ธ</h2>
<ol>
<li>L : 3,200์</li>
<li>EX : 3,200์</li>
</ol>
</li>
<li><h2>๋์ธ ํฌ๋ฆผ ๋ผ๋ผ</h2>
<ol>
<li>L : 4,700์</li>
</ol>
</li>
<li><h2>์ฐ์ ์นดํ๋ผ๋ผ</h2>
<ol>
<li>L :4,500์</li>
<li>EX : 5,700์</li>
</ol>
</li>
<li><h2>์นดํ๋ผ๋ผ</h2>
<ol>
<li>L : 4,200์</li>
<li>EX : 5,00์</li>
</ol>
</li>
<li><h2>์นดํ๋ชจ์นด</h2>
<ol>
<li>L :4,500์</li>
<li>EX : 5,700์</li>
</ol>
</li>
</ul>
<hr>
<h2>์๋ฃ์ค๋ช
</h2>
<p>์๋ฉ๋ฆฌ์นด๋
ธ๋ ๊ตฌ์ด ๊ฒฌ๊ณผ๋ฅ์ <b>๊ณ ์ํ ํฅ๋ฏธ</b>์ ๋คํฌ์ด์ฝ๋ ์ <b>Bitter</b> </p>
<span>๋์ธ ํฌ๋ฆผ๋ผ๋ผ๋ <strong>๋ถ๋๋ฌ์ด ํฌ๋ฆผ</strong>๊ณผ <b>์์คํ๋ ์</b>,๋ํฐ ํ๋ ์ด๋ฒ๊ฐ ์ด์ฐ๋ฌ์ ธ ๋ง๋ค์ด์ง ์๋ฒฝํ ํ์์ ๋ผ๋ผ์
๋๋ค. </span>
<p>์ฐ์ ์นดํ๋ผ๋ผ๋ ๋ฒ ํธ๋จํ ์ฐ์ ์ ๋ฌ์ฝคํ ๋ง๊ณผ ์์คํ๋ ์๊ฐ ์ ๋ฌํ๊ฒ ์ด์ฐ๋ฌ์ ธ ๋๊ตฌ๋ ์ฝ๊ฒ ์ฆ๊ธธ ์ ์๋ ๋ถ๋๋ฌ์ด ์ปคํผ์๋ฃ์
๋๋ค. </p>
<span>์นดํ๋ผ๋ผ๋ <em>์งํ ์์คํ๋ ์</em>์ <em>๋ถ๋๋ฌ์ด ์ฐ์ </em>๊ฐ ๋ง๋ ๊ณ ์ํ ํ๋ฏธ๋ฅผ ๋ํ๋ ๋ฉ๋ด</span>
<p>์นดํ๋ชจ์นด๋ ์์คํ๋ ์์ ๋ฌ์ฝค ์์ธ๋ฆํ ๋ชจ์นด์๋ฝ์ด ๋ง๋ ํ์ธต ํ๋ถํด์ง ๋ง๊ณผ ๋ถ๋๋ฌ์์ด ๋๊ปด์ง๋ ์๋ฃ์
๋๋ค.</p>
</body>
</html>