HTML / Reference / video
개요
video는 HTML 문서에 동영상을 삽입하는 태그입니다. HTML5에서 추가된 것이므로, HTML5를 지원하지 않는 웹브라우저(예를 들어 IE 8 이하)에서는 작동하지 않습니다.
문법
<video autoplay controls loop muted poster="aaa" preload="bbb"> <source src="xxx" type="yyy"> zzz </video>
- autoplay : 동영상을 자동으로 재생합니다.
- controls : 재생, 정지 등 조작 메뉴를 보여줍니다.
- loop : 동영상을 반복 재생합니다.
- poster : 동영상 재생 전에 보여줄 이미지입니다.
- preload : 페이지를 열 때 무엇을 로드할지 정합니다.
- auto : 동영상, 메타데이타 모두 로드합니다.
- metadata : 메타데이타만 로드합니다.
- none : 로드하지 않습니다.
- source
- src : 동영상 위치를 입력합니다. 웹브라우저가 가장 많이 지원하는 형식은 MP4입니다.
- type : 동영상 타입을 알려줍니다. 만약 MP4 파일이라면 video/mp4라고 적습니다.
- zzz : 웹브라우저가 video 태그를 지원하지 않을 때 출력될 텍스트입니다.
상충되거나 혼자서는 작동하지 않는 속성이 있습니다. 예를 들어 autoplay로 정하면 preload는 무시됩니다. 크롬 등 일부 웹브라우저에서는 muted와 autoplay를 같이 사용해야 자동 시작이 작동합니다.
예제 1
- Clouds.mp4라는 동영상을 HTML 문서에 삽입합니다.(테스용 동영상은 https://pixabay.com/videos/에서 구할 수 있다.)
- 페이지가 로드되면 동영상이 자동 재생되고, 반복하여 재생됩니다.
- 재생, 정지 등 조작 메뉴가 보이지 않습니다.
- IE 8 등 video 태그를 지원하지 않는 웹브라우저에서는 'Your browser does not support the video tag.'를 진하게 출력합니다.
- 크기, 배치 등은 CSS로 조절하는 것이 좋습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
video { max-width: 80%; display: block; margin: 20px auto; }
</style>
</head>
<body>
<video muted autoplay loop>
<source src="videos/Clouds.mp4" type="video/mp4">
<strong>Your browser does not support the video tag.</strong>
</video>
</body>
</html>
예제 2
- 페이지가 로드되면 Clouds.png라는 이미지와 재생 메뉴를 보여줍니다.
- 재생 버튼을 클릭하면 동영상을 재생합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
video { max-width: 80%; display: block; margin: 20px auto; }
</style>
</head>
<body>
<video controls poster="videos/Clouds.png">
<source src="videos/Clouds.mp4" type="video/mp4">
<strong>Your browser does not support the video tag.</strong>
</video>
</body>
</html>
개요 select는 선택할 수 있는 목록을 만들 때 사용합니다. 목록의 내용은 option 태그로 만듭니다. 문법 <select> <option>...</option> <option>...</option> <option>...</option> </select> 속성 select 태그에 사용하는 주요 속성은 다음과 같다. autofocus : 페이지가 로드되었을 때 해당 목록으로 바로 포커스가 맞춰집니다. disabled : 화면에는 보이지만 사용할 수 없도록 만듭니다. multiple : 여러 값을 선택할 수 있도록 합니다. name : 이름을 ...
개요 address는 소유자 또는 작성자의 연락처를 나타내는 태그입니다. body 태그 안에 있으면 문서의 소유자 또는 작성자의 연락처를 나타냅니다. article 태그 안에 있으면 기사의 소유자 또는 작성자의 연락처를 나타냅니다. 기본 모양은 기울임꼴입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <p>Lorem ipsum dolor sit amet, ...
개요 HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식합니다. 따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로 표현됩니다. 만약 블록 요소 안에서 줄바꿈을 하고 싶다면 br 태그를 이용합니다. 예제 다음은 br 태그를 이용해서 줄바꿈을 한 예제입니다. 첫 번째 문단은 코드 상에서 줄바꿈을 했지만 웹브라우저에서는 띄어쓰기로 표현됩니다. 두 번째 ...
개요 표(table)에 캡션 붙일 때 caption 태그를 사용합니다. 기본 위치는 표 위 가운데입니다. 캡션 위치는 CSS의 caption-side로 정합니다. 예제 캡션의 위치를 파악하기 위해 표의 가로 크기를 100%로 했고, 테두리를 넣었습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> table { width: 100%; } th, td { border: 1px solid #dadada; } </style> </head> <body> <table> <caption>Table Caption</caption> <tr> <th>Lorem</th><th>Ipsum</th> </tr> <tr> <td>Dolor</td><td>Amet</td> </tr> </table> </body> </html>
개요 del은 텍스트를 삭제했음을 나타냅니다. 취소선이 있는 게 기본 모양입니다. ins는 새로 추가되었음을 나타냅니다. 밑줄이 있는 게 기본 모양입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <p>My favorate color is <del>blue</del> <ins>red</ins>.</p> </body> </html>
개요 textarea는 여러 줄의 긴 문장을 입력할 수 있는 양식입니다. 문법 <textarea></textarea> 예제 - 기본 col 속성으로 가로 크기를, row 속성으로 세로 크기를 정할 수 있습니다. 하지만, 크기 등 모양은 CSS의 width, height로 정하는 게 좋습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> ...
HTML / Reference / q, blockquote
개요 인용임을 나타내는 태그에는 q와 blockquote가 있습니다. q는 인라인 요소이고, blockquote는 블록 요소입니다. 문법 <q cite="xxx">...</q> <blockquote cite="xxx">...</blockquote> 인용의 출처는 cite 속성으로 나타냅니다. cite 속성 입력은 선택 사항이고, 웹브라우저에서는 보이지 않습니다. 예제 - q q 요소의 기본 모양은 인용 문구를 큰 따옴표로 감싸는 것입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> ...
HTML / Reference / input type="date"
개요 type이 date인 input은 날짜를 입력 받기 위한 양식입니다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다릅니다. 문법 <input type="date" value="xxx" min="yyy" max="zzz"> value : 선택 항목으로, 기본 날짜를 정합니다. min : 선택 항목으로, 입력 가능한 가장 빠른 날짜입니다. max : 선택 항목으로, 입력 가능한 가장 늦은 날짜입니다. 예제 - 기본 양식 날짜를 입력 받는, 선택 항목이 없는 가장 ...
개요 abbr은 약자(abbreviation)임을 나타냅니다. 문법 <abbr title="Xxx Yyy Zzz">XYZ</abbr> title 속성에 약자의 뜻을 넣으면, 마우스를 약자 위에 올렸을 때 그 뜻이 툴팁으로 나옵니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Reference | abbr</title> </head> <body> <p> <abbr title="World ...
개요 img는 HTML 문서에 이미지를 삽입하는 태그입니다. 문법 <img src="xx" alt="xx" width="xx" height="xx" loading="xx"> src : 이미지의 경로 alt : 이미지를 표시할 수 없을 때 출력할 내용 width : 이미지의 가로 크기 height : 이미지의 세로 크기 loading : 이미지 로딩 방식 예제 1 width, height 속성을 정하지 않으면 이미지 원본 크기 그대로 나옵니다. 만약 지정한 경로에 이미지가 없다면 alt 속성에 ...