HTML iframe과 media

다람·2022년 6월 22일
0

HTML

목록 보기
6/8

iframe

  • 해당 웹 페이지 안에 제한없이 또 다른 웹 페이지를 삽입할 수 있는 요소

iframe 주의 사항

  • 우회 접속 등의 여러 가지 보안 이슈를 유발할 수 있다.

iframe 속성

  • src : 불러올 페이지의 url
  • scrolling : iframe 안에서 스크롤링 이라는 것을 허용할 것인지를 지정

iframe 태그 예시

 <h1>iframe 태그를 이용한 웹 페이지 삽입</h1>
     <iframe src="주소 또는 링크" name="frame_target" style="width:80%; 
     height:400px; border:none;">
    </iframe>

태그들 간의 응용

  • a 태그를 통해서 iframe 내부에 출력되는 페이지를 변경할 수 있다.
    -> a 태그의 target을 iframe로 변경 (iframe과의 연결)
    a 태그에 target 속성을 추가해서 속성값을 기입한다.
    (단 iframe 요소의 name 속성값과 똑같아야 연결이 가능하다!)
 <a href="htmlBasic.html" target="frame_target" >html기본</a>
    <a href="htmlElement.html" target="frame_target">html요소</a>

media

  • video 요소 : 영상을 보여주고 재생하는 HTML5의 추가 요소
  • video와 audio의 속성은 대부분 공유

video 속성

  • src : 동영상 파일의 경로
  • preload : 재생 전에 동영상 파일을 모두 불러올 것인지 말지 결정
  • autoplay : 동영상 파일을 자동재생할 것인지 말것인지 결정
  • loop : 동영상 반복 재생 유무
  • controls : 동영상 재생도구 표시 유무
  • width, height : 동영상의 넓이와 높이 설정

동영상 재생 지원 여부

  • mp4의 경우 모든 브라우저에서 지원
  • wdbm, ovg의 경우 사파리에서는 지원하지 않는다.

video 태그 예시

 <video src="test.mp4" width="500" height="300"></video>
 <br>
 <video width="500" height="300" controls loop>
 <!--source라는 요소를 이용해서 여러 개의 영상을 video 요소에서 
        컨트롤할 수 있다.
        다만 영상의 확장자를 type라는 속성에 작성할 것-->
        <source src="test.mp4" tpye="video/mp4">
    </video>
profile
안녕

0개의 댓글