Part 6 : 링크 및 미디어 태그 사용법

728x90

웹페이지에서 링크를 연결하거나 이미지, 동영상, 오디오 등의 미디어를 삽입할 때

<a>, <img>, <video>, <audio>, <iframe> 태그를 사용합니다. 이번 포스팅에서는 이 태그들을 활용하는 방법을 배워보겠습니다.

1️⃣ <a> 태그 (하이퍼링크)

웹페이지에서 다른 페이지로 이동할 수 있도록 링크를 생성하는 태그입니다.

<a href="example.com">이곳을 클릭하면 example.com으로 이동합니다.</a>

🔹 href: 이동할 URL을 지정합니다.

📌 새 창에서 열기 (target="_blank" 속성 추가)

<a href="example.com" target="_blank">새 창에서 열기</a>

🔹 target="_blank": 새 탭에서 링크를 엽니다.

2️⃣ <img> 태그 (이미지 삽입)

웹페이지에 이미지를 표시할 때 사용됩니다.

<img src="image.jpg" alt="예제 이미지">

🔹 src: 이미지 파일의 경로

🔹 alt: 이미지가 표시되지 않을 경우 대체 텍스트 (웹 접근성을 위해 필수!)

📌 이미지 크기 조절

<img src="image.jpg" width="300" height="200">

🔹 width, height 속성을 사용하여 크기 조절 가능

3️⃣ <video> 태그 (비디오 삽입)

웹페이지에서 동영상을 삽입할 때 사용됩니다.

<video controls>
  <source src="video.mp4" type="video/mp4">
  브라우저가 비디오를 지원하지 않습니다.
</video>

🔹 controls: 재생 컨트롤 표시

🔹 source: 비디오 파일 경로와 타입 설정

📌 자동 재생 및 반복 설정

<video controls autoplay loop>
  <source src="video.mp4" type="video/mp4">
</video>

🔹 autoplay: 자동 재생

🔹 loop: 반복 재생

4️⃣ <audio> 태그 (오디오 삽입)

음악 또는 음성을 삽입할 때 사용됩니다.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  브라우저가 오디오를 지원하지 않습니다.
</audio>

🔹 controls: 재생 컨트롤 표시

🔹 source: 오디오 파일 경로와 타입 설정

📌 자동 재생 및 반복 설정

<audio controls autoplay loop>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

🔹 autoplay: 자동 재생

🔹 loop: 반복 재생

5️⃣ <iframe> 태그 (외부 콘텐츠 삽입)

웹페이지에 다른 웹사이트를 포함할 때 사용됩니다.

<iframe src="https://example.com" width="600" height="400"></iframe>

🔹 src: 포함할 웹페이지 URL

🔹 width, height: 크기 지정

📌 유튜브 동영상 삽입

<iframe width="560" height="315" src="https://www.youtube.com/embed/영상ID" frameborder="0" allowfullscreen></iframe>

🔹 유튜브 공유 → '퍼가기' 기능을 사용하면 자동으로 생성된 <iframe> 코드를 얻을 수 있습니다.

🎯 마무리

이제 HTML의 링크 및 미디어 태그를 활용하여 다양한 콘텐츠를 삽입할 수 있습니다! 🚀

- Dblisher -