10. 멀티미디어 태그
(1) 비디오 태그
■ 기본 형식
1 | <video src="movie.mp4" width="500" height="500" controls></video> |
■ 다른 형식
1 2 3 4 5 | <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> |
- controls 속성은 비디오의 컨트롤바를 보게게해주는 속성으로 사용하지 않으면 컨트롤바가 표시되지 않음.
현재 대부분의 브라우저에서 .mp4포맷의 영상을 디코딩하는 코덱을 지원하긴 하나, 해당 코덱을 지원하지 않는 브라우저에서는 영상을 재생할 수 없음.
(2) 오디오 태그
■ 기본 형식
1 | <audio src="audio.mp3" controls></audio> |
■ 다른 형식
1 2 3 4 5 | <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio> |
- 비디오와 오디오태그의 속성은 거의 비슷하다.
경로를 정확히 작성할 경우 실행이 되나,
경로를 작성을 제대로 못할 경우와 파일의 코덱이 잘되지 않았을 경우 실행되지 않음.
11. 기타 태그
(1)인라인 요소 강조
- 디자인을 위한 요소가 아니며, 논리적 콘텐츠 표현 : 스크린리더기에서 강하게 읽어주거나 두 번 읽어줌
1 2 | <em>강조</em> <!-- 브라우저 초기값은 이탤릭체 표현 --> <strong>강조</strong> <!-- 초기값은 볼드체 --> |
이 외에도 자주 사용하지는 않지만, 알아두면 좋은 태그 몇가지를 더 소개할까 합니다.
Tag |
Description |
<em> |
강조된 텍스트로 간주. |
<strong> |
중요한 텍스트로 정의. |
| <code> | 컴퓨터 코드 일부분을 정의. |
| <samp> | 컴퓨터 프로그램에서 샘플 출력을 정의. |
<kbd> |
키보드 입력을 정의. |
| <var> | 변수를 정의. |
[출처 : w3school.com ]
클릭하시면, 직접 코드를 실행시킬 수 있습니다.
(2) 논리적인 영역쪼개기
1 | <hr /> |
- 물리적인 요소가 아님(웹접근성과 관련)
- 사이트 제작시 콘텐츠를 논리적으로 구분할 때 사용함(절취선)
- 브라우저 초기값은 가로로 구성된 선을 표기
- 스타일 제작시 선은 표현하지 않음. 결과물을 봤을 때 큰 의미가 없음.
(3) 사이트 주소 및 저작권자 표현하기
- 의미론적인 표시 : HTML5태그는 좀 더 세분화됨.
1 | <address>사이트 주소 및 연락처 적는 요소</address> |
================================
자주 사용하진 않더라도, 간단하게 기타태그를 정리해 봤습니다.
종종 재밌는 태그들이 있으면 여러분께 소개해드릴께요~
2018/07/09 - [IT/HTML] - HTML 태그 5편(div, span)