반응형

(주)맑은커뮤니케이션 웹퍼블리싱팀에서는 이번에 html5에서 새롭게 추가된 시멘틱태그를 소개하려고 합니다.

이전 버전의 html은 구조를 상세하게 나타내기에는 부족함이 있었습니다. div를 이용해서 구조를 나누고 스타일로 의미를 부여함으로 사용했었죠.

html5에서 추가된 시멘틱 태그는 태그를 통해서 의미를 전달 태그입니다. 랜더링했을 때 눈에 보이는 부분은 없지만 소스를 보면 코드가 한눈에 쏙~

이것는 본인이 작성하지 않는 코드라도 한눈에 알 수있으니 차후의 유지보수를 함에있어서도 편리해질 거라고 생각합니다.

지금부터 어떤 태그들이 추가가 되었는지 살펴보려고 합니다.^^

section

문서 내에서 같은 의미의 구역(제목으로 시작하는 컨텐츠)을 나눌 때 사용합니다.

  • - 섹션의 제목으로 사용되는 제목컨텐츠는 상하구조를 갖지않으며 섹션내 사용된 제목컨텐츠는 레이아웃에 영향을 주지않습니다.
  • - 신문기사와 같은 배포형은 section이 아닌 article을 사용합니다.
  • - section에 스타일이나 스크립트를 지정하려고 한다면 div를 사용하는 것이 좋습니다.

육대주

지구 위의 여섯 대륙

아시아

  • 한국
  • 일본
  • 중국

한국

  • 서울
  • 부산
  • 광주

유럽

  • 프랑스
  • 이탈리아
  • 독일

article

문서내의 독립적인 글. 블로그 글이나 뉴스 본문 등을 구성하는 섹션을 나타냅니다.

  • - article 안에서 header, footer와 같은 하나의 페이지형식으로 구현할 수도 있으며 페이지 안에서 article요소가 여러번 반복되어도 상관이 없습니다.
  • - 인용구, 광고, 네비게이션 용도로 사용할 수 있지만, 단순한 삽입구를 위해 사용하는 것은 적합하지 않습니다.
  • - article 요소가 중첩될 경우, 중첩된 article 요소는 서로 상호관련이 있어야 합니다. 예를 들어, 블로그 글을 나타내는 article 요소 내부에 블로그 방문자 댓글이나 의견을 article 요소로 넣을 수 있습니다.

My blog

The Very First Rule of Life

...

If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.

...

aside

섹션의 내용과 관련이 없지는 않지만 분리되어도 문제 없는 섹션으로 주로 사이드바 형태로 표현됩니다.

  • - aside태그는 본문 내용에 대한 추가적인 설명을 할때 사용하는 태그로 본문과 별도로 추가적인 언급을 위해서 사용합니다.

header

머릿말 태그. 소개, 또는 문서에 대한 탐색 요소의 그룹을 지정합니다.

웹퍼블리싱 - (주)맑은커뮤니케이션

위치는 홍대입구역에서 10분 거리입니다

footer

페이지 하단부의 저작권 정보나 서비스 제공자 정보 등을 제공하는 부분을 의미합니다.

Copyright 2011 by bluewave. All Rights Reserved.

menu

페이지 내 기능을 하는 버튼/링크의 모음(대표적으로는 툴바)을 나타냅니다.

  • - type은 context, toolbar, list 3가지의 type이 있고 기본값은 list.

	
  • nav

    외부 페이지로 연결되는 링크의 모음을 나타냅니다.

    
    
    반응형

    + Recent posts