HTML 3일차

1 분 소요

HTML5 시맨틱 태그와 멀티미디어

시맨틱 태그를 사용하지 않아도 웹 문서를 만들수 있고, 브라우저에 같은 모습으로 나타남. 하지만 문서를 처리할 때 쉽게 구조를 파악할 수 있고 내용을 정확히 전달할 수 있음.

<header> : 머리말 구역
- 맨 위쪽이나 왼쪽에 삽입
- 주로 검색창이나 <nav> 메뉴
- 본문 중에 머리말로도 사용
<nav> : 네이게이션 링크
- 링크 모음
- <footer>의 사이트 링크 모음 부분에도 많이 사용
- 위치에 영향을 받지 않아 필요한 곳에서 사용할 수 있음
<section> 주제별 콘텐츠 영역
- <section> 안에 또 다른 <section> 넣을 수 있음
- 제목 태그(<h1>)와 주로 함께 쓰임
<article> : 콘텐츠 내용
- 블로그 포스트, 웹 사이트 내용, 사용자가 등록한 코멘트, 독립적인 웹 콘텐츠 항목 등
- <article> 안에 <section> 을 쓰기도 함
<aside> : 본문 이외의 내용
- 사이드 바 구역
<iframe> : 외부 문서 삽입
- <iframe src="주소" width="" height="" name="인라인 프레임 이름" seamless
- seamless : 프레임의 테두리를 없애 본문의 일부처럼 보이게 함. 크롬과 사파리에서만 지원
<footer> : 제작 정보와 저작권 정보 표시
- <footer> 안에 <section>, <article> 등 다른 레이아웃 태그 모두 사용해 다양한 정보 넣을 수 있음
<address> : 사이트 제작자 정보, 연락처 정보
- 주로 <footer> 안에서 사용

플러그인 사용
- <object> : 웹 브라우저에서 직접 재싱할 수 없는 자바 애플릿, PDF 파일, 플래시 무비, 다른 HTML 문서 포함시키기 위해 사용
  - <object data="경로" type="유형" name="이름" width="" height="">
- <embed> : <object> 태그를 지원하지 않는 브라우저에서 사용
  - <embed src="경로" type="유형" width="" height="">

오디오 / 비디오 재생

<video> : 비디오 파일 삽입

<video src=”경로” 속성></video>

속성	설명
type	미디어 파일 유형
codecs	비디오 코덱 지정

<section> : 여러 미디어 파일 한번에 지정

브라우저에서 지원하는 코덱이 다르기 때문에 각 환경에서 재생할 수 있도록 여러 파일 지정

  <video controls>
  	<source src="경로" type="video/mp4">
  	<source src="경로" type="video/webm">
  	<source src="경로" type="video/ogg>
  <video>

<track> : 비디오 화면에 자막 추가

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

kind