티스토리 뷰


* 이번에는 HTML5에 새로 추가된 문서 규격과 관련된 태그들과 문서의 구조화에 대해서 살펴보자.



2012/10/07 - [HTML5 튜토리얼] 공부 시작 - 계획

2012/10/25 - [HTML5 튜토리얼] HTML5의 등장 배경과 여러 가지 개발 환경 및 현재 현황

2012/11/03 - [HTML5 튜토리얼] 기초 및 기본 구조, 프로그래밍상 기존의 HTML과 바뀐 점


* 새로추가된 태그들

- 구조적인 표현을 위해 추가된 태그들

  • <section> 태그: 일반적인 문서나 앱의 섹션을 나타낸다. h1, h2, h3, h4, h5, h6등과 같은 태그와 함께 문서의 구조를 나타낼때 사용할 수 있다.
  • <article> 태그: 문서내의 하나의 독립적인 컨텐츠 부분을 나타낸다. 블로그 엔트리 또는 뉴스 기사 등에 사용
  • <aside> 태그: 나머지 문서와는 아주 조금, 거의 연관이 없는 컨텐츠 부분을 나타낸다.
  • <hgroup> 태그: <section>의 헤더를 나타낸다.
  • <header> 태그: 소개 또는 네비게이션 도구의 그룹을 나타낸다.
  • <footer> 태그: 섹션의 footer글 또는 작성자, 저작권 등의 정보를 나타낸다.
  • <nav> 태그: 문서의 네이게이션을 도와주는 부분을 나타낸다.
  • <figure> 태그: 컨텐츠와 연관된 미디어를 나타낸다.
  • <figcaption> 태그: 옵셔널한 캡션 태그


- 다른 새로운 태그들

  • <video> 태그: 비디오 미디어를 추가한다. 자체 UI를 제공한다.
  • <audio> 태그: 오디오 미디어를 추가한다. 자체 UI를 제공한다.
  • <source> 태그: <video>나 <audio>의 소스를 나타낸다.
  • <track> 태그: 비디오를 위한 텍스트 트랙 제공
  • <embed> 태그: 플러그인 컨텐츠를 위한 태그
  • <canvas> 태그: 동적인 비트맵 그래픽을 활용하는 캔버스 공간
  • <mark> 태그: 다른 컨텐츠와의 연관성을 문서 내부에 나타내기 위한 태그
  • <progress> 태그: 다운로드 등을 할 때 얼마나 진행되었는지 보여주는 태그
  • <meter> 태그: 디스크 사용량 등과 같은 측정치를 나타내는 태그
  • <time> 태그: 날짜와 시간을 나타내는 태그
  • <ruby>, <rt>, <rp> 태그: Ruby 를 표시하는 태그
  • <bdi> 태그: 주위와 독립적으로 흐르는 텍스트를 나타내는 태그
  • <wbr> 태그: 라인을 바꿀 수 있는 위치를 나타내는 태그
  • <command> 태그: 사용자가 호출할 수 있는 커맨드를 나타내는 태그
  • <details> 태그: 추가 정보나 사용자가 획득할 수 있는 컨트롤을 나타내는 태그
  • <datalist> 태그: input의 list 속성과 함께 콤보박스를 만드는 태그
  • <keygen> 태그: key pair를 생성하는 컨트롤 태그
  • <output> 태그: 스크립트 등을 통해 계산된 결과를 나타내는 태그
  • <input> 태그:  새로운 type들이 추가
    • tel
    • search
    • url
    • email
    • datetime
    • date
    • month
    • week
    • time
    • datetime-local
    • number
    • range
    • color


* 반대로 없어진 태그들

- 여러 가지 사용성에 문제가 있거나 CSS로 하는 것이 효율적이거나 잘 사용이 되지 않아서 몇몇 태그들은 없어졌다. 아래가 없어진 태그들이다

  • <basefont>태그
  • <big> 태그
  • <center> 태그
  • <fonr> 태그
  • <strike> 태그
  • <tt> 태그
  • <frame> 태그
  • <frameset> 태그
  • <noframes> 태그
  • <acronym> 태그
  • <applet> 태그
  • <isindex> 태그
  • <dir> 태그


: 기존 HTML4와 달라진점은 아래 사이트를 참고하면 된다.

http://www.w3.org/TR/2012/WD-html5-diff-20121025/



* 문서의 구조화

: 이번에는 위의 태그들을 이용하여 어떻게 문서를 구조화하게 되는지 알아보자. 아래는 HTML5로 만들어진 아주 간단한 사이트의 예이다. 이 사이트는 이미지 없이 오로지 HTML5와 CSS로만 디자인이 된 것이다. 이미지 또한 하나도 없다면 약간 놀랄수도 있을 것이다. 하지만 디자인 요소 보다는 HTML5의 문서 구조를 나타내는 각 태그들의 용도에 대하여 아주 잘 나타내고 있다.


: 여기서 상단의 블로그 텍스트와 메뉴는 커다란 그룹으로 묶어서 <header>를 나타내고 있고, <header> 안에는 위의 텍스트를 나타내는 <hgroup>과 메뉴를 나타내는 <nav>가 있다.


: 이런식으로 상단의 사이트를 소개하는 정보와 메뉴에 일반적으로 쓰여지는 태그이다. 그 다음에 중간에 나오는 샘플 포스트들은 각각이 <article> 태그 하나씩 나타낸다. 제목은 <header>로 나타내고 Written by 정도는 <footer>에 포함하는 정보들이다.


: <article>들의 오른쪽에 있는 트위터 내용은 컨텐츠와 아주 연관이 많지는 않는 <aside> 태그를 사용하는 위치이다. 저런식으로 사이드바를 나타내고, aside 안에 네비게이션을 하는 메뉴가 있다면 다시 <nav>  태그를 포함하기도 한다. 하나의 <aside> 안에 3개의 <section>으로 나눠서 디자인을 한 것을 볼 수 있다.


: 마지막은 3개의 <section>으로 이루어져있는 <footer>이다. 각 section은 제목과 내용 식으로 이루어져있거나 목록을 가지고 있다.



: 위의 태그들이 나오게된 배경은 기존의 웹페이지들이 가장 많이 사용하고 있는 id와 용도를 분석하여 활용도가 높은 태그들을 새로 만들게 된 것이다.


: 이러한 식으로 이전에는 <div>와 <span>으로 무의미하게 구성되어있던 문서의 구조를 각 부분을 나타내는 태그를 활용함으로써 문서를 구조화하고, 서로 다른 환경에서 비슷한 용도로 다른 표현 방식으로 표현될 수 있도록 하고 있는 것이다. 이는 향후 웹페이지의 데이터 분석 등을 더욱더 효율적으로 할 수 있도록 지원해주는 역할도 할것이라고 예상하고 있다.


* 다음에는 HTML5의 가장 핵심적인 태그 중 하나인 Canvas 태그에 대해서 알아보자.


* 다음편

2012/11/18 - [HTML5 튜토리얼] Canvas 기초 강좌

2012/11/23 - [HTML5 튜토리얼] Video와 Audio 태그 기본

2012/12/03 - [HTML5 튜토리얼] 새로운 form element 들

2016/05/04 - [HTML5 튜토리얼] Web storage (localStorage, sessionStorage)

2017/01/09 - [HTML5 튜토리얼] navigator.geolocation 위치 정보 수집 API


끝.



공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함