HTML5 콘텐츠 모델
:  웹 페이지에 표현하는 콘텐츠들을 의미상으로 분류
    1. 메타 데이터 콘텐츠
    2. 플로우 콘텐츠
    3. 구역 콘텐츠
    4. 제목 콘텐츠 (HTML-1파일)
    5. 구문 콘텐츠 (HTML-1파일)
    6. 임베디드 콘텐츠
    7. 인터렉티브 콘텐츠

- 임베디드 콘텐츠 : image,video,audio
:  외부 소프트웨어를 사용해서 만들어진 결과물을 웹 페이지에 삽입하는 콘텐츠

  - 이미지 태그 : img(image) / Empty Element
    - src(source) : 이미지 파일, 경로 정보를 표기 -Attribute
    - alt(alternative) : 이미지 설명,대체 텍스트(이미지를 읽을 수 없을때) -Attribute

  - 비디오 태그 : video
    - attribute의 특성(html5 new Tag)
      : 기존형식 => name="value"
      : html5 new Tag 형식 : attr-name
      Ex)
        <img src="value" />
        <video autoplay></video>
    - controls : 컨트롤 버튼(재생,중지 바) 표시
    - loop : 반복재생
    - muted : 음소거
    - poster : 재생 전 영상의 첫화면을 내가 원하는 썸네일로 표시 => poster=""
    - autoplay : 자동재생 => 크롬에서는 muted(음소거)와 함께 사용해야 적용된다.

  EX)
  <!-- 1. <video controls loop muted poster="https://seulbinim.github.io/WSA/images/markup/content-model.png"> -->
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm " type="video/mp4" />
  </video>

  <!-- 2. <video autoplay muted>  -->
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm " type="video/mp4" />
  </video>

 * Youtube 동영상 가져오는법 : 넣을 영상 선택 => 오른쪽 아래 공유 버튼 클릭 => 퍼가기 버튼 클릭 => 주소 복사 => HTML 에 붙혀넣기

    EX) <iframe width="560" height="315" src="https://www.youtube.com/embed/V9AGvwPmnZU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

  - 오디오 태그 : audio : 비디오 attribute와 거의 동일하다

    EX) <audio controls>
      <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg" />
    </audio>

  ★ tip : HTML 주석 <!-- 주석내용 --> => 단축키 : ctrl + /

  HTML 인용
      - q