신한DS 금융SW 아카데미/웹

HTML 태그(iframe, video, img, source)

hpehpeyy 2025. 5. 12. 10:17

📌 iframe

<iframe src="http://daum.net" width="500px" height="500px"></iframe>
  • 외부 웹페이지(Daum)를 현재 페이지에 삽입
<iframe src="https://www.youtube.com/embed/...">
  • YouTube 동영상 삽입(소스코드 복사)

📌 video 태그 (video.js 사용)

로컬에 있는 비디오(mp4)를 Video.js 라이브러리로 재생

<video class="video-js" controls ...>
  <source src="/video/test.mp4" type="video/mp4" />
</video>
  • poster: 영상 시작 전 썸네일 이미지
  • controls: 재생 컨트롤러 표시
  • src : 실제 동영상 파일 경로
  • type : 동영상 파일의 MIME 타입을 지정 / 브라우저가 어떤 형식 파일인지 파악할 수 있게 도와줌

💡Video.js란?
- class="video-js"와 <script src="https://vjs.zencdn.net/8.22.0/video.min.js">를 통해 적용된 외부 HTML5 영상 플레이어 라이브러리
- 모든 브라우저에서 일관된 디자인 제공
- 자막, 스킨, 광고 삽입 등 다양한 기능 확장 가능

📌 image 태그

<img src="img/google.png" alt="구글" title="구글로고" width="100px">
  • src: 이미지 경로
  • alt: 이미지 대체 텍스트
  • title: 마우스를 올리면 보이는 설명

📌 링크 태그

<a href="http://www.naver.com" target="_blank">네이버</a>
  • 외부 사이트로 이동. target="_blank"는 새 창에서 열림
<a href="text.html">Test</a>
  • 같은 사이트 내 다른 페이지로 이동
<a href="#target">맨아래로</a>
...
<p id="target">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, ratione quis! Dolorum, at maiores! Reiciendis dolor voluptates sit, perferendis rerum, exercitationem ex harum, provident temporibus illo consequuntur velit! Obcaecati, repellat!</p>
  • 페이지 내 특정 위치(id = "target"인 요소)로 이동

☑️ 정리

외부 웹페이지 삽입 <iframe> 다른 웹사이트나 유튜브 영상 표시
비디오 삽입 <video>, <source> 로컬 영상 재생, Video.js 활용
이미지 삽입 <img> 로고나 그림 삽입
링크 연결 <a> 외부 사이트, 내부 페이지, 페이지 내 위치로 이동
문단 작성 <p> 텍스트 문단 구분 

 

☘️ 전체 코드

더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link href="https://vjs.zencdn.net/8.22.0/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
    <iframe src="http://daum.net" width="500px" height="500px"></iframe>
    <iframe width="895" height="503" src="https://www.youtube.com/embed/7MRnLqgaLPM" title="초보자 주목! &#39;썬더볼츠*&#39; 보기 전에 알면 딱 좋은 주요 인물들의 개인 서사와 특징 정리!" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <hr>
    
    <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="/img/google.png"
    data-setup="{}"
  >
    <source src="/video/test.mp4" type="video/mp4" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>
  <script src="https://vjs.zencdn.net/8.22.0/video.min.js"></script>
    <hr>
    <img src="img/google.png" alt="구글" title="구글로고" width="100px"> <!-- 이미지 -->
    <hr>
    <a href="http://www.naver.com" target="_blank" >네이버</a> <!-- 링크 -->
    <a href="text.html">Test</a>
    <a href="#target">맨아래로</a>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore non sed esse necessitatibus quibusdam dolores magnam praesentium, iusto laudantium nam odit explicabo sunt commodi voluptates iste porro perferendis tempora minima?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, ratione quis! Dolorum, at maiores! Reiciendis dolor voluptates sit, perferendis rerum, exercitationem ex harum, provident temporibus illo consequuntur velit! Obcaecati, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, ratione quis! Dolorum, at maiores! Reiciendis dolor voluptates sit, perferendis rerum, exercitationem ex harum, provident temporibus illo consequuntur velit! Obcaecati, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, ratione quis! Dolorum, at maiores! Reiciendis dolor voluptates sit, perferendis rerum, exercitationem ex harum, provident temporibus illo consequuntur velit! Obcaecati, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, ratione quis! Dolorum, at maiores! Reiciendis dolor voluptates sit, perferendis rerum, exercitationem ex harum, provident temporibus illo consequuntur velit! Obcaecati, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, ratione quis! Dolorum, at maiores! Reiciendis dolor voluptates sit, perferendis rerum, exercitationem ex harum, provident temporibus illo consequuntur velit! Obcaecati, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, ratione quis! Dolorum, at maiores! Reiciendis dolor voluptates sit, perferendis rerum, exercitationem ex harum, provident temporibus illo consequuntur velit! Obcaecati, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, ratione quis! Dolorum, at maiores! Reiciendis dolor voluptates sit, perferendis rerum, exercitationem ex harum, provident temporibus illo consequuntur velit! Obcaecati, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, ratione quis! Dolorum, at maiores! Reiciendis dolor voluptates sit, perferendis rerum, exercitationem ex harum, provident temporibus illo consequuntur velit! Obcaecati, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, ratione quis! Dolorum, at maiores! Reiciendis dolor voluptates sit, perferendis rerum, exercitationem ex harum, provident temporibus illo consequuntur velit! Obcaecati, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, ratione quis! Dolorum, at maiores! Reiciendis dolor voluptates sit, perferendis rerum, exercitationem ex harum, provident temporibus illo consequuntur velit! Obcaecati, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, ratione quis! Dolorum, at maiores! Reiciendis dolor voluptates sit, perferendis rerum, exercitationem ex harum, provident temporibus illo consequuntur velit! Obcaecati, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, ratione quis! Dolorum, at maiores! Reiciendis dolor voluptates sit, perferendis rerum, exercitationem ex harum, provident temporibus illo consequuntur velit! Obcaecati, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, ratione quis! Dolorum, at maiores! Reiciendis dolor voluptates sit, perferendis rerum, exercitationem ex harum, provident temporibus illo consequuntur velit! Obcaecati, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, ratione quis! Dolorum, at maiores! Reiciendis dolor voluptates sit, perferendis rerum, exercitationem ex harum, provident temporibus illo consequuntur velit! Obcaecati, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, ratione quis! Dolorum, at maiores! Reiciendis dolor voluptates sit, perferendis rerum, exercitationem ex harum, provident temporibus illo consequuntur velit! Obcaecati, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, ratione quis! Dolorum, at maiores! Reiciendis dolor voluptates sit, perferendis rerum, exercitationem ex harum, provident temporibus illo consequuntur velit! Obcaecati, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, ratione quis! Dolorum, at maiores! Reiciendis dolor voluptates sit, perferendis rerum, exercitationem ex harum, provident temporibus illo consequuntur velit! Obcaecati, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, ratione quis! Dolorum, at maiores! Reiciendis dolor voluptates sit, perferendis rerum, exercitationem ex harum, provident temporibus illo consequuntur velit! Obcaecati, repellat!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, ratione quis! Dolorum, at maiores! Reiciendis dolor voluptates sit, perferendis rerum, exercitationem ex harum, provident temporibus illo consequuntur velit! Obcaecati, repellat!</p>
    <p id="target">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, ratione quis! Dolorum, at maiores! Reiciendis dolor voluptates sit, perferendis rerum, exercitationem ex harum, provident temporibus illo consequuntur velit! Obcaecati, repellat!</p>
    
</body>
</html>

'신한DS 금융SW 아카데미 > 웹' 카테고리의 다른 글

HTML div 태그, span 태그  (0) 2025.05.12
HTML form 태그, input 태그  (1) 2025.05.12

'신한DS 금융SW 아카데미/웹'의 다른글

  • 현재글HTML 태그(iframe, video, img, source)

관련글

티스토리툴바