Semantic
- '의미를 갖는다' 는 뜻으로, 각 태그가 스스로 의미를 지닌다는 뜻이다.
-> div 이지만 이름을 변경하였다고 생각하면 된다.
Semantic 의 종류
Header
- 웹페이지의 제목 및 메뉴, 회사로고, 사이트로고를 알려주는 태그로 사용
hgroup
- 제목과 부제목을 묶는 역할
Nav
- 사이트의 메뉴나 링크 같은 내비게이션 요소들이 포함
Section
- 실제 문서 내용이 들어감
Article
- 문서 내용이 많을 경우 여러 개의
<article>요소로 나눌 수 있다.
Aside
- 문서의 주요 내용 외의 내용들을 넣어 문서의 주영역 주변에 배치
p 태그
- 문단을 나누는 태그
Footer
- 작성자 정보나 저작권 정보, 또는 관련 문서 링크 등 부가 정보들을 담고 있다. 주로 문서 하단에 배치
표현을 위한 태그
- mark : 특정 텍스트를 강조하고자 할 때 사용
HTML5 에서 사라진 태그
----------------------------------------------------------------
태그 속성
----------------------------------------------------------------
<acronym> 영문 축약형 사용시, 예를 들면 NATO, NASA, GUI 등
<applet> 임베디드 애플릿 사용 시
<basefont> 글꼴의 형태 정의
<big> 글꼴의 크기 지정
<center> 텍스트 위치 중앙 정렬
<dir> 디렉토리 리스트
<font> 글꼴
<frame> 프레임
<frameset> 프레임 부속 태그
<noframes> 프레임 부속 태그
<strike> 글꼴 효과(글 취소 효과)
<tt> 글꼴 효과(타자기 효과)
<u> 글꼴 효과 언더라인
<xmp> pre 태그와 동일 효과
------------------------------------------------------------------HTML5 에서 추가된 태그
---------------------------------------------------------------------
태그 속성
---------------------------------------------------------------------
<article> 웹 페이지의 본문을 정의할 때 사용
<aside> Artice의 내용을 보충해 주는 역할을 하는 컨텐츠를
넣을 때 사용. 주로 서브 메뉴를 만들 때 사용
<audio> 오디오를 재생할 때 사용
<canvas> 그래픽을 보여줄 때 사용(스크립트 언어를 사용해서 구현)
<command> 명령 버튼을 만들 때 사용
<datalist> 드롭다운 리스트를 만들 때 사용
<details> 상세한 내용을 보여줄 때 사용
<embed> 플로그인이나 플래시 요소를 보여줄 때 사용
<figcaption> <figure>와 함께 사용되며,
<figure>의 캡션을 추가할 때 사용
<figure> 이미지나 사진, 코드 등을 보여줄 때 사용됨
<footer> 푸터를 정의할 때 사용
<header> 헤더를 정의할 때 사용
<hgroup> H1부터 H6의 그룹을 만들 때 사용
<keygen> 폼에서 사용되며,
로컬상에 보안키를 저장하고 공개키는 서버로 보냄
<mark> 텍스트에 마크펜으로 칠한 효과를 줌
<meter> 길이를 나타내줌.
시각적으로 어느 정도의 길이를 나타내는지 보여 줌
<nav> 메인 메뉴 및 서브메뉴를 정의할 때 사용
<output> 계산된 결과를 나타낼 때 사용
<progress> 다운로드 길이 몇 %가 남아있는지 표시할 때 사용
<section> 섹션을 정의할 때 사용
<source> 오디오 또는 비디오 태그와 같이 사용되며,
소스를 나타낼 때 사용
<summary> details 태그와 같이 사용되며,
상세한 내용의 요약을 나타냄
<time> 문서 내부에 시간을 정의할 때 사용
<video> 비디오를 재생할 때 사용
<wbr> 문서의 내용이 길어서 다음 라인으로 표시될 때,
영문인 경우 같은 라인에 문장을 표시해야 하는 경우 사용
------------------------------------------------------------------정리
-> ch04_semantic -> semanticTag_1.html, semanticTat_2.html
