HTML5 - 002. Mark, Time, Meter, Progress

Notice

카테고리 및 게시글 접근방법 변경 진행 중입니⋯

Recent Posts

Recent Comments

Link

« 2024/11 »
일	월	화	수	목	금	토
					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

Tags more

Archives

Today

Total

관리 메뉴

Kinesis´s Open Document

HTML5 - 002. Mark, Time, Meter, Progress 본문

MEMO／기술 자료/HTML5

HTML5 - 002. Mark, Time, Meter, Progress

Kinesis 2012. 9. 3. 23:14

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>무제 문서</title>
<style>
	h4 { margin: 0 0 10px; }
</style>
</head>

<body>

<!-- 참고를 위해 별도로 삽입 -->
<table width="100%" style=" border:1px #CC0033 dashed; border-radius:10px; padding:20px;">
<tr><td colspan="4"><h4>Mark 요소</h4></td></tr>
<tr><td>익스플로러</td><td>파이어폭스</td><td>크롬</td><td>사파리</td><td>오페라</td></tr>
<tr><td>9.0 이상</td><td>4.0 이상</td><td>모두 지원</td><td>모두 지원</td><td>11.0 이상</td></tr>
</table>
<!-- 요까지 -->
<p><mark>mark 요소</mark>는 특정 문구나 단어를 강조하고자 할 때 사용한다.</p>
<p>시각적 효과를 위해서 <mark>CSS</mark>와 함께 사용해야 한다.</p>

<!-- 참고를 위해 별도로 삽입 -->
<table width="100%" style=" border:1px #CC0033 dashed; border-radius:10px; padding:20px;">
<tr><td colspan="4"><h4>Time 요소</h4></td></tr>
<tr><td>익스플로러</td><td>파이어폭스</td><td>크롬</td><td>사파리</td><td>오페라</td></tr>
<tr><td>미지원</td><td>미지원</td><td>미지원</td><td>미지원</td><td>미지원</td></tr>
</table>
<!-- 요까지 -->
<p>현재 시간은 <time>14:00</time> 이다.</p>
<p>광복절은 <time datetime="2013-08-15">8월 15일</time> 이다.</p>

<!-- 참고를 위해 별도로 삽입 -->
<table width="100%" style=" border:1px #CC0033 dashed; border-radius:10px; padding:20px;">
<tr><td colspan="4"><h4>Meter 요소</h4></td></tr>
<tr><td>익스플로러</td><td>파이어폭스</td><td>크롬</td><td>사파리</td><td>오페라</td></tr>
<tr><td>미지원</td><td>미지원</td><td>6.0 이상</td><td>미지원</td><td>11.0 이상</td></tr>
</table>
<!-- 요까지 -->
<p>현재 디스크 사용률은 <meter min="0" max="100" low="20" high="90" value="95">95%</meter></p>
<p>현재 디스크 사용률은 <meter min="0" max="100" low="20" high="90" value="55">55%</meter></p>
<p>현재 디스크 사용률은 <meter min="0" max="100" low="20" high="90" value="15">15%</meter></p>
<p>내가 꿈꾸던 목표까지의 진행율은 <meter min="0" max="100" optimum="60" value="48">48%</meter></p>
<p>내가 꿈꾸던 목표까지의 진행율은 <meter min="0" max="100" optimum="60" value="68" title="68">68%</meter></p>
<p>현재 다운로드 상태 : <progress min="0" max="100" value="72">72%</progress></p>

</body>
</html>