<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; chartset=utf-8">
<title>피빛하늘 블러그 소개</title>
</head>
<body>
<header>
<figure>
<img src = "hello.jpg" alt = "어서오세요 저의 소개 페이지에...">
<figcaption>어서오세요 <mark>피빛하늘</mark>블러그 소개 페이지에...</figcaption>
</figure>
</header>
<section>
<article>
<h3>피빛하늘 블러그의 탄생...</h3>
<p>피빛하늘 블러그는 2008년 2월 그냥... 취미로 만들어진 블러그 입니다. 처음에는 저의
개인적인 내용들이 올라오다가... 3월에 대학에 진학하게 되죠... 대학에서 배운 내용을 어딘가에
저장해놓고, 제 지식을 왠 만하면 다 올리고 싶어서 이렇게 발전하게 되었죠...</p>
</article>
<article>
<h3>현 단계에서의 단순 계획...</h3>
<figure>
<img src = "plan.jpg" alt = "단순 계획 입니다.">
<figcaption>이대로만 진행 되었으면 좋겠내요...</figcaption>
</figure>
</article>
</section>
<footer>
<p>이 문서는<time datetime="2011-09-25T10:54">2011년 09월 25일</time>
에 작성되었습니다.</p>
에 작성되었습니다.</p>
<address>abc123@zyx.com</address>
</footer>
</body>
</html>
-------------------------------------------------------------------------------------------------
새로 나온 주된 태그들입니다.
1. <figure>/<figcaption>
- <figure> : 설명글을 붙일 대상을 지정
- <figcaption> : <figure>로 지정된 대상에 실질적인 설명을 붙이는 테그
- 현재 낮은 버전의 브라우져를 사용하고 있다면, 스타일값에 다음 값을 지정해줘야한다.
> figcaption{display:block;}
- HTML 5.0 구현시에는 파이어폭스나 크롬을 사용하기 바란다. IE에선 아직 지원 안해주는 것이 있다.
> figcaption 테그가 IE에서 약간 버그를 일으킨다.(그림 옆으로 설명이 붙음)
2. <mark>
- mark 태그는 그간 span이나 div태그에 아이디값을 주워 특정 글자를 강조해 주는 역할을 대신 해준다.
- 위의 그림에서 "피빛하늘" 이란 것에 mark값이 들어 간 것이다.
- style(css)에서 얼마든지 색상 및 글자 체변 경이 가능하다.
3. <time>
- 날짜와 시간 정보를 표현할 수 있는 마이크로 포멧 태그이다.
- 태그 구조 : <time datetime="yyyy-mm-dd" pubdate>yyyy년 mm월 dd일</time>
> pubdate는 웹페이지 또는 기사가 작성된 시간을 의미한다.
(article내에선 기사의 article 밖에선 웹의...)
> yyyy년 mm월 dd일은 사용자 마음대로 변경이 가능하다.
(11년 9월 25일 / 9월 25일 / 9.25 / ... )
- 또한, 시간도 추가할수 있는데 yyyy-mm-dd뒤에 T를 붙인후 HH:MM:SS 형식으로 해주면된다.
> <time datetime="yyyy-mm-ddTHH:MM:SS" pubdate>yyyy년 mm월 dd일</time>
4. <address>
- 웹페이지의 연락처 정보를 저장
- 이텔릭체(기울어진글씨)로 출력된다.
※ 마이크로 포멧이란...
- 사용자의 별도 정보
> 연락처, 메일주소, 날짜등...
의미가 바뀐 태그들
1. small 태그
- 글자를 작게 표현하기 위해서 사용되지 않는다.
- 해당 글자가 포커스를 받지 못하게 지정해주는 역할로 변경되었다.
2. hr 태그
- 웹페이지에서 주제가 바뀔때 사용한다.
-------------------------------------------------------------------------------------------------
새로 나온 주된 태그들입니다.
1. <figure>/<figcaption>
- <figure> : 설명글을 붙일 대상을 지정
- <figcaption> : <figure>로 지정된 대상에 실질적인 설명을 붙이는 테그
- 현재 낮은 버전의 브라우져를 사용하고 있다면, 스타일값에 다음 값을 지정해줘야한다.
> figcaption{display:block;}
- HTML 5.0 구현시에는 파이어폭스나 크롬을 사용하기 바란다. IE에선 아직 지원 안해주는 것이 있다.
> figcaption 테그가 IE에서 약간 버그를 일으킨다.(그림 옆으로 설명이 붙음)
2. <mark>
- mark 태그는 그간 span이나 div태그에 아이디값을 주워 특정 글자를 강조해 주는 역할을 대신 해준다.
- 위의 그림에서 "피빛하늘" 이란 것에 mark값이 들어 간 것이다.
- style(css)에서 얼마든지 색상 및 글자 체변 경이 가능하다.
3. <time>
- 날짜와 시간 정보를 표현할 수 있는 마이크로 포멧 태그이다.
- 태그 구조 : <time datetime="yyyy-mm-dd" pubdate>yyyy년 mm월 dd일</time>
> pubdate는 웹페이지 또는 기사가 작성된 시간을 의미한다.
(article내에선 기사의 article 밖에선 웹의...)
> yyyy년 mm월 dd일은 사용자 마음대로 변경이 가능하다.
(11년 9월 25일 / 9월 25일 / 9.25 / ... )
- 또한, 시간도 추가할수 있는데 yyyy-mm-dd뒤에 T를 붙인후 HH:MM:SS 형식으로 해주면된다.
> <time datetime="yyyy-mm-ddTHH:MM:SS" pubdate>yyyy년 mm월 dd일</time>
4. <address>
- 웹페이지의 연락처 정보를 저장
- 이텔릭체(기울어진글씨)로 출력된다.
※ 마이크로 포멧이란...
- 사용자의 별도 정보
> 연락처, 메일주소, 날짜등...
의미가 바뀐 태그들
1. small 태그
- 글자를 작게 표현하기 위해서 사용되지 않는다.
- 해당 글자가 포커스를 받지 못하게 지정해주는 역할로 변경되었다.
2. hr 태그
- 웹페이지에서 주제가 바뀔때 사용한다.