HTML Basics
1. HTML 5์ ํ์๊ณผ ์๋ฏธ
HTML์ด๋
Hyper Text Markup Language์ ์ฝ์
Hyper Text
๊ฐ ๋ฌธ์๋ง๋ค ์ฐ๊ฒฐ๋๋ ๋งํฌ๋ค์ ๋ชจ๋ ๊ฐ์ง๊ณ ์๋ ํํ ( ๋ค์ํ ๋ฌธ์๋ค๋ก ๋์ด๊ฐ ์ ์๋ ํํ)
HTTP
: Hyper Text๋ฅผ ์ฃผ๊ณ ๋ฐ๋ ํํ
Markup
๋ฌธ์์ ๊ตฌ์กฐ๋ฅผ ์ก๋ ์์ ์ ํ๋ ๊ฒ
Markup Language๋ ์ปดํจํฐ ์ธ์ด๋ผ๋ฉด ๋น์ฐํ ์์ด์ผํ ์ฐ์ฐ ๊ธฐ๋ฅ์ด ์๊ณ , ๋จ์ํ content์ ์ฑ๊ฒฉ์ ํ์ํด์ฃผ๋ ๊ธฐ๋ฅ๋ง ์์
Web์ฉ content (๊ธ/๊ทธ๋ฆผ) ๋ฑ์ ๊ตฌ์กฐ๋ฅผ ์ง์ ํ๋ ์ปดํจํฐ ์ธ์ด
Web server์ ์ ์ฅ๋์ด Client web browser์ ์๊ตฌ์ ๋ฐ๋ผ ๋ถ๋ ค์ง๋ ๋ฌธ์
Web browser์ ๋ถ๋ ค์ง HTML์ web browser์ ์ํด ํด์๋์ด ๋ด์ฉ์ด ํ๋ฉด์ ๋ณด์ฌ์ง
HTML ํ์๊ณผ ๋ฐ์

1990๋ WWW (World Wide Web) ๊ณผ ํจ๊ป ํ์
์น์ ๋ฐ์ ์ผ๋ก ์น ๋ธ๋ผ์ฐ์ ์ ์ค์์ฑ ํ๋
โ๋ท์ค์ผ์ดํ ๋ค๋น๊ฒ์ดํฐโ์ โ๋ง์ดํฌ๋ก์ํํธ ์ธํฐ๋ท ์ต์คํ๋ก๋ฌโ์ ์์ฅ ์ ์ ์จ ์ ์์ผ๋ก HTML๊ณผ C SS์ ๋นํ์ค ์ฌํ
์๋ก์ด ์น ๋ธ๋ผ์ฐ์ ๊ฐ ๋ฑ์ฅํ๋ฉด์ ์น์ ํ์คํ ๋ ผ์
์น ํ์ค์ ๊ฐ๋ฐํ๊ณ ๋ ผ์ํ๋ฉฐ ์ ์ ํ๋ W3C(World Wide Web Consortium)
1997๋ W3C HTML3.2 ๊ถ๊ณ โ ์์ฅ ์๊ตฌ์ ์ํด ๋นํ์ค HTML ํฌํจ
1999๋ HTML 4.01 ๊ถ๊ณ โ ์์ฅ ์๊ตฌ์ ์ํด ๋ค์ํ ๋ฒ์ ๋ฑ์ฅ
2000๋ XHTML ๊ถ๊ณ โ XML์ ์๊ฒฉํจ์ ์ฃผ์ ๋ด์ฉ์ผ๋ก ํ ์น ํ์ค
W3C๋ XHTML2 ๊ฐ๋ฐ ์ถ์ง ํ๋ค ๋์ฐ HTML5๋ก ๋ฐฉํฅ ์ ํ
์ต๊ทผ Web ๋ํฅ
Ajax
: JavaScript๋ฅผ ์ด์ฉํ์ฌ web server์ ๋๊ธฐํ ๋ web์ ํ๊ณ ๊ทน๋ณต
Web 2.0
: ์ฌ์ฉ์์ ๋ฅ๋์ ์ธ ์ฐธ์ฌ์ ํธ์์ฑ์ด ๊ทน๋ํ ๋ web์ ํต์นญ
HTML5์ ํ์
๊ธฐ์กด HTML์ ํ๊ณ
์น ๊ธฐ๋ฐ ์ฌ์ ๊ณผ ๊ธฐ์ ์ ๋ฐ์ ์ ๋ชป ๋ฐ๋ผ๊ฐ HTML
๋์ ์ธ ์น์ ์ํ ํ์คํ ๋ ๊ธฐ์ ์ ์๊ตฌ
W3C์ XHTML2๋ก์ ๋ฐ์ ์๊ณ
WHATWG((Web Hypertext Application Technology Working Group) ํ์
์์ฅ ์๊ตฌ์ ๋ถ์ํ์ง ๋ชปํ๋ W3C์ ์ค๋งํ ์น ๊ด๋ จ ์ ์ฒด์ ๋จ์ฒด๊ฐ ์์ฒด์ ์ผ๋ก ๋ง๋ ์ํน ๊ทธ๋ฃน
์น ๊ธฐ์ ๊ณผ ์์ฅ์ ์๊ตฌ๋ฅผ ๋ถ์ํ์ฌHTML5 ๋ช ์ธ์ ์์ ์ฐฉ์
W3C์ HTML5 ์์ฉ
2008๋ W3C HTML5 ์ด์ ๋ฐํ
2009๋ XHTML2 ๊ฐ๋ฐ ์ค๋จ
2014๋ XHTML5 ๊ถ๊ณ ์์
HTML5์ ํน์ง
๊ธฐ์กด HTML๊ณผ์ ํธํ์ฑ ์ ์ง
์ค์ฉ์ ์ค๊ณ
: ๋์จํ ๋ฌธ๋ฒ, ํจ์จ์ ์ธ ์ถ๊ฐ ์์, ์์ ํ ๋ณด์
ํํ๊ณผ ๋ด์ฉ์ ์๋ฒฝํ ๋ถ๋ฆฌ
ํ๋ฌ๊ทธ์ธ ์์ด ๊ฐ์ข ๋ฏธ๋์ด ์ฒ๋ฆฌ ๋ฐ ๋์ ์ธ ์๋: ์บ๋ฒ์ค
์ต์ ์น ๊ธฐ์ ์์ฉ
: ์ง์ค๋ก์ผ์ด์ , ์น์์ผ, ์น์คํ ๋ฆฌ์ง, ์น์์ปค ๋ฑ
2. HTML5 ์์ํ๊ธฐ
Doctype ์ง์ ํ๊ธฐ
HTML์ ์ฌ๋ฌ ๋ฒ์ ์ด ์กด์ฌํ๋ฏ๋กDoctype์ ๋ช ์ํด์ผ ํ๋ค.
๊ธฐ์กด Doctype ์ ๋งค์ฐ ๊ธธ๊ณ ๋ณต์กํ DTD๋ฅผ ๋ช ์ํด์ผ ํ์๋ค.
HTML5์ ์ค์ฉ์ฑ ์์น์ผ๋ก ์ธํด ์งง์์ก๋ค.
<!DOCTYPE html>
HTML ์์ฑ ๊ท์น
HTML์ ๋งํฌ์ ๋ช ๋ น์ ์์๋ผ ๋ถ๋ฅธ๋ค.
HTML์ ๋์๋ฌธ์๋ฅผ ๊ตฌ๋ถํ์ง ์๋๋ค.
์์๋ ์ฝํ ์ธ ์ ๊ตฌ๋ถ์ ์ํด์ ๊บฝ์ ๋ก ๋๋ฌ์ผ๋ค. โ
ํ๊ทธ
<p>, <a>, <div>
์์ํ๊ทธ์ ๋ง์นจํ๊ทธ๋ก ์์์ ๋ฒ์๋ฅผ ์ง์ ํ๋ค.
<p>์ด๊ฒ์ ๋จ๋ฝ ์
๋๋ค.</p>
๋ง์นจํ๊ทธ๊ฐ ์์ด ๋จ๋ ์ผ๋ก ์ฌ์ฉ๋๋ ์์๋ ์๋ค.
<br>, <img>, <meta>
์์์ ์์ฑ์ ์์ฑ๋ช = โ์์ฑ๊ฐโ ํ์์ผ๋ก ๊ธฐ์ ํ๋ค.
<img src=โimg/logo.jpgโ alt=โCompany Logoโ>
HTML์ ๊ตฌ์กฐ

<!Doctype html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<H1>
Welcome, y'all!
</H1>
</body>
</html>
<html>
์ HTML ์ฝ๋ ์ ์ฒด๋ฅผ ๊ฐ์ผ๋ค.HTML์
<head>
์<body>
๋ถ๋ถ์ผ๋ก ๋๋๋ค.<head>
๋ ๋ฉํ๋ฐ์ดํฐ์ ์คํฌ๋ฆฝ, CSS๋ฑ์ด ์์นํ๋ค. (์ธ๋ถ ํ์ผ ์ฐ๊ฒฐ)<body>
๋ถ๋ถ์ ์ฝํ ์ธ ๊ฐ ๋ด๊ธฐ๋ ๊ณณ์ผ๋ก ์น ๋ธ๋ผ์ฐ์ ์ ํ์๋๋ค.
3. <head>
์ค์
<head>
์ค์
ํ์ดํ ์ง์
HTML ํ์ผ์ ์ ๋ชฉ์ผ๋ก ์น ๋ธ๋ผ์ฐ์ ํ์ดํ์ ๋ํ๋๋ค.
<title>์น ํ์ด์ง ์ ๋ชฉ</title>
๋ฌธ์ ์ธ์ฝ๋ฉ
์ฌ์ฉํ๋ ํ ์คํธ ์๋ํฐ์ ๋ฌธ์ ์ธ์ฝ๋ฉ๊ณผHTML์ ๋ฌธ์ ์ธ์ฝ๋ฉ๊ณผ ๋์ผํด์ผ ์น ๋ธ๋ผ์ฐ์ ์์ ์ณ๋ฐ๋ฅด ๊ฒ ํ์๋๋ค.
์ ๋์ฝ๋์ธ UTF-8๋ก ์ง์ ํ๋ค.
๋ฉํ๋ฐ์ดํฐ
๋ฉํ๋ฐ์ดํฐ๋ฅผ ๊ธฐ์ ํ๋ฉด ์น ๊ฒ์์ ์ ๋ฆฌํ๋ค.
HTML์ ๋ํ ์ ๋ณด๋ฅผ ๊ธฐ๋กํ ์ ์๋ค.
๋ฉํ๋ฐ์ดํฐ ๊ธฐ์ ๋ฐฉ๋ฒ
<meta name="description"content="HTML5 ์ Javascript ํ์ต์ฝํ
์ธ ">
<meta name="keywords" content="HTML5, CSS, JavaScript">
<meta name="author"content="Lee HaeBum">
<meta name=โcopyrightโ content=โยฉ2012 Lee HaeBumโ>
<meta name=โreply-toโ content=gomtomi@imacca.com>
<meta name=โdateโ content=โ2012-05-30T12:35:20+09:00โ>
๋ฉํ ๋ฐ์ดํฐ๋ฅผ ํํํ๋ ์๋ก์ด ๊ท์ฝ, Open Graph Protocol
Open Graph Protocol
HTML ๋ฌธ์์ meta data๋ฅผ ํตํด ๋ฌธ์์ ์ ๋ณด ์ ๋ฌ
Facebook์์ ๋ง๋ค์์ผ๋ฉฐ, meta ์ ๋ณด์ ํด๋นํ๋ ์ ๋ชฉ, ์ค๋ช ๋ฑ์ ์ธ ์ ์๋๋ก ์ ์
ex)
<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
The following properties are optional for any object and are generally recommended:
og:audio
- A URL to an audio file to accompany this object.og:description
- A one to two sentence description of your object.og:determiner
- The word that appears before this object's title in a sentence. An enum of (a, an, the, "", auto). Ifauto
is chosen, the consumer of your data should chose between "a" or "an". Default is "" (blank).og:locale
- The locale these tags are marked up in. Of the formatlanguage_TERRITORY
. Default isen_US
.og:locale:alternate
- An array of other locales this page is available in.og:site_name
- If your object is part of a larger web site, the name which should be displayed for the overall site. e.g., "IMDb".og:video
- A URL to a video file that complements this object.
Semantic Tag
HTML์์ ์๋ฏธ๋ก ์ ์์๋ฅผ ๋ด์ tag๋ค์ ๋ฑ์ฅ -
<div>
๋ฅผ ์ฐ์ง ์๋๋ค!๋ํ์ ์ธ Tag๋ค
header
: ๋ฌธ์ ์ ์ฒด๋ section์ header (๋จธ๋ฆฟ๋ง ๋ถ๋ถ)nav
: navigationaside
: side์ ์์นํ ๊ณต๊ฐ, main content์ ๊ด๋ จ์ด ์ ์ contentsection
: ๋ฌธ์, page, site ์์์ ๋ ๋ฆฝ์ ์ผ๋ก ๊ตฌ๋ถ๋๋ ์์ญfooter
: ๋ฌธ์ ์ ์ฒด๋ section์ footer (๋ง์ง๋ง ๋ถ๋ถ)
๊ฐ๋ฐ์ ๋ฐ ์ฌ์ฉ์ ๋ฟ๋ง ์๋๋ผ ๊ฒ์์์ง ๋ฑ์ ์๋ฏธ ์๋ ์ ๋ณด์ ๊ทธ๋ฃน์ tag๋ก ํํ
๋จ์ํ ๊ตฌ์ญ์ ๋๋๋ ๊ฒ ๋ฟ๋ง ์๋๋ผ ์๋ฏธ๋ฅผ ๊ฐ์ง๋ tag๋ค์ ํ์ฉํ๊ธฐ ์ํ ๋ ธ๋ ฅ
Non-semantic ์์๋
div
,span
๋ฑ์ด ์์ผ๋ฉฐ,h1
,table
tag๋ค๋ semantic tag๋ก ๋ณผ ์ ์์๊ฒ์ ์์ง ์ต์ ํ (SEO : Search Engine Optimizaito) ๋ฅผ ์ํด์๋ meta tag, semantic tag๋ฑ์ ํตํ markup์ ํจ๊ณผ์ ์ผ๋ก ํ ํ์๊ฐ ์์!
4. ์ธ๋ถ ํ์ผ ์ฐ๊ฒฐ
HTML๊ณผ ํจ๊ป ์ฌ์ฉ๋๋ CSS์ ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ค๋ฅธ ํ์ผ๋ก ๋ถ๋ฆฌํจ์ด ์์น์ด๋ค.
์ธ๋ถ CSS ํ์ผ ์ฐ๊ฒฐ
<link rel=โstylesheetโ href=โcss/style.cssโ>
์ธ๋ถ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ ์ฐ๊ฒฐ
<script src="js/script.js"></script>
HTML5์์ ๊ธฐ์กด HTML๊ณผ ๋ฌ๋ผ์ง meta์์์ Empty ์์๋?
meta ์์๋ ์ง๊ธ๊น์ง์ HTML์์์ ๋ค๋ฅด๊ฒ ์์ ์์๋ง์ ๊ฐ์ง๊ณ ๋งบ์ ์์๋ ์กด์ฌํ์ง ์์
๊ธฐ์กด HTML ์์๊ฐ web browser์ ํด๋น content๊ฐ ์ด๋ค ๊ตฌ์กฐ์ ์๋ฏธ๋ฅผ ๊ฐ๋์ง ์๋ ค์ฃผ๋ ์ญํ ์ ํ๋ค๋ฉด meta ์์๋ web browser์๊ฒ ๋ฌธ์ ์ ๋ณด๋ฅผ ์๋ ค์ฃผ๋ ์ญํ ์ ํจ
์ผ๋ฐ์ ์ธ HTML ์์๊ฐ ๋ด์ฉ์ ๊ฐ์ธ๋ ํ์์ด๋ผ๋ฉด meta ์์๋ ์์ฑ๊ณผ ์์ฑ ๊ฐ์ ์ ๋ณด๋ฅผ ๋ด๊ณ ์์ ๋ฟ ๋ด์ฉ์ ๊ฐ์ธ๋ ๊ฒ์ ์๋
๊ทธ๋์ ๋ด์ฉ์ ๊ฐ์ง๊ณ ์์ง ์์ ์์, ์ฆ Empty ์์๋ผ๊ณ ๋ถ๋ฆ
Empty ์์์๋
img
,area
,br
,hr
,input
๋ฑ์ด ์์
Last updated
Was this helpful?