1) HTM5에 새로 추가된 주요 태그들
앞에서 살펴본 태그 외에도 HTML5에는 여러 가지 새로운 태그들이 추가되었습니다. 이 태그들 역시 태그 이름만 보고도 어떤 태그인지 쉽게 알 수 있는 시멘틱 태그입니다. 웹 문서에 그림 설명이나 하이라이트 효과, 시간, 주소 등을 삽입할 수 있는 태그들을 살펴보도록 하겠습니다.
그림에 설명글 붙이기 - <figure> 태그와 <figcaption> 태그
지금까지는 웹 문서 안의 사진이나 그림에 설명글(caption)을 넣을 방법이 없었는데 HTML5에서는 손쉽게 설명글을 넣을 수 있습니다. <figure>와 <figcaption> 태그를 사용하면 됩니다. <figure>는 설명글을 붙일 대상을 정의하는 태그이고, 무엇이든 그 대신이 될 수 있습니다. <figcaption>은 <figure>로 정의한 대상에 실질적인 설명글을 붙이는 태그입니다.
다만, <figure>로 정의했다고 해서 모든 대상에 <figcaption>을 붙여야 하는 것은 아닙니다. 그리고 <figure> 태그 안에는 <img>나 <code>처럼 설명글이 필요한 여러 가지 태그가 올 수 있지만 <figcaption>은 <figure> 태그에서만 사용할 수 있다는 것을 명심해야 합니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>figure, figcation 노드</title>
<style type="text/css">
body {
margin: 20px;
font-family: "나눔고딕", "맑은 고딕";
font-size: 0.9em;
color: #666;
}
figcation {
display: block;
}
</style>
</head>
<body>
<!-- 다음은 설명글 없이 <figure> 태그만 사용한 그림입니다. -->
<figure>
<img src="images/image1.jpg" alt="image1" />
</figure><br /><br />
<!-- 이번에는 <figcation>을 사용해서 설명글을 붙인 그립니다. 다만 현재까지의 브라우저에서는 <figcation>을 사용하기 위해서는 스타일시트에 figcation { display:block; } 스타일을 추가해야 합니다. -->
<figure>
<img src="images/image2.jpg" alt="image2" />
<figcation>사이트에서 사용된 이미지</figcation>
</figure><br><br>
<!-- <figure> 태그 안에 여러 개의 <img> 태그를 사용하면 다음과 같이 여러 장의 그림에 하나의 설명글을 붙일 수도 있습니다, -->
<figure>
<img src="images/image3.jpg" alt="image3" /><img src="images/image4.jpg" alt="image4" />
<figcation>사이트에서 사용된 이미지</figcation>
</figure>
</body>
</html>
텍스트 강조 - mark
텍스트에 형광펜으로 그은 듯한 강조 표시를 하려고 할 때 HTML4에서는 클래스 스타일을 이용했습니다. 클래스 스타일을 만든 후 그 클래스 스타일 이름을 기억했다가 필요한 부분에 <span> 태그나 <div> 태그를 이용해서 클래스 이름을 할당해 주는 식인데 주로 검색 사이트에서 검색어 부분을 강조할 때 많이 사용합니다.
하지만 HTML5에서는 <mark>라고 하는 시멘틱 태그가 새로 도입되었기 때문에 훨씬 사용이 편리해졌습니다. <mark> 태그는 CSS를 이용해 강조할 부분의 배경색이나 글자색을 지정할 수 있습니다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>mark 요소로 텍스트 강조하기</title>
<style>
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
color: #000;
}
mark {
padding: 1px;
font-weight: bold;
background: #ffffb3;
}
</style>
</head>
<body><h1>Introduction</h1>
<p><mark>"HTML5" </mark>has at various times been used to refer to a wide variety of technologies, some of which originated in this document, and some of which have only ever been tangentially related.</p>
<p>This specification actually now defines the next generation of HTML after <mark>HTML5</mark>. <mark>HTML5</mark> reached Last Call at the WHATWG in October 2009, and shortly after we started working on some experimental new features that are not as stable as the rest of the specification. The stability of sections is annotated in the margin.</p>
</body>
</html>
날짜와 시간 기록 - <time> 태그와 마이크로포맷
사용자의 전화번호나 소속 회사의 메일 주소, 행사 날짜 등과 같은 별도의 정보를 마이크로포맷(Microformats)이라고 합니다. HTML4에서는 마이크로포맷을 표현할 수 있는 기능이 없었지만 HTML5에서는 날짜와 시간 정보를 표현할 수 있는 마이크로포맷 태그인 <time> 태그를 제공합니다.
HTML4에서 포스트 날짜를 웹 문서에 삽입하려면 다음과 같이 <div> 태그를 이용해서 클래스 이름을 따로 지정해 주어야 합니다
<div class="article">
<p class="post-date">2010년 6월 10일</p>
<h2>여행 일기</h2>
</div>
하지만 HTML5에서는 <time> 태그가 이미 의미를 지니고 있기 때문에 <time> 태그에서 직접 날짜를 지정하면 브라우저에서도 바로 날짜를 인식할 수 있습니다
<time datetime="2010-06-10" pubdate>2010년 6월 10일</time>
위의 예에서 보듯이 <time> 태그는 세 개 부분으로 나눌 수 있습니다.
1) datetime="2010-06-10" : 브라우저에서 인식하는 날짜
날짜를 표시할 때는 yyyy-mm-dd 형식을 따릅니다.
2) pubdate : pubdate 속성
0 또는 1 값을 가지므로 필요할 때에만 삽입하면 됩니다.
<time> 요소가 <article> 요소 안에 포함되어 있을 경우 pubdate 속성은 해당 기사가 작성된
날짜를 나타내고, <article> 요소 안에 포함되어 있지 않으면 pubdate 속성은 웹 페이지가 작성된
날짜를 나타냅니다.
3) 2010년 6월 10일 : 브라우저 화면에 표시하는 날짜
사용자가 알아보기 쉬운 방법으로 표시하면 됩니다.
'웹코딩 > HTML5 CSS3' 카테고리의 다른 글
| HTML5 video 태그 ie 에서 실행되지 않을때 video.js 플러그인 (0) | 2016.11.03 |
|---|---|
| HTML5 비디오 요소 (0) | 2016.10.12 |
| HTML5의 시멘틱 태그 (0) | 2016.10.12 |
| HTML5의 새 요소 (0) | 2016.10.12 |
| 둥근 모서리 (0) | 2016.09.17 |
