<--시멘틱 웹 이란?-->

웹 문서를 쉽고 의미 있게 검색하기 위해 시멘틱 웹이라는 개념이 만들어 졌다. 시멘틱 웹이란, 사용자가 정보를 따라 검색하면 컴퓨터가 정보를 찾아 정보의 뜻을 이해하고, 추론까지 하는 차세대 지능형 웹 기술을 말한다.


<--구획 정의를 위한 태그-->

 태그

설명 

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>
Korean 코리아


'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

,