FRONT-END/HTML


HTML5 에서의 멀티미디어 태그



HTML5 이전에 웹에서 동영상을 보거나 음악을 듣기 위해서는 어도비 플래시 플레이어나, Active X, 마이크로소프트 실버라이트, 윈도우 미디어플레이어 등의 플러그인 프로그램을 설치해야 했습니다.


그러나 모바일 기기들이 등장하고 발전하기 시작하면서 기존의 방식에 문제가 생겼습니다. (작은 저장공간에 비해 큰 용량 , 빠른 배터리 소모 등)


또한, 이 방식의 경우 미디어 파일의 확장자에 따라 다른 플러그인이 필요 했고, 이경우 여러가지의 플러그인을 모두 설치해야 했습니다.


요즘은 일반 사이트에서는 거의 보이지 않는 active X 방식도 흔히 사용되었는데, 이 경우 사용자가 원하지 않은 프로그램들이 컴퓨터에 설치 되기도 했습니다. (보안 취약)



이에 따라 HTML5는 플러그인 설치 없이도 웹브라우저에서 영상을 보고, 음악을 들을 수 있는 <video> , <audio> 태그를 지원하기 시작했습니다.


<video 태그 지원 브라우저>



Video



1. 비디오 파일 포맷과 코덱의 종류


우리가 흔히 보는 비디오 파일명을 확인해보면 보면 .mp4 .avi .wmv .mkv 등의 확장자가 붙어 있는 것을 볼 수 있습니다.

이 확장자들이 바로 비디오 파일의 포멧(형식) 에 의해 정해집니다.

비디오 파일 포맷의 종류


이렇게 다양한 비디오 파일들을 컴퓨터나 스마트폰 환경에서 재생 가능하도록 파일 포맷을 변경하거나, 용량을 줄이는 것을 인코딩(Encoding) 이라고 합니다.

또한 이 인코딩 된 비디오파일을 보여주는 과정에서는 디코딩(Decoding) 이 필요합니다.

이러한 과정을 수행하는 것이 코덱(CODEC) 입니다.


- H264

H264/AVC 또는 MPET-4 AVC 라고도 하며, 고화질의 영상을 지원하기 때문에 많은 사이트 들에서 사용하고 있습니다. 애플과 구글이 선호하는 코덱이기도 합니다.

.mp4 파일이나 .mov 파일등에 사용하고, 가장 많이 사용하는 코덱이지만 유료 코덱이라는 이유로 웹 표준으로 지정하기에는 무리가 있다는 의견이 있자 H.264의 특허권을 가지고 있는 MPEG포럼에서 HTML5 웹 표준의 용도로 사용할 경우에는 무료로 허용했습니다.


- 오그 테오라 (Ogg Theora)

H264와 달리 로열티를 지불하지 않아도 되는 오픈 소스 코덱으로 파이어폭스와 모질라가 선호하는 코덱입니다.

.ogv .ogg 파일에서 사용합니다.


- WebM

이 또한 구글에서 공개한 오픈소스 코덱으로 좋은 품질을 무료로 제공하여 발전가능 성이 높습니다.

.webm 파일에서 사용합니다.


브라우저별 코덱 지원 현황

코덱 종류 별로 브라우저 버전별 지원현황 보기

Browser

MP4(H.264) WebM(WebM) Ogg(Theora)

Internet Explorer

YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES YES YES





2. video 태그 사용방법


비디오 태그는 기본적으로 아래와 같이 사용가능합니다.


HTML

<video src="mingcho.mp4" width="450" height="320" controls > </video>


contorls 는 비디오의 컨트롤바를 보이게 해주는 속성으로 사용하지 않으면 컨트롤바가 표시되지 않습니다.

현재 대부분의 브라우저에서 .mp4 포맷의 영상을 디코딩하는 코덱 (H.264) 을 지원하기는 하지만 위와 같이 코딩하면, 해당 코덱을 지원하지 않는 브라우저에서는 영상을 재생할 수 없습니다.

위와 같은 경우에는 아래 방식을 사용 합니다.


HTML

<video> <source src="mingcho.ogv" type="video/ogg"> <source src="mingcho.mp4" type="video/mp4"> <source src="mingcho.webm" type="video/webm"> <p>당신의 브라우저는 HTML5 Video 태그를 지원하지 않습니다. </p> </video>


위와 같이 작성하면, 브라우저는 자신이 재생할 수 있는 첫번 째 파일을 재생합니다.



Audio



1. 오디오 파일 포멧과 코덱의 종류


오디오 파일역시 녹음 된 방법에 따라 포맷이 존재하며, 이러한 파일들의 인코딩 디코딩을 위해 코덱이 필요합니다. 오디오 파일 포맷의 종류


웹에서 자주 사용하는 오디오 코덱의 종류에는 크게 세가지가 있습니다.

- MPEG-1 AUDIO Layer3

우리가 잘알고있는 .mp3 파일을 사용하는데 이용되며, 로열티를 지불해야 했던 유료 코덱이였지만 2017년 4월 특허가 만료되었습니다.

MP3의 특허만료와 차세대 오디오 포맷 AAC


- 오그 보비스 (Ogg Vorbis)

역시 Ogg Theora 와 같이 오픈 소스로 무료로 사용가능하며, .ogg 나 .ogv 파일에 사용합니다.


- ACC

애플이 아이튠즈 기본 포맷으로 선정하면서 유명해진 포맷으로, 위 mp3의 특허만료와 차세대 오디오 포맷 ACC 링크를 참고하시면 ACC 포맷에 대해 더 자세히 알아보실 수 있습니다.


브라우저별 코덱 지원 현황

코덱 종류 별로 브라우저 버전별 지원현황 보기

Browser

MP3 Wav Ogg(Vorbis)

Internet Explorer

YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES




2. audio 태그 사용방법


오디오 태그는 기본적으로 아래와 같이 사용가능합니다.


HTML

<audio src="mingcho.mp3" controls> </audio>


오디오 태그 역시 비디오 태그와 마찬가지로 브라우저마다 지원하는 코덱이 조금씩 다르므로,

아래와 같이 source 태그를 사용합니다.


HTML

<video> <source src="mingcho.mp3" type="audio/mpeg"> <source src="mingcho.oga" type="audio/ogg" codecs="vorbis"> <p>당신의 브라우저는 HTML5 Audio 태그를 지원하지 않습니다. </p> </video>



Video/Audio 태그 속성



video와 audio 태그의 속성은 거의 비슷하기 때문에 같이 설명하며 각각의 속성은 위 태그들과 함께 한번만 작성합니다.

(source 태그에 각각 명시해주지 않습니다.)


로컬에서는 파일재생이 제대로 되었는데 서버에 업로드 후 재생이 안된다면, 서버 MIME TYPE의 문제일 수 있습니다. 서버관리자에게 요청하거나 서버를 직접 운영하는 경우 MIME TYPE을 추가하도록 합시당! 아파치 서버 MIME TYPE 추가하기


속성 설명
width/height 넓이값/높이값 비디오 의 넓이와 높이
src 미디어URL 멀티미디어 파일의 URL 지정
controls controls, 지정안함 각 브라우저의 컨트롤 막대를 표시.
autoplay autoplay, 지정안함 페이지가 로드될때 비디오, 오디오를 자동재생 (모바일 기기에서는 예외, 사용하지 않는 것을 권장)
preload none, metadata, auto 페이지가 열릴때 비디오를 미리 다운 받습니다.
none: 사용자가 재생버튼을 눌렀을때 다운로드를 시작합니다.
metadata: 미디어 파일 전체가 아닌 메타 정보만 다운로드 합니다.
auto: 페이지가 로드됨과 동시에 미디어 파일 전체를 다운로드 합니다 (preload 의 default 값)
muted muted, 지정안함 음소거
loop loop, 지정안함 반복 재생
poster 이미지URL 로드되기 전에 표시될 이미지 URL





HTML5 문서 기본 구조 간단 정리



HTML 형식의 문서를 작성하기 위해서는 기본적으로 HTML 문서의 기본 구조(뼈대) 를 갖춰야 합니다.

HTML 의 문서를 작성하기 위해 필수적인, 기본 구조에 대해서 간단히 정리해보는 시간을 가져보도록 합시다.





아래는 HTML문서의 기본 구조입니다.


HTML

<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML5 기본 형식 간단정리</title> </head> <body>    <p>안녕하세요!</p> </body> </html>


위와 같은 기본 구조에서 추가하고자 하는 태그들을 추가하고 CSS 스타일 까지 입히면서 점점 웹페이지의 비주얼이 완성됩니다.

그럼, 웹페이지의 기본이 되는 위의 태그들에 대해서 간단히 정리 해볼게요.



1.DTD 선언! <!doctype html>


먼저, 여러분의 문서가 HTML로 작성된 문서라는 것을 브라우저에게 알려주기 위해 DTD 선언을 해야합니다.

위와 같이 <!doctype html> 의 방식으로 사용하는 것은 HTML5의 방식인데, HTML4에서는 조금 복잡했는데 HTML5에 오면서 간단해 졌어요.




HTML4의 경우 모드마다 DTD 선언을 다르게 해줘야 했습니다.

아래 홈페이지에 가면 HTML 버전별 DTD 선언 방식을 볼 수 있는데, HTML4에서는 너무 길어서 맨날 찾아써야 해서 조금 귀찮았었는데 짧아져서 좋아요! HTML 버전별 DTD선언 보러가기


이 DTD모드를 지정하지 않을 경우에는 웹문서에서 이를 관용 모드(quirks mode)로 인식하게 되는데, 이렇게 인식될 경우 웹문서가 제작자의 의도와는 다르게 나올 수 있습니다. 또한, 이 관용모드는 오래된 브라우저 들과 호환성도 염두에 둔 모드이기 때문에 웹 표준도 고려되지 않습니다. 그러니까 꼭 선언해 줘야겠지요!




2.html태그 와 lang 속성 <html> </html>


html 태그는 doctype 선언 이후 html 문서의 시작과 끝을 알려줍니다.!

<head> 태그와 <body> 태그를 감싸는 태그입니다.


html 태그에는 lang 속성을 사용해 언어를 지정할 수 있습니다.

이 속성을 사용하지 않으면 구글의 언어별 검색에서 검색되지 않아요. 한글을 표현하고자 하는경우 lang="ko" 를 넣어주세요!

또한, 이 속성을 통해 화면 낭독기(리더기) 가 화면의 내용을 읽어 주는데, 이 속성이 지정되어있지 않으면 낭독기가 내가 문서에서 말하고자 하는 바를 표현하지 못할 수도 있습니다.


lang 속성과 스크린 리더기

lang 속성을 정확히 지정하지 않을 경우




3.head태그 <head> </head>


head 태그에는 웹 문서에서 사용하는 언어지정, 페이지 제목, 키워드, 제작자정보, 참조 스타일시트, 스크립트 참조 등 여러가지 웹문서에 대한 관련 정보들이 들어갑니다.

<body> 태그에 들어가는 친구들처럼 바로 눈으로 확인 할 수 있는 비주얼적인 아이들은 아니지만, 웹문서에 관한 중요한 정보들을 가지고 있는 태그입니다.


여기에는 다양한 메타 태그들이 들어가는데 대표적으로 문자셋 메타 태그와, 타이틀 태그에 대해서만 간략히 알아보겠습니다.




4.title태그 <title> </title>


먼저 <title> </title> 태그에 대해서 설명하자면, 정말 말그대로 페이지의 제목입니다.

브라우저에서 아래부분에 표시되는 내용



타이틀의 경우 사이트의 모든 페이지에 똑같이 넣는 경우가 있는데, 그럴 경우 화면 낭독기가 네이게이터를 읽어줄 때 사용자가 해당 페이지의 내용을 짐작하지 못해 웹 접근성 지침에 어긋납니다.

또한, 너무 긴 문장이나 기호 보다는 페이지 내용을 쉽게 짐작가능한 주요 단어를 넣는 것이 좋다고 합니다.




4.meta태그 charset 속성 <meta charset="utf-8">


charset 속성은 많은 meta태그의 속성 중 하나로 이 속성을 잘못 넣으면 문서의 한글이 다 깨지는 광경을 볼 수 있답니다.

그런의미에서 아주 중요한 태그입니다.! 


HTML4 에서는 

HTML

<meta http-equive="Content-Type" content="text/html;" charset="utf-8" />

이런 식으로 넣었었는데 이 부분도 HTML5 에서 간단해 진 부분 중 하나입니다.! 글자수가 줄었어요~~~~~♥


본론으로 돌아와서! 이 태그의 문자 셋은 주로 파일의 인코딩 방식과 같은 문자 셋으로 맞춰주어야해요!

예전에는 euc-kr 도 많이 보였었는데, 요즘은 웹에서는 대부분 다 utf-8로 사용하는 듯해요

(둘다 한글을 표현가능한 문자 셋인데, utf-8은 훨씬 더 많은 언어를 표현가능 하지만, euc-kr에 비해 리소스를 많이 잡아먹는다는 단점이 있습니다)


이 태그의 default charset 값은 utf-8 으로 이미 맞추어져있어, 메타 태그를 사용하지 않아도 한글이 깨지지 않지만 명시해 주는 것이 좋겠죠!? 파일의 인코딩 방식이 다를 수도 있고!




5.Body 태그 <body> </body>


이 태그도 <html> <head> 태그와 마찬가지로 여는 태그와 닫는 태그가 존재합니다.

앞으로 웹페이지 화면에 표시될 수많은 내용들을 모두 담아 낼 태그이기도 합니다.!!



오늘은 여기까지! 모두들 즐코하세욤 빠이!




HTML 특수 기호 엔티티 테이블




HTML 문서를 작성할 때는 문서내용과 HTML 예약 문자를 구분하기 위해서 엔티티 코드를 사용해야 합니다. 


예를들어, HTML 문서에서는 공백을 여러번 입력하더라도 한칸으로 인식하기 때문에 여러개의 공백을 나타내려면 공백을 사용하는 특수 기호를 입력해야합니다. 


또한 HTML 태그에서 사용하는 꺽쇠(<) 나 따옴표(" ") 같은 문자를 사용할 때도 특수기호를 사용해야 합니다.


공백이나 들여쓰기 같은 경우 <pre> 태그를 사용해서 표현도 가능하지만 , 간단한 html 특수기호를 나타내는 문자들을 알고있으면 편리합니다.





 문자

엔티티문자 

엔티티숫자 

설명

 공백

&nbsp; 

&#160; 

공백문자 (Inserts a non-breaking blank space)

 &

&amp; 

&#38;

앤드(Ampersand) 

"

&ldquo; 

&#147; 

겹따옴표(쌍따옴표) 시작 (Opening Double Quotes) 

"

&rdquo; 

&#148; 

겹따옴표(쌍따옴표) 끝 (Closing Double Quotes) 

'

&lsquo; 

&#145; 

홑따옴표 시작 (Opening Single Quotes) 

'

&rsquo; 

&#146; 

홑따옴표 끝 (Closing Single Quotes) 

<

&lt; 

&#60; 

~ 보다 작은 (Less than)

>

&gt; 

&#62; 

~ 보다 큰 (Greater than)

&copy; 

&#169; 

저작권 (Copyright symbol)



이 외에도 수많은 엔티티 코드들을 아래 사이트에서 확인가능합니다.

http://entitycode.com/






+ Recent posts

티스토리 툴바