HTML 5

HTML 5 Boiler Plate

<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <title></title>
    </head>
    <body>

    </body>
</html>

HTML 기본

HTML 파일의 확장자는 .html 또는 .htm을 사용합니다.

요소 (Element)

HTML 문서는 여러 개의 HTML 요소로 이루어집니다.

<p class = "attr">
    This is a text content.
</p>

요소는 여는 태그(opening tag, <p>)로 시작하고, 닫는 태그(closing tag, </p>)로 끝납니다. 태그는 용도에 따라 여러 개의 키워드가 정의되어 있습니다. 여는 태그와 닫는 태그 사이에는 텍스트 내용이나 다른 요소들이 올 수 있으며, 여는 태그에는 속성(attribute)을 name = "value" 형식으로 지정할 수 있습니다.

HTML에서 태그의 이름과 속성의 이름은 대소문자를 구분하지 않습니다. 즉, <p>와 <P>는 같습니다. 하지만, 가급적 소문자를 사용하는 것이 좋습니다.

일반적으로, 여는 태그와 닫는 태그가 쌍을 이루지만, 몇몇 태그는 닫는 태그를 필요로 하지 않습니다. 이를 빈 요소(empty element)라고 부릅니다. 빈 요소는 여는 태그와 닫는 태그 사이에 다른 요소나 텍스트를 지정할 수 없습니다. 예를 들면, <br>, <img>, <input>, <link>, <meta>, <hr> 등이 있습니다.

<p>This paragraph contains <br> a line break.</p>

HTML에서는 <br>과 같이 사용하지만, XHTML에서는 <br />처럼 끝에 '/'를 추가합니다.

블록 레벨 vs 인라인 레벨

블록 레벨(block level) 요소는 가능한 한 최대 너비를 차지하며 시작과 끝에 줄 바꿈이 적용됩니다. <div>, <p>, <h1> ~ <h6>, <form>, <ol>, <ul>, <li> 등이 블록 레벨 요소입니다.

반면, 인라인 레벨(inline level) 요소는 다른 요소의 안에 사용되며 줄 바꿈이 적용되지 않습니다. <img>, <a>, <span>, <strong>, <b>, <em>, <i>, <code>, <input>, <button> 등이 대표적인 인라인 레벨 요소입니다.

인라인 레벨 요소의 안에 블록 레벨 요소를 지정해서는 안됩니다.

속성 (Attribute)

요소에 부가적인 속성을 지정할 때 name="value" 형식으로 사용합니다. 속성의 값은 따옴표로 둘러 싸는데, 이중 따옴표(") 또는 단일 따옴표(')를 모두 사용할 수 있지만, 일반적으로 "를 많이 사용합니다.

부울(bool) 값을 갖는 속성들은 속성 값 없이 속성의 이름만 지정합니다.

<input type="checkbox" checked>

어떤 요소들은 반드시 지정해야 하는 속성이 있습니다. 예를 들면, <a>에는 _src_와 _alt_를, <img>에는 _href_를 반드시 지정해야 합니다.

일반적인 속성

<p id="paragraph-1" class="paragraph center" title="Sample Text" style="border: 0;">
    This is a paragraph.
</p>

id

요소에 고유한 이름을 지정합니다. 한 문서 내에서 두 개 이상의 요소가 동일한 id 값을 가질 수 없습니다.
class

요소가 특정 집단에 속한 것을 의미합니다. 스타일을 정의하여 동시에 여러 개의 비슷하거나 관련된 요소를 제어할 수 있습니다. 여러 요소들이 동일한 클래스 이름을 사용할 수 있으며, 한 개의 요소가 두 개 이상의 클래스에 속할 수도 있습니다. 이때, 속성값은 공백으로 구분된 클래스 이름들의 리스트로 나타냅니다.
title

요소에 타이틀을 부여합니다. 일부 브라우저에서는 마우스를 요소 위에 올려놓을 경우 요소의 타이틀을 "툴팁"으로 보여줍니다.
style

특정 경우에 사용할 수 있도록 저자가 인라인 스타일을 정의할때 사용됩니다. 이런 경우 클래 스 스타일 정의보다 우선하여 요소에 적용됩니다. 문서의 구조와 표현의 분리라는 측면에서 가급적 자제하는 것이 좋습니다.

주석 (Comment)

\로 끝나는 부분은 주석입니다.

<!-- 
    This is a comment.
-->

HTML 페이지 구조

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>Hello, World</title>
    </head>
    <body>
        Hello, World.
    </body>
</html>

DOCTYPE

HTML 문서가 HTML 5 버전으로 작성되었음을 웹 브라우저에게 알려주는 역할을 합니다. 반드시 모든 HTML 문서의 맨 앞에 있어야 하지만, <!DOCTYPE>은 HTML 문서의 구성 요소는 아닙니다.

HTML 5에서는 다음과 같이 간단히 지정합니다. 대소문자를 구분하지는 않습니다.

<!DOCTYPE html>

문서 헤드 <head>

헤드에는 HTML 문서에 대한 정보를 기술합니다. <title>을 반드시 포함해야 합니다.

문서 바디 <body>

바디에는 웹 브라우저에 표시되는 실제 내용을 기술합니다.

5.2 KiB Raw Blame History