HTML 문서 기본 구조

웹 디자인 - HTML/CSS

HTML 문서 기본 구조

  0   

본문

앞으로 자주 쓰이게 될 html문서 기본구조를 알아봅시다.

기본구조는 크게 <!doctype>, <html>, <head>, <body> 네 가지 태그가 있습니다.

 

HTML

<!doctype html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>HTML을 시작해 볼까요</title>

</head>

<body>

<h1>천천히 따라해보세요</h1>

<p>쉽게 배울 수 있는 HTML5 / CSS3<br/>

언젠간 우리도 고수가 될 수 있겠지요?</p>

</body>

</html>


 

 

 

<!doctype>은 문서유형을 지정하는 선언문

 

과거 HTML4에서는 여러가지 문서 유형이 있었지만 HTML5에서는 단 한줄로 간단하게 선언 가능

웹 브라우저는 이 doctype 선언을 확인 후 HTML5에 맞추어 문서를 해석한다.

 

 

<html> 태그는 웹 문서의 시작을 알리는 태그

 

html 문서가 시작된다는 뜻으로 lang 속성을 사용해 문서에서 사용할 언어를 지정할 수 있다. 한국어의 약자는 ko이며 lang="ko"와 같이 작성하면 된다.

<html>과 </html> 사이에는 <head> 태그와 <body> 태그가 포함된다.

 

 

<head> 태그는 브라우저의 정보를 주는 태그

 

웹 브라우저가 알아야 할 정보는 <head>에 입력된다. <title>, <meta> 등이 있다.

 

 

<body> 태그는 실제 브라우저에 표시될 내용

 

<body>에 포함된 내용은 브라우저에 실제 표시되는 내용이며 위 예제는 실제 아래와 같이 출력된다.

 

천천히 따라해보세요

쉽게 배울 수 있는 HTML5 / CSS3
언젠간 우리도 고수가 될 수 있겠지요?

댓글목록

등록된 댓글이 없습니다.

HTML 특수문자 코드 도감(엔티티코드)

HTML 문서에서 꺾쇠 괄호나 따옴표등을 태그로 인식하지 않고 그대로 화면에 표시하고 싶을때 사용하는 특수문자 코드이다.많은 특수문자 코드가 있지만 중요한 몇개를 제외하면 사용할 일이 없다. 자주 사용하는 특수문자 코드  &nbsp; &&amp; <&lt; >&gt; ©&copy; ™&trade; ↑&uarr; ↓&darr; ←&larr; →&rarr; ×&times; ÷&divide; (&#40; )&#41; "&quot; ´&acute; ·&middot; |&#124; 그외 특수문자 코드 공백&nbsp; –&ndash; −&minus; °&deg; Δ&Delta; α&alpha; À&Agrave; à&agrave; Ç&Ccedil; €&euro; —&mdash; ±&plusmn; º&ordm; Λ&Lambda; β&beta; Á&Aacute; á&aacute; ç&ccedil; ¢&cent; …&hellip; √&radic; ª&ordf; Θ&Theta; γ&gamma; Â&Acirc; â&acirc; Ð&ETH; £&pound; §&sect; ∞&infin; ¹&sup1; Ξ&Xi; δ&delta; Ã&Atilde; ã&atilde; ð&eth; ¥&yen; ¶&para; ∝&prop; ²&sup2; Π&Pi; ε&epsilon; Ä&Auml; ä&auml; Ñ&Ntilde; ¤&curren; †&dagger; ×&times; ³&sup3; Σ&Sigma; ζ&zeta; Å&Aring; å&aring; ñ&ntilde; ƒ&fnof; ‡&Dagger; ÷&divide; ¼&frac14; Φ&Phi; η&eta; Æ&AElig; æ&aelig; Š&Scaron; ©&copy; ¡&iexcl; ∼&sim; ½&frac12; Ψ&Psi; θ&theta; È&Egrave; è&egrave; š&scaron; ®&reg; ¿&iquest; ≈&asymp; ¾&frac34; Ω&Omega; ι&iota; É&Eacute; é&eacute; ß&szlig; ™&trade; ‰&permil; ≅&cong; ∴&there4; ∇&nabla; κ&kappa; Ê&Ecirc; ê&ecirc; Þ&THORN; •&bull; ·&middot; ≡&equiv; ◊&loz; ∫&int; λ&lambda; Ë&Euml; ë&euml; þ&thorn; <&lt; ‘&lsquo; ≤&le; ∩&cap; ∑&sum; μ&mu; Ì&Igrave; ì&igrave; ´&acute; >&gt; ’&rsquo; ≥&ge; ∪&cup; ∏&prod; ν&nu; Í&Iacute; í&iacute; ¨&uml; ‹&lsaquo; ‚&sbquo; ≠&ne; ∧&and; ⊆&sube; ξ&xi; Î&Icirc; î&icirc; ¸&cedil; ›&rsaquo; “&ldquo; ′&prime; ∨&or; ⊇&supe; ο&omicron; Ï&Iuml; ï&iuml; ˆ&circ; «&laquo; ”&rdquo; ″&Prime; ∈&isin; ⊂&sub; π&pi; Ò&Ograve; ò&ograve; ˜&tilde; »&raquo; „&bdquo; ℘&weierp; ∉&notin; ⊄&nsub; ρ&rho; Ó&Oacute; ó&oacute; Ґ&#1168; "&quot; ¬&not; ℑ&image; ∋&ni; ⊃&sup; ς&sigmaf; Ô&Ocirc; ô&ocirc; ґ&#1169; &&amp; ¦&brvbar; ℜ&real; ∠&ang; ⊕&oplus; σ&sigma; Õ&Otilde; õ&otilde; І&#1030; µ&micro; ­&shy; ℵ&alefsym; ♠&spades; ⊗&otimes; τ&tau; Ö&Ouml; ö&ouml; і&#1110; ‾&oline; ¯&macr; ⋅&sdot; ♣&clubs; ⌈&lceil; υ&upsilon; Ø&Oslash; ø&oslash; Ї&#1031; ⁄&frasl;  &ensp; ∗&lowast; ♦&diams; ⌉&rceil; φ&phi; Œ&OElig; œ&oelig; ї&#1111; ∂&part;  &emsp; ↵&crarr; ♥&hearts; ⌊&lfloor; χ&chi; Ù&Ugrave; ù&ugrave; Є&#1028; ⊥&perp;  &thinsp; ↑&uarr; ⇑&uArr; ⌋&rfloor; ψ&psi; Ú&Uacute; ú&uacute; є&#1108; ∅&empty; ‌&zwnj; ↓&darr; ⇓&dArr; ⟨&lang; ω&omega; Û&Ucirc; û&ucirc; ₪&#8362; ∀&forall; ‍&zwj; ←&larr; ⇐&lArr; ⟩&rang; ϑ&thetasym; Ü&Uuml; ü&uuml; ☺&#9786; ∃&exist; ‼&#8252; →&rarr; ⇒&rArr; ♀&#9792; ϒ&upsih; Ý&Yacute; ý&yacute; ☻&#9787; ∄&#8708; №&#8470; ↔&harr; ⇔&hArr; ♂&#9794; ϖ&piv; Ÿ&Yuml; ÿ&yuml; █&#9608;

HTML 문서 기본 구조

앞으로 자주 쓰이게 될 html문서 기본구조를 알아봅시다.기본구조는 크게 <!doctype>, <html>, <head>, <body> 네 가지 태그가 있습니다. HTML<!doctype html><html lang="ko"> <head> <meta charset="UTF-8"> <title>HTML을 시작해 볼까요</title> </head> <body> <h1>천천히 따라해보세요</h1> <p>쉽게 배울 수 있는 HTML5 / CSS3<br/> 언젠간 우리도 고수가 될 수 있겠지요?</p> </body></html>    <!doctype>은 문서유형을 지정하는 선언문 과거 HTML4에서는 여러가지 문서 유형이 있었지만 HTML5에서는 단 한줄로 간단하게 선언 가능웹 브라우저는 이 doctype 선언을 확인 후 HTML5에 맞추어 문서를 해석한다.  <html> 태그는 웹 문서의 시작을 알리는 태그 html 문서가 시작된다는 뜻으로 lang 속성을 사용해 문서에서 사용할 언어를 지정할 수 있다. 한국어의 약자는 ko이며 lang="ko"와 같이 작성하면 된다.<html>과 </html> 사이에는 <head> 태그와 <body> 태그가 포함된다.  <head> 태그는 브라우저의 정보를 주는 태그 웹 브라우저가 알아야 할 정보는 <head>에 입력된다. <title>, <meta> 등이 있다.  <body> 태그는 실제 브라우저에 표시될 내용 <body>에 포함된 내용은 브라우저에 실제 표시되는 내용이며 위 예제는 실제 아래와 같이 출력된다. 천천히 따라해보세요 쉽게 배울 수 있는 HTML5 / CSS3 언젠간 우리도 고수가 될 수 있겠지요?


접속자집계

오늘
57
어제
132
전체
120080