<--시멘틱 웹 이란?-->
웹 문서를 쉽고 의미 있게 검색하기 위해 시멘틱 웹이라는 개념이 만들어 졌다. 시멘틱 웹이란, 사용자가 정보를 따라 검색하면 컴퓨터가 정보를 찾아 정보의 뜻을 이해하고, 추론까지 하는 차세대 지능형 웹 기술을 말한다.
<--구획 정의를 위한 태그-->
태그 |
설명 |
article |
여러개의 내용으로 나누는 구분을 의미한다. 본문 내의 세부 절 등에 사용 된다. |
aside |
주요 내용 이외의 문서 내용을 의미한다. 블로그의 사이드 바 등에 사용된다. |
footer |
문서의 푸처를 의미한다. 저작자나 저작권 정보 등에 사용된다. |
header |
문서의 헤더를 의미한다. 사이트소개나 로고 등에 사용된다. |
nav |
내비게이션을 의미한다. 웹 문서 내의 메뉴 등에 사용된다. |
section |
문서의 내용을 의미한다. 웹 문서의 본문 등에 사용된다. |
▲위 그림 처럼 만들어 지는게 보통이다.(저기서 바뀔 수 도있다.)
<--의미를 명확하게 하는 태그-->
태그 |
설명 |
figure |
이미지 등의 캡션 그룹을 지정한다. |
figurecaption |
이미지 등의 캡션을 지정합니다. |
time |
문서 작성 날짜와 시간을 의미한다. |
mark |
강조를 의미한다. |
<--정리 태그-->
Ex)
<p> Hello. <br> My name is Ms_Kim.
<hr>My name is luc3773.
</p>
-출력 결과-
Hello.
My name is Ms_Kim.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
My name is luck3773.
<--<div>와 <span>태그-->
<div>와 <span>태그는 웹의 내용을 나누거나 그룹을 지정한느 용도로 사용한다. 여러 그룹을 묶는 용도로 사용한다.
태그 |
설명 |
div |
웹 문서의 블록을 지정한다. |
span |
웹 문서의 인라인 블록을 지정한다. |
Ex)
▲이렇게 <div class or id로 각 문단을 나누는 것을 볼 수 있다.>
△다른 것도 보고 싶다면 자신이 원하는 웹에 들어가서 F12키를 눌러보아라.
<--목록을 만드는 태그-->
태그 |
설명 |
||
ul |
번호 없는 목록을 만든다. |
||
ol | 번호 있는 목록을 만든다. | ||
li | <ul>과 <ol>태그의 항목을 만든다. | ||
속성 | |||
|
속성 |
값 |
설명 |
ol |
reversed |
reversed |
항목의 숫자를 역순으로 표시. |
start |
숫자 |
항목의 시작 줏자를 지정. |
|
type |
1/A/a/l/i |
항목에 사용할 번호 종류 설정. |
|
li |
value |
숫자 |
번호 있는 목록에서 항목의 번호 지정. |
<!DOCTYPE html>
<html>
<head>
<title>Meta tag</title>
</head>
<body>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
<ol>
<li>Backgraund</li>
<li>Border</li>
<li>Animation</li>
</ol>
</body>
</html>
<--계층 구조를 만드는 태그-->
태그 |
설명 |
dl |
정의돈 내용을 설명하거나 계층 구조 목록은 만든다. |
dt |
설명 리스트의 이름을 표시한다. |
dd |
설명리스트에 대한 세부 내용을 표시한다. |
<--글씨를 꾸며주는 태그-->
태그 |
설명 |
b |
문자를 굵게 표시한다. |
u |
문자에 밑줄을 표시한다. |
i |
문자를 이텔릭체로 표시한다. |
sub |
아랫첨자로 표시한다. |
sup |
윗 첨자로 표시한다. |
small |
문자를 조금 작게 표시한다. |
kbd |
키보드 입력으로 표시한다. |
code |
컴퓨터의 코드로 표시한다. |
Ex)
<b>test</b><br />
<u>test</u><br />
<i>test</i><br />
hello 1<sub>test</sub><br />
hello 2<sup>test</sup><br />
<small>test</small></p>
<p><br /></p>
<p><br /></p>
test
test
test
hello 1test
hello 2test
test
▲이렇게 위 처럼 나오게 된다.
※<kbd>와 <code>는 잘 쓸줄 몰라서 쓰지는 않았다.
<--글자 위의 주석 태그-->
태그 |
설명 |
ruby |
문자 및 단어에 대한 루비 주석을 표현. |
rt |
문자에 대한 설명이나 발음을 표현 |
rp |
<ruby>태그를 지원하지 않을 경우 표시 형태를 정의 한다. |
<ruby>
Korean
<rt>코리아</rt>
</ruby>
'Programming > Html5 + CSS' 카테고리의 다른 글
| CSS3 기초 (1) | 2015.12.02 |
|---|---|
| 여러 태그03 (0) | 2015.12.02 |
| 여러 태그02 (0) | 2015.11.29 |
| HTML5기본 구조 & Meta 테그 (0) | 2015.11.25 |
| Html5+CSS3 시작! (0) | 2015.11.25 |
KimMinSung
