728x90
๐์ฐธ๊ณ . HTML ํ๊ทธ์ ์ค๋ช
1.1 HTML ๊ธฐ๋ณธ๊ตฌ์กฐ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html><!DOCTYPE html>: ์น ๋ฌธ์์ ์ ํ์ ์ง์ . ํ์ฌ ๋ฌธ์๊ฐ HTML5๋ก ์์ฑํ ์น ๋ฌธ์<html></html>: ์น ๋ฌธ์์ ์์๊ณผ ๋์ ๋ํ๋ด๋ ํ๊ทธ<head></head>: ์น ๋ธ๋ผ์ฐ์ ์ ๋ฌธ์ ์ ๋ณด๋ฅผ ์๋ ค์ฃผ๋ ํ๊ทธ<body></body>: ์ค์ ๋ก ์น ๋ธ๋ผ์ฐ์ ํ๋ฉด์ ๋ํ๋๋ ๋ด์ฉ
1.2 ํ๊ทธ ์ ํ๊ทธ
<meta>: ๊ธ์ ์ธ์ฝ๋ฉ, ์น ๋ฌธ์์ ํค์๋, ์ค๋ช , ์์ ์๋ ์์ฑ์ ๋ฑ์ ๋ฉํ๋ฐ์ดํฐ ์ง์ <title>: ํด๋น ๋ฌธ์์ ์ ๋ชฉ<style>: ํด๋น ๋ฌธ์์ ์คํ์ผ ์ ๋ณด ์ ์<script>: ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ฐ์ ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ์คํฌ๋ฆฝํธ ์ ์<link>: ํด๋น ๋ฌธ์์ ์ธ๋ถ ์์ค(external resource) ์ฌ์ด์ ๊ด๊ณ ์ ์
2.1 ๋ด์ฉ ์ ๋ ฅ
<h1>~<h6>: ์ ๋ชฉ<p>: ๋ฌธ๋จ<br>: ํ ๋ฐ๊ฟ<hr>: ์ํ ๊ฐ๋ก์ ์ ์. ์ฝํ ์ธ ๋ด์ฉ์์ ์ฃผ์ ๊ฐ ๋ฐ๋ ๋ ์ฃผ๋ก ์ฌ์ฉ<blockquote>: ์ธ์ฉ๋ธ๋ก
2.2 ํ ์คํธ ํจ๊ณผ
<b>,<strong>: ๊ตต๊ฒ<i>,<em>: ๊ธฐ์ธ์<u>: ๋ฐ์ค<s>: ์ทจ์์
2.3 ๋ชฉ๋ก ์ ๋ ฅ
<ol><li>: ์์ ์๋ ๋ชฉ๋ก (1. 2. 3. ...)start: ์์ ๋ฒํธ ์ค์ type: ์ซ์, ์๋ฌธ ์๋ฌธ์(a), ์๋ฌธ ๋๋ฌธ์(A), ๋ก๋ง์ซ์ ์๋ฌธ์(i), ๋ก๋ง์ซ์ ๋๋ฌธ์(I)
<ul><li>: ์์ ์๋ ๋ชฉ๋ก<dl>: ์ค๋ช ๋ชฉ๋ก<dt>: ์ฉ์ด<dd>๋ด์ฉ
2.4 ํ ์ ๋ ฅ
<table><caption>- ํ์ ๋ง๋๋
<tr>๊ณผ ์ ์ ๋ง๋๋<th><td>- ํ ๋ณํฉ
rowspan - ์ด ๋ณํฉ
colspan
- ํ ๋ณํฉ
- ํ์ ๊ตฌ์กฐ๋ฅผ ์ง์ ํ๋
<thead><tbody><tfoot> - ์ด์ ๋ฌถ์ด์ฃผ๋
<col><colgroup>: ํน์ ์ด์ ์คํ์ผ์ ์ง์
<table>
<caption>์ ๋ฌผ์ฉ๊ณผ ๊ฐ์ ์ฉ ์ํ ๊ตฌ์ฑ</caption>
<colgroup>
<col style="background-color: #eee;"> /* 1 ํ */
<col> /* 2 ํ */
<col span="2" style="width: 150px;"> /* 3,4 ํ */
</colgroup>
</table>
2.5 ์ด๋ฏธ์ง ์ฝ์
<img>-srcaltwidthheight2.6 ์ค๋์ค์ ๋น๋์ค ์ฝ์<img src="์ด๋ฏธ์ง ํ์ผ ๊ฒฝ๋ก: alt="๋์ฒด์ฉ ํ ์คํธ"><object>: ์ค๋์ค, ๋น๋์ค, PDF ๋ฑ ๋ค์ํ ๋ฉํฐ๋ฏธ๋์ด ํ์ผ ์ฝ์<embed>: HTML ์ด๊ธฐ ๋ฒ์ ๋ถํฐ ์ฌ์ฉํด์ ๋๋ถ๋ถ ๋ธ๋ผ์ฐ์ ์์ ์ฌ์ฉ ๊ฐ๋ฅ
<object data="ํ์ผ" width="๋๋น" height="๋์ด"> </object>
<embed src="ํ์ผ๊ฒฝ๋ก" width="๋๋น" height="๋์ด"><audio>: ๋ฐฐ๊ฒฝ์์ ์ด๋ ํจ๊ณผ์ ๋ฑ ์ค๋์ค ํ์ผ ์ฝ์<video>: ๋น๋์ค ํ์ผ ์ฝ์controls: ํ๋ ์ด์ด ํ๋ฉด์ ์ปจํธ๋กค ๋ฐ ํ์autoplay: ์ค๋์ค๋ ๋น๋์ค ์๋ ์คํloop: ๋ฐ๋ณต ์ฌ์muted: ์๋ฆฌ์ ๊ฑฐpreload: ๋ก๋ฉ๋ฐฉ๋ฒwidthheightposter="ํ์ผ์ด๋ฆ": ๋น๋์ค ์ฌ์๋๊ธฐ ์ ํฌ์คํฐ
์ค๋์ค ํ์ผ์ ๋ฐฐ๊ฒฝ ์์
์ฒ๋ผ ์ฌ์ฉํ๋ ค๋ฉด <audio> ํ๊ทธ์์ autoplay ์์ฑ๊ณผ loop ์์ฑ์ ์ง์
2.6 ํ์ดํผ๋งํฌ ์ฝ์
<a>hreftarget="_blank": ๋งํฌ๋ฅผ ์ ํญ์์ ์ด๊ธฐ
<a href="๋งํฌํ ์ฃผ์">ํ์ ํ
์คํธ ๋๋ ์ด๋ฏธ์ง</a>728x90
'WebUI > HTML5' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [HTML5 ๊ธฐ์ด] HTML ๊ธฐ๋ณธ ํ๊ทธ ๋ชจ์ II (0) | 2023.07.07 |
|---|---|
| [HTML5 ๊ธฐ์ด] ์๋ฉํฑ ํ๊ทธ (sementic tag) (0) | 2023.07.06 |
