HTML5 + CSS3 (10) HTML - 시맨틱 태그, (11) 멀티미디어

10. HTML - 시맨틱 태그

* 시맨틱 태그

- <header> 태그: 머리말 지정하기

• 사이트 전체의 제목 부분, 본문의 제목 부분, 주로 페이지 맨 위나 왼쪽에 삽입
• <form> 태그를 사용해 검색 창을 넣거나 <nav> 태그를 사용해 사이트 메뉴를 넣음

- <nav> 태그: Navigation 링크

- <section> 태그: 주제별 콘텐츠 영역

• 문서에서 주제별로 콘텐츠를 묶을 때 사용
• 섹션 제목을 나타내는 <hn> 태그가 함께 사용(h1, h2, h3...)

- <article> 태그: 콘텐츠 내용, 독립적으로 배포하거나 재사용하더라도 하나의 콘텐츠로 인식됨

- <aside> 태그: 본문 이외의 내용

- <iframe> 태그: 외부 문서 삽입

<iframe src="삽입할 문서 주소" [속성="속성값"]></iframe>

속성	설명
width, height	너비, 높이
name	이름
src	프레임에 표시할 문서의 주소
seamless	프레임의 테두리를 없애 본문의 일부처럼 보이게 한다.

- <footer> 태그: 제작 정보와 저작권 정보 표기

- <address> 태그: 제작자와 연락처 정보

- <div> 태그: 콘텐츠를 묶어 시각적 효과를 적용할 때 사용(콘텐츠에 CSS를 적용할 때 사용)

---

11. 멀티미디어

* 웹&멀티미디어

- 플러그인 프로그램

• HTML4까지 웹 브라우저에서 멀티미디어를 직접 재생할 수 없어 플러그인 프로그램을 사용
• HTML5부터 웹 브라우저에서 직접 재생

- <object>, <embed> 태그: 외부 파일 삽입

<object data="경로" type="유형" name="이름" width="너비" height="높이"></object>

만일, object를 지원하지 않는 브라우저라면 <embed>태그를 사용한다.

<embed src="경로" type="유형" width="너비" height="높이"></embed>

- 비디오 코덱

• 인코딩: 원본 비디오를 컴퓨터에서 사용할 수 있는 비디오 파일로 변환
• 디코딩: 컴퓨터 비디오 파일에 있는 비디오 정보를 가져와 플레이어에 보여주는 과정
• 비디오 코덱: 인코딩과 디코딩 수행
• 브라우저 종류에 맞는 코덱 사용

* 오디오&비디오 재생

- <audio> 태그

• 배경 음악이나 효과음 등 오디오 재생
• 대부분 브라우저에서 mp3 지원

• <audio src="오디오파일경로" [속성="속성값"]></audio>

속성	설명
autoplay	자동 재생
controls	웹 화면에 컨트롤 막대 표시
loop	오디오 반복 재생
muted	음소거
preload	재생 버튼을 눌러 재생하기 전에 파일을 다운로드해 준비

- <video> 태그

<video src="비디오파일경로" [속성="속성값"]></video>

- <track> 태그

• 비디오에 외부 자막 파일을 연결하는 태그

• <track kind="자막종류" src="경로" srclang="언어" label="제목" default>

• kind 속성

속성 값	설명
subtitles	자막
captions	캡션
descriptions	비디오 콘텐츠에 대한 설명
chapters	비디오 탐색을 위한 창 제목
metadata	비디오 콘텐츠 정보