반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>img/video/유투브</title>
</head>
<body>
<h1>img 태그</h1>
<hr>
<p>src속성과 alt 속성을 사용하여 이미지를 표시</p>
<p>src속성에는 이미지 파일까지의 상대경로를 입력</p>
<p>alt속성에는 이미지를 설명할 수 있는 텍스트 입력</p><!--소스코드를 입력했으나 파일명을 바꾸게 되면 이미지가 안뜨게 된다. 이때 엑스박스로 뜬 것을 alt 속성 활용하여 이미지를 설명한다.-->
<p>src속성을 상대경로로 이용했을 때</p><!--img 태그는 어떤 역할의 기능을 의미하므로 홀태그-->
<img src="./img/img1.jpg" alt="알록달록 열기구사진" width="300px" height="200px">
<p>src속성도 a속성 href처럼 절대경로로 이용해도 이미지는 나온다</p>
<img src="https://ssl.pstatic.net/tveta/libs/1353/1353256/9f3b825b40428dae1037_20210823115313621.jpg" width="500px" height="100px">
<h1>video 태그</h1>
<hr>
<p>video태그는 자식 태그로 source 태그를 가진다.</p><!--비디오 태그는 자식 태그가 있다면 마침태그가 있다는 의미, 그리고 영상은 형식이 다양하여 브라우저별로 표시되는 비디오가 다 다르므로 쌍태그여야 함-->
<p>source 태그의 src속성을 통해 비디오 파일은 연결</p>
<p>source 태그의 type 속성을 명확히 입력</p><!--type은 파일의 확장자 명을 입력하는 것으로 필수 입력 --><!--<video controls="controls">영상을 재생 할 수 있는 컨트롤러가 표시됨 / 속성명과 속성값이 동일한 경우 속성명(앞 부분)만 남겨둬도 활성화 된다./ autoplay, muted, loop는 모두 속성으로 autoplay는 muted와 함께 써줘야 함!-->
<!--poster은 영상의 썸네일을 보여줄 이미지를 상대경로로 넣는 것, 썸네일이 들어가려면 control로 되어 있어야 함-->
<video controls loop poster="./img/img1.jpg"><!--영상을 컨트롤러 없이 웹표준 정책상 음소거가 된 상태에서만 자동으로 재생되도록 하는 역할이므로 오토플레이 뒤에 muted(음소거)가 붙어야 한다. 무한 재생은 loop를 추가 / 영상이 클릭해도 멈추지 않게 하려면 controls 를 삭제 >> 이럴 때 홈페이지 배경영상으로 사용할 수 있다.-->
<source src="./video/video.webm" type="video/webm"><!--웹앰파일은 인터넷 익스플로어에서 읽히지 않는다.이래서 여러가지 타입을 같이 넣어줘야 하고 이렇게 중복으로 넣어도 하나의 영상만 노출됨-->
<source src="./video/video.mp4" type="video/mp4"><!--mp4 파일은 모든 브라우저에서 재생됨-->
</video>
<h1>유투브 태그</h1><!--유튜브 영상 마우스 우측 버튼 - 소스코드 복사 - 그대로 붙여넣기 하면 끝-->
<iframe width="836" height="470" src="https://www.youtube.com/embed/892XUqlKPH0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>반응형
'IT > HTML&CSS' 카테고리의 다른 글
| [HTML] 탭제목_기초(2021-08-17) (0) | 2021.11.07 |
|---|---|
| [HTML] 기본프레임 만들기(2021-08-17) (0) | 2021.11.07 |
| [HTML] a태그/속성(2021-08-19) (0) | 2021.11.07 |
| [html] 리스트 태그(2021-08-26) (0) | 2021.11.07 |
| [html] 리스트 활용(2021-08-26) (0) | 2021.11.07 |