3일차 개인연습 Video 태그 및 html 콘텐츠 모델

3일차 개인연습 Video 태그 및 html 콘텐츠 모델

2020. 10. 26. 14:10ㆍHTML & CSS 💙/HTML 연습

<video src="비디오주소" type="video/mp4" controls="controls">

</video>

video src는 비디오가 어디에 있는지 주소를 불러오는 태그

type는 어떤 확장자인지

controls는 재생버튼 등의 제어창을 보이게 할 것인지

이렇게 한 번에 써도 되고 나눠서 속성태그를 넣어도 된다.

<video control="controls">

  <source src="비디오주소" type="video/mp4" />

</video>

실습화면

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
    <video src="https://player.vimeo.com/external/454825064.hd.mp4?s=1592bf3ecf1847fa831986b637abd651661fc97c&profile_id=174" type="video/mp4" controls="controls">
    </video>
  </body>
</html>

결과 화면

Content Models 의 7 분류

Metadata Content
Flow Content
Sectioning Content
Heading Content
Phrasing Content
Embedded Content
Interacitve Content

1. Metadata

" base,  link,  meta,  noscript,  script,  style,  title "

Metadata에는 콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들이 포함됩니다.

메타 태그, 타이틀 태그, 스타일 태그, 링크 태그가 이에 해당하며 대부분 <head>내에 들어간다는 것이 특징입니다.

2. Flow

" a, abbr, address, map>area, article, aside, audio, b, bdo, blockquote, br, button,
canvas, cite, code, datalist, del, details, dfn, div, dl, em, embed,
fieldset, figure, footer, form, h1 ~ h6, header, hgroup, hr, i, iframe, img,
input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol,
output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong,
style[scoped], sub, sup, svg, table, textarea, time, ul, var, video, wbr "

Flow에는 문서의 자연스러운 흐름에 의해 배치되는 요소들이 포함됩니다.

Metadata에 해당하는 일부 태그들만 Flow에서 제외되며 요소 대부분이 Flow에 포함됩니다.

3. Sectioning

" article, aside, nav, section "

Sectioning에는 문서의 구조와 관련된 요소들이 포함됩니다.

HTML5에서 새로 생긴 <article>, <aside>, <nav>, <section> 등이 포함되며 이 태그들은 문서의 구조, 아웃라인에 영향을 주게 됩니다.

4. Heading

" h1, h2, h3, h4, h5, h6 "

Heading에는 각 section의 header를 정의하는 heading 태그가 포함됩니다.

5. Phrasing

"a, abbr, map>area, audio, b, bdo, br, button, canvas, cite, code, datalist, del, dfn, em, embed,
i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output,
progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time,
var, video, wbr"

Phrasing에는 문서의 텍스트 또는 텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소들이 포함됩니다.

6. Embedded

" audio,  canvas,  embed,  iframe,  img,  math,  object,  svg,  video "

Embedded에는 외부 콘텐츠를 표현하는 요소들이 포함되며 오디오나 비디오, 이미지 등 멀티미디어 관련 요소들이 이에 해당합니다.

7. Interactive

" a, audio[controls], button, details, embed, iframe, img[usemap], input, keygen, label, menu,
object[usemap], select, textarea, video[controls] "

Interactive에는 사용자와 상호작용을 하는 요소들이 포함되며 대표적으로 form 요소들이 이에 해당합니다.

저작자표시 비영리 변경금지

'HTML & CSS 💙 > HTML 연습' 카테고리의 다른 글

lable 태그와 input 태그 정리 (0)	2020.10.28
3일차 레이아웃 구성 태그 div / span , div를 이용한 레이아웃 구성 (0)	2020.10.26
3일차 Form 태그 (0)	2020.10.26
2일차 img 이미지 태그 / audio 소리 태그 (0)	2020.10.24
2일차 table 태그 (0)	2020.10.24
2일차 리스트 태그 <li>, <ol>, <ul>,<dl>,<dd>,<dt>,<a href=" > (0)	2020.10.24

Maryable Day

Maryable Day

태그

최근글

댓글

공지사항

아카이브

실습화면

결과 화면

'HTML & CSS 💙 > HTML 연습' 카테고리의 다른 글

관련글

티스토리툴바