HTML ๋ฌธ์ ๊ตฌ์กฐ์ ์ฃผ์
<!-- html ์ฃผ์ -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css"></style>
<script type="text/javascript"></script>
<title>HTML ๋ฌธ์ ๊ตฌ์กฐ์ ์ฃผ์</title>
</head>
<body>
<h1>Hello HTML</h1>
<p>์ฃผ์ ํ๊ทธ ์์ ๋ด์ฉ์ ์น ๋ธ๋ผ์ฐ์ ์์ ๋ณด์ด์ง ์์ต๋๋ค.</p>
<p>๋ฐ๊ฐ์ต๋๋ค. HTML</p>
<a href="http://www.naver.com">๋ค์ด๋ฒ ๊ฐ๊ธฐ</a>
</body>
</html>
- Ctrl + / ๋ฅผ ๋๋ฅด๋ฉด ํด๋น ๋ฌธ์ฅ์ ์ฃผ์ ์ฒ๋ฆฌ ํ ์ ์๋ค.
- <a href="link">Link</a>๋ฅผ ํตํด์ ํด๋น ์ด๋ฏธ์ง๋ ๊ธ์์ ํ์ดํผ๋งํฌ๋ฅผ ์ถ๊ฐ ํ ์ ์๋ค.
Heading ํ๊ทธ์ style ์์ฑ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Heading ํ๊ทธ์ style ์์ฑ</title>
<style>
h1 {
text-align: center;
color: red;
}
h2 {
text-align: right;
background-color: blue;
color: white;
font-family: ๊ถ์์ฒด;
font-size: 120px;
}
</style>
</head>
<body>
<h1>h1์ ์ ๋ชฉ</h1>
<h2>h2์ ์ ๋ชฉ</h2>
<h3>h3์ ์ ๋ชฉ</h3>
<h4>h4์ ์ ๋ชฉ</h4>
<h5>h5์ ์ ๋ชฉ</h5>
<h6>h6์ ์ ๋ชฉ</h6>
</body>
</html>
- Heading ํ๊ทธ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ํ
์คํธ๋ฅผ ๊ตต๊ฒ ํ์ํ๋ฉฐ h1์์ h6๊น์ง 6๋จ๊ณ๋ก
๊ธ์ ํฌ๊ธฐ๋ฅผ ํํํ๋ค. 6๋จ๊ณ ์ค h1์ด ๊ธ์ ํฌ๊ธฐ๊ฐ ๊ฐ์ฅ ํฌ๋ฉฐ h6์ ๊ฐ์ฅ ์๋ค.
- <head> ์์์ style ์์ฑ์์ ์ฌ๋ฌ style ์์ฑ์ ํ๋ฒ์ ์ถ๊ฐ ํ ์ ์๋ค.
- text-align : ๊ธ์ ์์น
- background-color : ๋ฐฐ๊ฒฝ ์
- color : ๊ธ์ ์
- font-family : ๊ธ์ ํฐํธ
- font-size : ๊ธ์ ํฌ๊ธฐ
๋ฌธ๋จ๊ณผ ์ค ๋ฐ๊ฟ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>๋ฌธ๋จ๊ณผ ์ค ๋ฐ๊ฟ</title>
<style>
h1 {
border: 1px solid red; width: 190px;
font-size: 60px;
font-family: ๊ถ์์ฒด;
color: blue;
}
.h21 {
font-size: 50px;
font-family: ๊ถ์์ฒด;
color: red;
}
.h22 {
font-size: 50px;
font-family: ๊ถ์์ฒด;
color: blue;
}
.p1 {
color: blue;
}
.p2 {
color: red;
}
</style>
</head>
<body>
<h1>์ ๊ตญ๊ฐ</h1>
<h2 class="h21">1์ </h2>
<p class="p1">
<span>๋ํด๋ฌผ๊ณผ ๋ฐฑ๋์ฐ์ด ๋ง๋ฅด๊ณ ๋ณ๋๋ก</span><br>
ํ๋๋์ด ๋ณด์ฐํ์ฌ ์ฐ๋ฆฌ๋๋ผ ๋ง์ธ<br>
๋ฌด๊ถํ ์ผ์ฒ๋ฆฌ ํ๋ ค๊ฐ์ฐ<br>
๋ํ ์ฌ๋ ๋ํ์ผ๋ก ๊ธธ์ด ๋ณด์ ํ์ธ<br>
</p>
<hr>
<h2 class="h22">2์ </h2>
<p class="p2">
๋จ์ฐ์์ ์ ์๋๋ฌด ์ฒ ๊ฐ์ ๋๋ฅธ ๋ฏ<br>
๋ฐ๋์๋ฆฌ ๋ถ๋ณํจ์ ์ฐ๋ฆฌ ๊ธฐ์์ผ์ธ<br>
๋ฌด๊ถํ ์ผ์ฒ๋ฆฌ ํ๋ ค๊ฐ์ฐ<br>
๋ํ ์ฌ๋ ๋ํ์ผ๋ก ๊ธธ์ด ๋ณด์ ํ์ธ<br>
</p>
</body>
</html>
- <br>ํ๊ทธ๋ก ์ค ๋ฐ๊ฟ์ ํ ์ ์๋ค.
- <span>์ HTML ๋ฌธ์์์ ์ธ๋ผ์ธ ์์(inline-element)๋ค์ ํ๋๋ก ๋ฌถ์ ๋ ์ฌ์ฉํ๋ค.
- ๊ฐ์ ํ๊ทธ๋ค์๊ฒ ์๋ก ๋ค๋ฅธ ์์๋ฅผ ์ฃผ๊ธฐ ์ํด์๋ ์์ฑ(class)์ ์ถ๊ฐํ๋ฉด ๋๋ค.
- ์์ฑ์ ์ถ๊ฐํ ํ๊ทธ์ ์์๋ฅผ ๋ฃ์ ๋๋ ์์ ์ (.)์ ๋ถ์ด๊ณ ์์ฑ์ด๋ฆ์ ๋ฃ์ผ๋ฉด ๋๋ค.
- border: 1px solid red; width: 190px; : 1px ํฌ๊ธฐ์ ๋นจ๊ฐ์ ํ ๋๋ฆฌ๋ฅผ ์ถ๊ฐํ๋๋ฐ ๊ฐ๋กํญ์ 190px์ด๋ค.
๋ค์ํ ๊ธ์ ๊ด๋ จ ์์ ํ๊ทธ
<!DOCTYPE html>
<html>
<head></head>
<body>
<h2>๋ค์ํ ๊ธ์๊ด๋ จ ์์ ํ๊ทธ</h2>
<p><b>b ํ๊ทธ(bold text)</b>๋ ์ํ๋ช
๋๋ ๋จ์ ๋ณผ๋์ฒด ํํ์ ์ฌ์ฉ</p>
<p>strong ํ๊ทธ๋ <strong>์ค์ํ ๋ด์ฉ์ ๊ฐํ ๊ฐ์กฐ</strong>์ ์ฌ์ฉ</p>
<p>i ํ๊ทธ๋ ์์ด์ ์ธ์ฉ์ด๋ ์๊ฐ, ๊ฟ, ๊ธฐํ ๋ณดํต <i>์ดํค๋ฆญ์ฒด</i> ํํ์ ์ฌ์ฉ</p>
<p><em>em ํ๊ทธ๋ ์ฃผ๊ด์ ๊ฐ์กฐ</em>๋ฅผ ๋ํ๋ผ ๋ฟ ์ค์์ฑ์ ๋ํ๋ด์ง ์๋๋ค.</p>
<p>์ฃผ๋ณ ๊ธ์๋ณด๋ค <small>small ์๊ฒ</small> ํ์ํ ๋ ์ฌ์ฉ</p>
<p>๊ธ์๋ฅผ <sub>sub ์๋์ฒจ์</sub> ๋ก ํ์</p>
<p>๊ธ์๋ฅผ <sup>sup ์์ฒจ์</sup> ๋ก ํ์</p>
<h2><mark>๊ธ์๊ด๋ จ ์์ํ๊ทธ ํ์ฉ</mark></h2>
<p>HTML5๋ ์๋ก์ด ์น ํ์ค์ผ๋ก <ins>2014๋
10์ 28์ผ</ins> ์ ์ ๊ถ๊ณ ์์ด ๋ฐํ๋์๋ค.</p>
<p><strong>์น ํ์ค์ ์ง์ผ HTML ๋ฌธ์๋ฅผ ์์ฑํ๋ ๊ฒ์ ์ค์ํ๋ค.</strong></p>
<p><em>๋๋ ๊ทธ๊ฐ ์๋ชปํ๋ค๊ณ ์๊ฐํ๋ค.</em></p>
<p>์ด ์ํ์ ํ๋งค๊ฐ๋ 3,900์ <del>(5,000์)</del>์ด๋ค.</p>
<p>๋ํ๋ฏผ๊ตญ <sup>(ๅคง้ๆฐๅ)</sup> ์ 5000๋
์ญ์ฌ๋ฅผ ๊ฐ์ง ๋๋ผ์ด๋ค.</p>
<p>ํํ๊ธฐํธ H<sub>2</sub>O๋ ๋ฌผ์ ์๋ฏธํ๋ค.</p>
</body>
</html>
- <p>ํ๊ทธ๋ ๋ฌธ๋จ์ ์ ์ํ๋ ํ๊ทธ์ด๋ค.
์ํฐํฐ(Entity)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>์ํฐํฐ(Entity)</h2>
<p>HTML์์ ํ๊ทธ์ ์์์ "<>" ๋ก ์์ํ์ฌ "</>" ๋ก ๋๋์ผ ํ๋ค.</p>
HTML์์๋ ๋ฑ๋ ํน์๋ฌธ์๋ก ์ธ์๋๋ฉฐ
๋ค์๊ณผ ๊ฐ์ด ์์คํค์ฝ๋๋ฅผ ์ด์ฉํด ํ๊ทธ์ ์์์ธ ๋ฅผ ์ถ๋ ฅํ ์๋ ์๋ค.
์์คํค์ฝ๋์ ์ฌ์ฉ๋ ์ซ์๋ 10์ง์๊ฐ ์๋๋ผ 16์ง์ ํ๊ธฐ๋ฒ์ ์ฌ์ฉํ๋ค.
๋ํ HTML์์ "Enter" ํค๋ฅผ ์ฌ๋ฌ๋ฒ ๋๋ฅด๊ฑฐ๋ ์คํ์ด์ค ๋ฐ๋ฅผ ์ฌ๋ฌ ๋ฒ ๋๋ฌ
๋ฌธ์ ๋ด์ ์ค ๋ฐ๊ฟ๊ณผ ๊ณต๋ฐฑ์ ์ฌ๋ฌ ๋ฒ ์
๋ ฅํ๋ค ํ๋๋ผ๋ ๋จ ํ๋์ ๊ณต๋ฐฑ์ผ๋ก
ํํ๋๊ธฐ ๋๋ฌธ์ "Enter"๋ ์ค ๋ฐ๊ฟ ํ๊ทธ์ธ ๋ฅผ ์ด์ฉํด
์ฒ๋ฆฌํ๋ฉฐ ๊ณต๋ฐฑ์ ํํ์์ ์ด์ฉํ๊ฑฐ๋ ์์คํค ์ฝ๋๋ฅผ ์ด์ฉํด ์ฒ๋ฆฌํด์ผ ํ๋ค.
</body>
</html>
HTML ๋ฌธ์๋ฅผ ์์ฑํ๋ค ๋ณด๋ฉด ํค๋ณด๋์์ ์ ๋ ฅํ ์ ์๋ ํน์ ๋ฌธ์๋ ๋ฉํ ๋ฌธ์๋ฅผ ์ ๋ ฅํด์ผ ํ๋ ๊ฒฝ์ฐ๊ฐ ์ข ์ข ์๋ค.
๋ฉํ ๋ฌธ์๋ ํน์ ์๋ฏธ๋ฅผ ์ง๋ ๋ฌธ์๋ฅผ ๋งํ๋ฉฐ
HTML์์๋ &๋ ํ๊ทธ์ ์์๊ณผ ๋์ ์๋ฆฌ๋ <, > ๋ฌธ์ ๋ฑ์ด ์ฌ๊ธฐ์ ์ํ๋ค.
&, <, > ๋ฌธ์๋ HTML์์๋ ์์ฝ์ด(reserved characters)๋ก ์น๋ธ๋ผ์ฐ์ ์์๋
๋ฉํ๋ฌธ์์ ์์ ๋๋ ํ๊ทธ์ ์์๊ณผ ๋์ผ๋ก ์ธ์๋๊ธฐ ๋๋ฌธ์ ๋ฌธ์ ๊ทธ๋๋ก ์ ๋ ฅํด์๋ ์ ๋๋ค.
๊ทธ๋ฌ๋ฏ๋ก ์ด๋ฐ ์ข ๋ฅ์ ์์ฝ์ด๋ฅผ ํํํ๊ธฐ ์ํด์๋
๋ฏธ๋ฆฌ ์์ฝ๋ ์ฝ๋๋ฅผ ์ฌ์ฉํ๋ฉฐ ์ด๋ ๊ฒ ๋ณ๋๋ก ๋ง๋ ๋ฌธ์ ์ ์ ์ํฐํฐ(entity)๋ผ๊ณ ๋ถ๋ฅธ๋ค.
HTML์์ ์์ฝ์ด๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํ ํํ์๊ณผ ๋ง์ด ์ฌ์ฉํ๋ ์ํฐํฐ๋ ๋ค์๊ณผ ๊ฐ๋ค.
์ ๋ ฅํ ๊ธ์ ๊ทธ๋๋ก ๋ณด์ฌ์ฃผ๊ธฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div { white-space: pre;}
</style>
</head>
<body>
<h2>๊ณผ์ผ ํ๋งค๋</h2>
<pre>
---------------------
์์ ๊ณผ์ผ๋ช
๊ฐ๊ฒฉ
---------------------
1 ์ฌ๊ณผ 2,000
2 ๋ฐ๋๋ 1,000
3 ๋ง๊ณ 3,000
---------------------
</pre>
<h2>๊ณผ์ผ ํ๋งค๋</h2>
<div>
---------------------
์์ ๊ณผ์ผ๋ช
๊ฐ๊ฒฉ
---------------------
1 ์ฌ๊ณผ 2,000
2 ๋ฐ๋๋ 1,000
3 ๋ง๊ณ 3,000
---------------------
</div>
</body>
</html>
- <pre> ํ๊ทธ๋ ์์ ๋ด์ฉ์ ๊ทธ๋๋ก ์ถ๋ ฅํ๋ ํ๊ทธ์ด๋ค.
- <div> ํ๊ทธ๋ ์์ญ์ ์ ์ํ๋ ํ๊ทธ์ด๋ค.
- style์์ white-space: pre;๋ฅผ ์ถ๊ฐํด๋ ๊ทธ๋๋ก ์ถ๋ ฅ์ด ๋๋ค.
๊ธ์์ ์ด๋ฏธ์ง ํ์ดํผ๋งํฌ ์ฐ๊ฒฐ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>๊ธ์์ ์ด๋ฏธ์ง ํ์ดํผ๋งํฌ ์ฐ๊ฒฐ</h2>
<p><a href="sub03_01.html">sub03_01.html์ผ๋ก ์ด๋</a></p>
<img src="images/naver_finance.jpg" alt="๋ค์ด๋ฒ ๊ธ์ต๊ฐ๊ธฐ" title="๋ค์ด๋ฒ ๊ธ์ต๊ฐ๊ธฐ">
<p><a href="sub03_01.html" target="_blank">sub03_01.html์ผ๋ก ์ด๋</a></p>
<p>
<a href="http://cafe.daum.net/" target="_blank" title="๋ค์ ์นดํ ๊ฐ๊ธฐ">
<img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" alt="๋ค์ ์นดํ ๊ฐ๊ธฐ"></a>
</p>
</body>
</html>
- <a> ํ๊ทธ์ ์์ฑ
- <a>ํ๊ทธ ์์ ์ด๋ฏธ์ง๋ฅผ ๋ฃ์ด๋ ์ด๋ฏธ์ง์ ๋งํฌ๋ฅผ ์ถ๊ฐ ํ ์ ์๋ค.
- <img src="์ด๋ฏธ์ง์ ๊ฒฝ๋ก" alt="์ด๋ฏธ์ง ์ค๋ช ">
์ฑ ๊ฐํผ ์ด๋
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์ฑ
๊ฐํผ ์ด๋</title>
</head>
<body>
<h1>์ฑ
๊ฐํผ ์ด๋ ๋ฉ์ธ ํ์ด์ง</h1>
<h2 id="content">๋ชฉ ์ฐจ</h2>
<a href="#lorem_ipsum01">๊ตญํ์์์ ์ ๊ฑฐ๊ตฌ</a><br>
<a href="html03_03sub.html">์๋ธํ์ด์ง ๊ฐ๊ธฐ</a><br><br><br>
<h2 id="inner_anchor">๊ฐ์ ๋ฌธ์์ ํน์ ์ฑ
๊ฐํผ๋ก ์ด๋ํ๊ธฐ</h2><br><br>
<p>ํ์๋ ์ฑ
์ ์ฝ์ ๋ ์ฝ์ ๋ถ๋ถ๊น์ง๋ฅผ ํ์ํด ๋๊ธฐ ์ํด ํฌ์คํธ์์ผ๋ก ์ฑ
๊ฐํผ๋ฅผ ํ๋ ์ต๊ด์ด ์๋ค.</p><br>
<p>์ด์ ๋ง์ฐฌ๊ฐ์ง๋ก ํ๋์ HTML ๋ฌธ์๊ฐ ๊ธธ์ด ์ํ๋ ์์น๋ฅผ ์ฐพ์๊ฐ๋ ค๋ฉด ์น ๋ธ๋ผ์ฐ์ ์ ์คํฌ๋กค๋ฐ๋ฅผ</p><br>
<p>์ด๋ํ์ฌ ํ๋ํ๋ ์ฝ์ด ๊ฐ๋ฉด์ ๊ทธ ์์น๋ฅผ ์ฐพ์๊ฐ์ผ ํ๋ค. ์ด์ฒ๋ผ ๋ถํธํ๊ฒ ์ด๋ํ๋ ๊ฒ ๋์ </p><br>
<p>ํ์๊ฐ ํฌ์คํธ์์ผ๋ก ์ฑ
๊ฐํผ๋ฅผ ํ๋ ๊ฒ์ฒ๋ผ HTML ๋ฌธ์์ ์ฑ
๊ฐํผ๋ฅผ ํด๋๊ณ </p><br>
<p>ํ์ดํผ๋งํฌ๋ฅผ ํตํด ์ด๋ํ๋ฉด ํธ๋ฆฌํ ๊ฒ์ด๋ค.</p><br><br><br>
<p>HTML ๋ฌธ์์ ์ฑ
๊ฐํผ๋ฅผ ํ๋ ๋ฐฉ๋ฒ์ anchor ํ๊ทธ์ name ์์ฑ์ ์ด์ฉํด</p>
<p>์๋์ ๊ฐ์ด ์ง์ ํ ์ ์๋ค.</p>
<pre> ์ฑ
๊ฐํผ ์ค์ : <ํ๊ทธ id="์์ด๋ ์ด๋ฆ">์ฑ
๊ฐํผ ์ค์ </a><br>
๋์ผ ๋ฌธ์์ผ ๊ฒฝ์ฐ : <a href="#์์ด๋ ์ด๋ฆ์ฑ
">์ฑ
๊ฐํผ ์ด๋ ์๋ด๋ฌธ</a><br>
๋ค๋ฅธ ๋ฌธ์์ผ ๊ฒฝ์ฐ : <a href="๋ฌธ์๊ฒฝ๋ก/ํ์ผ๋ช
.html#์ฑ
๊ฐํผ ์ด๋ฆ">์ฑ
๊ฐํผ ์ด๋ ์๋ด๋ฌธ</a></pre>
<pre>
<a href="#content">๋งจ์๋ก ๊ฐ๊ธฐ</a>
- HTML5์์๋ ํ๊ทธ์ id ์์ฑ์ ์ฌ์ฉํด ์ฑ ๊ฐํผ๋ฅผ ์ค์ ํ๋ค.
- ํ๊ทธ์ id ์์ฑ์ ๋ถ์ฌํ๊ณ <a>ํ๊ทธ ๋ค์ #์ ๋ถ์ด๊ณ ์ด๋ํ๋ ค๋ id๊ฐ์ ์ถ๊ฐํ๋ฉด ๋๋ค.
- ๋ค๋ฅธ html์์๋ ์ด๋ํ๋ html์ ์ฑ ๊ฐํผ๋ก ํ๋ฒ์ ์ด๋๋ ๊ฐ๋ฅํ๋ค. (๋๊ฐ์ด #์ ๋ถ์ด๋ฉด ๋๋ค.)
์ ๋ ๊ฒฝ๋ก์ ์๋ ๊ฒฝ๋ก
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์ ๋๊ฒฝ๋ก์ ์๋๊ฒฝ๋ก ๋งํฌํ๊ธฐ</title>
</head>
<body>
<h1>์ฌ๊ธฐ๋ index.html ํ์ด์ง</h1>
<b>ํ์ฌ ์์น : /HtmlStudy/HtmlStudyCh03/index.html</b>
<h2>์ ๋๊ฒฝ๋ก ๋ฐฉ์์ผ๋ก ์ฐ๊ฒฐํ๊ธฐ</h2>
<p><a href="http://127.0.0.1:5500/HtmlClass/HtmlClassCh03/main01.html">
main01.html ๊ฐ๊ธฐ</a></p>
<p><a href="/HtmlClass/HtmlClassCh03/content01/content01.html">
content01.html ๊ฐ๊ธฐ</a></p><br><br>
<h2>์๋๊ฒฝ๋ก ๋ฐฉ์์ผ๋ก ์ฐ๊ฒฐํ๊ธฐ</h2>
<p><a href="main01.html">main01.html ๊ฐ๊ธฐ</a></p>
<p><a href="content01/content01.html">content01.html ๊ฐ๊ธฐ</a></p><br><br>
</body>
</html>
- ์ ๋๊ฒฝ๋ก ๋ฐฉ์์ด๋ ์ต์์ ๋ฃจํธ์์๋ถํฐ ์์ํ์ฌ ์ฐ๊ฒฐํ ๋ฌธ์๊ฐ ์์นํ ํ์ ๊ฒฝ๋ก๋ฅผ ํ๋ํ๋ ์ง์ ํ๋ ๋ฐฉ์์ด๋ค.
- ์๋๊ฒฝ๋ก ๋ฐฉ์์ด๋ ํ์ฌ ๋ฌธ์๋ฅผ ๊ธฐ์ค์ผ๋ก ์ฐ๊ฒฐํ ๋ฌธ์๊ฐ ์์นํ ๊ฒฝ๋ก๋ฅผ ์ง์ ํ๋ ๋ฐฉ์์ด๋ค.
์์ ์๋ ๋ชฉ๋ก
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>์์ ์๋ ๋ชฉ๋ก</h1>
<h3>๋ชฉ์ฐจ</h3>
<ol style="list-style-type: upper-roman;">
<li>Html5 ๊ฐ๋ฐ ํ๊ฒฝ</li>
<li>
๊ฐ๋ฐ ํ๊ฒฝ ๊ตฌ์ฑํ๊ธฐ
<ol style="list-style-type: georgian;"">
<li>์น ๋ธ๋ผ์ฐ์ ์ค์นํ๊ธฐ</li>
<li>HTML ํธ์ง๊ธฐ ์ค์นํ๊ธฐ</li>
</ol>
</li>
<li>
HTML5์ ์๋ฐ์คํฌ๋ฆฝํธ
<ol style="list-style-type: lower-alpha;">
<li>HTNL5 ๋๋ฌ๋ณด๊ธฐ</li>
<li>์๋ฐ์คํฌ๋ฆฝํธ ๋๋ฌ๋ณด๊ธฐ</li>
</ol>
</li>
</ol>
</body>
</html>
- HTML ๋ฌธ์์์ ์ซ์๋ ์ํ๋ฒณ ๋ฌธ์๋ฅผ ์ด์ฉํด ์์ ์๋ ๋ชฉ๋ก์ ๋ง๋ค๋ ค๋ฉด <ol> (Ordered List) ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ค.
- <ol> ํ๊ทธ๋ <li> ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ ํญ๋ชฉ์ ๋์ด ํ ์ ์๋ค. <li> ํ๊ทธ๋ ์๋์ผ๋ก ์ค ๋ฐ๊ฟ ํ๋ ๊ธฐ๋ฅ์ ๊ฐ์ง๊ณ ์๋ค.
- list-style-type ์์ฑ์ ์ฌ์ฉํ์ฌ ์ํ๋ ํํ์ ๋ชฉ๋ก๋ฒํธ๋ฅผ ์ง์ ํ ์ ์๋ค.
์์ ์๋ ๋ชฉ๋ก
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<h2>์์ ์๋ ๋ชฉ๋ก</h2>
<ol style="list-style-type: lower-roman;">
<li>
์๋ฐ์คํฌ๋ฆฝํธ
<ul style="list-style-type: disc;">
<li>์๋ฐ์คํฌ๋ฆฝํธ ์๋ฒฝ ๊ฐ์ด๋</li>
<li>node.js ํ๋ก๊ทธ๋๋ฐ</li>
</ul>
</li>
<li>์๋ฐ
<ul style="list-style-type: square;">
<li>์๋ฐ์ ์ ์</li>
<li>๋๋ฅผ ์๊ทนํ๋ Java</li>
</ul>
</li>
</ol>
</body>
</html>
- ์์ ์๋ ๋ชฉ๋ก์ ์์ฑํ๋ ค๋ฉด <ul> (Unordered List) ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค.
- <ul> ํ๊ทธ๋ <li> ํ๊ทธ๋ฅผ ์ฌ์ฉํด ๊ฐ ํญ๋ชฉ์ ๋์ด ํ๋ค.
์ฉ์ด ์ ์ ๋ชฉ๋ก ๊ตฌ์ฑ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์ฉ์ด์ ์ ๋ชฉ๋ก</title>
</head>
<body>
<h1>์ฉ์ด์ ์ ๋ชฉ๋ก</h1>
<dl>
<dt>์น ํ์ค์ด๋?</dt>
<dd>์น ํ์ค์ ์๋ ์์ด๋ ์น์ ์ธก๋ฉด์ ์์ ํ๊ณ ์ ์ํ๋ ๊ณต์ ํ์ค์ด๋
๋ค๋ฅธ ๊ธฐ์ ๊ท๊ฒฉ์ ๊ฐ๋ฆฌํค๋ ์ผ๋ฐ์ ์ธ ์ฉ์ด์ด๋ค. ์ต๊ทผ์ ์ด ์ฉ์ด๋ ์น
์ฌ์ดํธ๋ฅผ ์์ฑํ๋ ๋ฐ ์ค์๋๊ฐ ๋์์ง๊ณ ์์ผ๋ฉฐ ์น ๋์์ธ, ๊ฐ๋ฐ๊ณผ
๊ด๊ณ๊ฐ ์๋ค.</dd>
</dl>
<dl>
<dt>CSS [cascading style sheets]</dt>
<dd>๊ธฐ์กด์ HTML์ ์น ๋ฌธ์๋ฅผ ๋ค์ํ๊ฒ ์ค๊ณํ๊ณ ์์๋ก ๋ณ๊ฒฝํ๋๋ฐ ๋ง์
์ ์ฝ์ด ๋ฐ๋ฅด๋๋ฐ, ์ด๋ฅผ ๋ณด์ํ๊ธฐ ์ํด ๋ง๋ค์ด์ง ๊ฒ์ด ์คํ์ผ ์ํธ์ด๊ณ
์คํ์ผ ์ํธ์ ํ์ค์์ด ๋ฐ๋ก CSS ์ด๋ค. ๊ฐ๋จํ ์คํ์ผ์ํธ๋ผ๊ณ ๋ ํ๋ค. </dd>
<dt>Ajax</dt>
<dd>WEB2.0์ ๊ธฐ๋ฐ ๊ธฐ์ ์ค ํ๋์ด๋ค.
AJAX๋ ์์ฒด๊ฐ ํ๋์ ํน์ ํ ๊ธฐ์ ์ ๋งํ๋ ๊ฒ์ด ์๋๋ฉฐ,
ํจ๊ป ์ฌ์ฉํ๋ ๊ธฐ์ ์ ๋ฌถ์์ ์ง์นญํ๋ ์ฉ์ด๋ก ๋ํ์ ์น ์ ํ๋ฆฌ์ผ์ด์
์
์ ์์ ์ํด ์ฌ์ฉ๋๋ค.</dd>
</dl>
</body>
</html>
- ์ฉ์ด ์ ์ ๋ชฉ๋ก์ ๊ตฌ์ฑํ๋ ํ๊ทธ๋ <dl> ํ๊ทธ์ด๋ค.
- ์ฉ์ด ์ ์ ํ๊ทธ๋ <dt> ํ๊ทธ์ด๊ณ , ์ฉ์ด ์ค๋ช ํ๊ทธ๋ <dd> ํ๊ทธ์ด๋ค.
์ด๋ฏธ์ง๋ฅผ ์ด์ฉํ ๋ชฉ๋ก ๊ตฌ์ฑ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>์ด๋ฏธ์ง๋ฅผ ์ด์ฉํ ๋ชฉ๋ก ๊ตฌ์ฑ</h2>
<ol style="list-style-type: decimal;">
<li>HTML5 ์ถ๊ฐ๊ธฐ๋ฅ
<ul style="list-style-image: url(images/list_type01.jpg);">
<li>๋ฉํฐ๋ฏธ๋์ด</li>
<li>์ฅ์น์ ๊ทผ</li>
</ul>
</li>
<li>HTML5 ํ๊ทธ ๊ธฐ๋ณธ</li>
<ul style="list-style-image: url(images/list_type02.png);">
<li>์
๋ ฅ ํผ ํ๊ทธ</li>
<li>๊ณต๊ฐ ๋ถํ ํ๊ทธ</li>
</ul>
</ol>
</body>
</html>
- list-style-image: url(์ด๋ฏธ์ง์์น); ๋ฅผ ์ฌ์ฉํ๋ฉด ๋ชฉ๋ก ๊ตฌ์ฑ์ ์ด๋ฏธ์ง๋ก ํ ์ ์๋ค.
'๐จ๏ธ Language > HTML, CSS, JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [CSS] ์คํ์ผ ์์ฑ (0) | 2024.08.12 |
|---|---|
| [CSS] ๋จ์์ ์ ํ์ (0) | 2024.08.12 |
| [HTML] <table>๊ณผ <form> (0) | 2024.08.08 |
| [HTML] ๋ฌธ์์ ๊ธฐ๋ณธ ๊ตฌ์กฐ (0) | 2024.08.07 |
| Web์ ์ญ์ฌ์ ์น ํ์ค์ ํ์ํ ๊ธฐ์ (0) | 2024.08.07 |
