링크와 미디어 삽입

링크와 미디어 삽입은 웹 페이지에 다른 리소스나 미디어 콘텐츠를 포함하거나 연결하는 데 중요한 기술이다. 올바른 사용법을 익히면 UX를 개선하고, 반응형 디자인과 접근성을 강화할 수 있다.

 

링크 삽입

링크는 웹 페이지 간의 탐색을 가능하게 하며, 주요 태그는 <a> 다.

기본 링크

<a href="https://example.com">Visit Example</a>

• href 속성: 이동할 URL을 지정.
  • 절대 경로: https://example.com.
  • 상대 경로: about.html (현재 경로 기준).
• 링크 텍스트: 클릭 가능한 텍스트.

 

새 탭에서 열기

<a href="https://example.com" target="_blank">Open in new tab</a>

• target="_blank": 새 탭에서 링크 열기.

 

링크에 제목 추가

<a href="https://example.com" title="Go to Example website">Visit Example</a>

• title 속성: 링크에 마우스를 올리면 툴팁 표시.

 

전화번호 및 이메일 링크

<a href="tel:+123456789">Call Us</a>
<a href="mailto:example@example.com">Email Us</a>

• 전화: tel:.
• 이메일: mailto:.

 

앵커 링크

<a href="#section1">Go to Section 1</a>
<section id="section1">
  <h2>Section 1</h2>
</section>

• #id : 문서 내 특정 위치로 이동.

 

 

미디어 삽입

이미지 삽입

기본 사용

 

• <img> 태그를 사용하며, src 속성으로 이미지 경로를 지정.
• alt: 이미지 대체 텍스트 (접근성 및 SEO에 중요).

<img src="image.jpg" alt="A beautiful sunset" />

 

유용한 속성

• width/height: 이미지 크기 조정 (CSS로도 가능).
• loading="lazy": 이미지 지연 로드 (스크롤 시 로드).
• srcset: 반응형 이미지 지원 (화면 크기에 따라 다른 이미지를 로드).

<img 
  src="small.jpg" 
  srcset="medium.jpg 768w, large.jpg 1200w" 
  sizes="(max-width: 768px) 100vw, 50vw" 
  alt="Responsive Image" 
/>

 

 

오디오 삽입

기본 사용

• <audio> 태그를 사용하며 src 속성으로 오디오 파일 경로를 지정.
• controls: 기본 재생 UI를 표시.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

 

추가 속성

• autoplay: 페이지 로드 시 자동 재생.
• loop: 오디오 반복 재생.
• muted: 음소거 상태로 시작.

<audio src="audio.mp3" controls autoplay loop muted></audio>

 

비디오 삽입

기본 사용

• <video> 태그를 사용하며 src 속성으로 비디오 파일 경로를 지정.
• controls: 기본 재생 UI를 표시.

<video controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

추가 속성

• poster: 비디오 로드 전에 표시할 썸네일 이미지.
• preload: 비디오 로딩 방법 제어 (none, metadata, auto).

<video controls poster="thumbnail.jpg" preload="metadata">
  <source src="video.mp4" type="video/mp4">
</video>

 

외부 콘텐츠 삽입 (Embed)

YouTube 비디오

• YouTube와 같은 플랫폼에서 제공하는 iframe 코드를 사용.

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/example" 
  frameborder="0" 
  allow="autoplay; encrypted-media" 
  allowfullscreen>
</iframe>

SVG

• SVG 파일을 직접 HTML에 포함하거나 <img> 태그로 삽입.
• 직접 포함: JavaScript나 CSS로 조작 가능.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>