'WebFont-end/HTML5'에 해당되는 글 12건

  1. [HTML5] HTML5 시멘틱 구조 태그
  2. [HTML5] DTD(Doctype)

[HTML5] HTML5 시멘틱 구조 태그


HTML5 시멘틱 구조 태그



<header>

이 요소는 웹페이지 일부분의 머리글을 정의하는데 사용되며 전체 페이지에서는 <article> 요소나 <section> 요소를 사용한다.


<nav>

이 요소는 웹페이지의 기본 탐색 링크를 위한 컨테이너이다. 링크로 구성된 모든 그룹에는 이 요소를 사용하지 말아야하며 주요 탐색 블록에만 사용해야 한다. <footer> 요소에 탐색 링크가 있는 경우에는 <footer> 요소만으로도 충분하므로 <nav> 요소로 이 탐색 링크를 둘러쌀 필요가 없다.


<aside>

제목과 부제가 모두 있는 경우에는 페이지, 기사 또는 섹션에 둘 이상의 표제가 필요할 수도 있다. 예를 들면, 본 튜토리얼에는 제목과 부제가 있으며 각각 "HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기"와 "HTML5로 canvas와 video 요소 구현하기"이다. 주제와 부제에 각각 <h1> 요소와 <h2> 요소를 사용하여 <hgroup> 요소로 둘러쌀 수 있다.


<hgroup>

이 요소는 새로 추가된 것으로 사이드바 주변에 있는 컨텐츠와는 별도로 다루어야 하는 기타 컨텐츠와 사이드바를 마크업하는 데 사용한다. 이러한 예로는 광고 블록이 있다.


<section>

이 요소는 문서나 애플리케이션의 섹션, 즉 기사나 튜토리얼의 장 또는 섹션을 나타낸다. 예를 들면, HTML5에서는 독자가 현재 읽고 있는 섹션이 <section> 요소로 둘러싸인다. 반드시 그런 것은 아니지만 일반적으로 <section> 요소에는 머리글이 있다. 예를 들면, 현재 읽고 있는 섹션의 머리글에는 "시맨틱 요소"라는 텍스트가 포함되어 있다.


<article>

<article> 요소는 뉴스항목, 블로그 포스트 또는 설명과 같이 자체적으로 배포될 수 있는 페이지에 있는 개별 항목을 정의하는 데 사용된다. 이러한 항목은 일반적으로 RSS 피드를 사용하여 신디케이트된다.


<footer>

<header> 요소와 마찬가지로 이 새 요소는 페이지 일부분의 바닥글을 정의한다. 페이지나 기사, 섹션의 끝에는 바닥글이 있어서는 안되지만 일반적으로는 그렇게 한다.


'WebFont-end > HTML5' 카테고리의 다른 글

[HTML5] 아이프레임과 프레임  (0) 2014.12.20
[HTML5] <meta> 태그  (0) 2014.12.20
[HTML5] 이스케이핑  (0) 2014.12.20
[HTML5] URL  (0) 2014.12.20
[HTML5] DTD(Doctype)  (0) 2014.12.20

[HTML5] DTD(Doctype)


DTD(Doctype)


1. 요약

Document Type Definition. 문서의 형식을 지정한다.--> 해당 문서가 어떤 표준(스펙)을 따르는지 지정하는 것을 말한다.

웹 문서의 시작을 알려주는 <html> 보다 먼저 사용하는 것이 '문서 유형'을 지정하는 <!doctype> 태그이다. 문서 유형은 웹 브라우저에서 "이제부터 처리할 문서는 HTML 문서이고 어떤 유형을 사용했으니 그 버전에 맞는 방법으로 해석하라"고 알려주는 것이다.

HTML4에서는 문서 유형을 설정하는 것이 까다로워서 아예 문서 유형을 지정하지 않은 문서도 많았다. 문서 유형을 지정하지 않을 경우에는 브라우저에서 웹 문서를 로딩할 때 관용 모드(quirks mode)로 인식하게 된다.

관용 모드는 아주 오래된 브라우저에서도 볼 수 있도록 하는 유형이기 때문에 웹 표준은 고려되지 않는다. 또한 웹 문서 제작자가 의도한 대로 결과 화면이 나오지 않을 수도 있다.


2. 문법

HTML 3.2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">


엄격모드: HTML4 문법을 정확히 지켜야 하는 문서 유형이다.

HTML 4.01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


호환모드: 표준 규약의 변형을 어느 정도 허용하는 유형이다.

HTML 4.01 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"    "http://www.w3.org/TR/html4/loose.dtd">


프레임세트 모드: 프레임세트란 웹 브라우저 화면을 분할해서 화면마다 다른 웹 문서를 표시하도록 하는 방법이다.

HTML 4.01 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"    "http://www.w3.org/TR/html4/frameset.dtd">


HTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


XHTML Basic 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"  "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">



XHTML Basic 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN">


HTML5

<!DOCTYPE html>


3. 설명

웹 기술의 진보에 따라 HTML도 변화 되는데, 변화에 따라 브라우져가 HTML을 해석하는 방식도 변화가 생겼다.

이를 극복하기 위해서 브라우져에게 해당 HTML이 어떤 표준에 따른 것인지를 알려주는 것을 DTD(Document Type Definition)이라고 한다.

DTD는 문서의 제일 위에 위치한다. 

example1. HTML5의 doctype를 적용한 웹페이지. 

<!DOCTYPE html>

<html>

    <head>

        <title>DTD</title>

    </head>

    <body>

        Hello, HTML5! 

    </body>

</html> 




'WebFont-end > HTML5' 카테고리의 다른 글

[HTML5] 아이프레임과 프레임  (0) 2014.12.20
[HTML5] <meta> 태그  (0) 2014.12.20
[HTML5] 이스케이핑  (0) 2014.12.20
[HTML5] URL  (0) 2014.12.20
[HTML5] HTML5 시멘틱 구조 태그  (0) 2014.12.20