HTML 기초 태그 (3) 이미지와 멀티미디어

텍스트만으로는 불충분한 설명을 이미지, 동영상, 사운드 등을 통해서 전달할 수 있다. 

이미지 요소는 <IMG>,비디오 요소는 <VIDEO>, 오디오 요소는 <AUDIO>를 사용한다.

 

1.<IMG SRC = ""  ALT="" / >

See the Pen PMJMwj by ++EXP (@pp_exp) on CodePen.

 

 

<IMG>는 이미지를 출력할 때 쓰인다. SouRCe 속성으로 이미지 경로의 값을 붙여 넣으면 된다. ALTernate 속성은 이미지가 어떠한 이유로든 출력되지 않을 경우, 혹은 시각장애인과 시각을 사용하지 않는 검색엔진을 대비하여 이미지의 설명을 추가한다. 또한, 빈 태그이므로, 스스로 닫는 표기 "/>"를 사용하여 닫는다.

 

See the Pen WVZVbz by ++EXP (@pp_exp) on CodePen.

 

 

그 외에 TITLE 속성을 사용하여 마우스 오버 시 이미지 설명을 출력하는 일도 가능하고, 보다 긴 설명글이 필요할 경우 링크로 제작하여 LONGDESC 속성을 사용할 수 있다. 

또한 WIDTH(폭)와 HEIGHT(높이)속성을 이용하여, 각각의 크기를 지정할 수 있다. CSS를 활용하기 전에, 이미지가 갖는 최소 사이즈를 설정하여 배치가 가능하다. HTML은 이 속성을 활용하여 사전에 필요한 영역 만큼 렌더링을 실시한다.  본 속성은 HTML5에 위배되지 않는다.

 

2. <VIDEO>

See the Pen QeqepV by ++EXP (@pp_exp) on CodePen.

 

 

비디오 삽입시 사용하는 태그로, <IMG>와는 다르게 닫는 태그가 있다. 출력시 사용되는 속성은 SRC로, 경로를 입력할 수 있다. 또 다른 방법은 <SOURCE> 태그를 사용하여 출력이 가능한데, 이 경우 미디어 유형이나 코덱에 따라 자원선택이 가능하다

 

CONTROLS 속성은 플레이/일시정지 버튼과 같은 비디오 컨트롤러를 표시 여부를 결정하는데 쓰인다.

이외에 다른 속성으로는 재생 준비에 관한 설정이 있다.

 

See the Pen zgEgwO by ++EXP (@pp_exp) on CodePen.

 

 

AUTOPLAY 속성은 준비되자마자 자동으로 영상이 플레이되는지 여부를 결정하는 데 쓰인다.

LOOP속성은 비디오 반복 재생 여부를 결정할 때 쓰인다.

MUTED 속성은 비디오의 소리 음소거를 결정하는 데 쓰인다.

 

See the Pen jgGgme by ++EXP (@pp_exp) on CodePen.

 

 

PRELOAD 속성은 비디오 사전 불러오기 설정에 쓰이며, 값은 "none": 비디오 파일 로드하지 않음: ,"metadata":메타데이터만 로드, "auto": 전체 파일 로드 중에서 하나를 선택할 수 있다. 단, 이 속성은 autoplay 선택 시 무시된다.

See the Pen JgrgJG by ++EXP (@pp_exp) on CodePen.

 

 

POSTER 속성은 비디오의 대기 시간 동안 출력될 화면의 이미지를 설정할 수 있다. 

 

3. <AUDIO>

See the Pen WVZVOg by ++EXP (@pp_exp) on CodePen.

 

 

오디오 삽입시 사용하는 태그로, SRC 속성을 사용하여 출력하거나, <SOURCE>속성을 사용할 수 있다. 

CONTROLS 속성으로 오디오 플레이 컨트롤러를 출력할 수 있다.

 

See the Pen ymzmow by ++EXP (@pp_exp) on CodePen.

 

 

재생 관련 속성은 <VIDEO>와 마찬가지로,  AUTOPLAY, LOOP, VOLUME이 있다. 

AUTOPLAY 속성은 준비되자마자 자동으로 재생되는지 여부를 결정하는 데 쓰인다.

LOOP속성은 반복 재생 여부를 결정할 때 쓰인다.

 

MUTED 속성은  오디오의 소리 음소거를 결정하는 데 쓰인다.

 

See the Pen RXLXLg by ++EXP (@pp_exp) on CodePen.

 

 

PRELOAD옵션을 통해 음원을 미리 다운로드할 지 정할 수 있으며, 값은 "none": 비디오 파일 로드하지 않음: ,"metadata":메타데이터만 로드, "auto": 전체 파일 로드 중에서 하나를 선택할 수 있다. 단, 이 속성은 autoplay 선택 시 무시된다.