[html] 시맨틱 구조, 멀티미디어 관련 태그

[html] 시맨틱 구조

 

단순한 코드의 구성이 아닌 의미를 가진 태그 모델로 구성된 구조

컴퓨터가 정보를 이해하고, 논리적인 추론까지 할 수 있는 구조를 만들기 위해 추가됨.

 

header: 페이지 제일 상단, 로고 혹은 검색창 / nav가 함께 배치되기도 함

nav: 네비게이션 즉 메뉴의 배치

section: 콘텐츠 영역, 중요 본문내용을 감싸는 공간

article: 콘텐츠의 내용이 들어가는 영역, section 태그의 하위 개념, 독립적인 내용이 담기는 태그

aside: 홈페이지 사이드에 위치하는 기타 내용 삽입/ 광고배너, 링크

footer: 웹문서의 제일 하단 영역, 홈페이지 제작정보 및 저작권 adress 같은 태그가 포함

 

div와 비슷한 성격(블럭 형태)을 갖고 있으나 검색 했을 때 상단에 표시

 

 

 

[html] 멀티미디어 관련 태그

 

웹페이지에서 표현가능한 오디오와 비디오 같은 멀티미디어 관련 태그

 

 

-html4 멀티미디어

 

object

<object date="파일의 경로" type="유형" width="넓이" height="높이" name="이름"></object>

 

embed

<embed src="파일의 경로"  type="유형" width="넓이" height="높이">

-> html5를 지원하지 못하는 브라우저에서의 미디어 파일을 재생시킬 때 사용

 

 

비디오 확장자: mp4, 오디오 확장자: mp3

(모두 지원되는 브라우저)

 

 

- audio 오디오 재생

<audio 속성><source src="경로" type="형태"></audio>

웹 페이지에 오디오를 삽입할 때 사용하는 태그 - html5 표준이 공식적으로 지원하는 오디오 파일 형식은 mp3, wav, ogg

 

src: 소스 파일의 경로

controls: 오디오의 기본적인 동작을 조절할 수 있는 패널(컨트롤 막대 표시)

loop: 오디오의 반복 재생 여부를 명시

autoplay: 오디오의 자동 재생 여부

preload: 오디오를 재생하기 전에 파일을 다운로드해 준비

muted: 오디오를 재생하지만 소리는 끔

 

        <audio controls="controls">

          <source src="audio/01.mp3" type="audio/mp3"/>

          <source src="audio/01.ogg" type="audio/ogg"/>

          <!--브라우저별 대체가 가능한 확장자 함께 사용시-->

 

 

 

- video 영상 재생

<video 속성><source src="경로" type="형태"></video>

src: 소스 파일의 경로

controls: 웹화면의 비디오 양식의 컨트롤 막대 표시

loop: 비디오의 반복 재생 여부를 명시

autoplay: 비디오의 자동 재생 여부

muted: 비디오의 소리 음소거

poster: 비디오가 다운되는동안 버튼을 누를 때까지 보일 이미지 지정

 

www.evernote.com/l/AlftiGYRfK5NM5Ftu_ZMr_wwmVXCb0ECv5w/