멀티미디어 및 임베딩 콘텐츠는 웹 페이지의 시각적 호소력과 상호 작용성을 향상시키는 데 중요한 역할을 합니다. 다음은 멀티미디어를 사용하고 HTML에 콘텐츠를 포함하는 방법에 대한 자세한 내용과 구체적인 예입니다.
이미지
웹 페이지에 이미지를 표시하려면 <img>
태그를 사용하십시오. 속성을 이용하여 이미지 출처를 지정하고 src
, alt
접근성을 위해 속성을 이용하여 대체 텍스트를 제공합니다.
예를 들면 다음과 같습니다.
<img src="image.jpg" alt="A beautiful sunset">
오디오
오디오 파일을 삽입하려면 <audio>
태그를 활용하십시오. 속성 을 사용하여 오디오 소스를 지정 src
하고 속성을 사용하여 재생을 위한 컨트롤을 추가할 수 있습니다 controls
.
예를 들면 다음과 같습니다.
<audio src="audio.mp3" controls></audio>
동영상
동영상을 삽입하려면 <video>
태그를 사용하세요. 속성을 사용하여 비디오 소스를 설정 src
하고 controls
비디오 재생 컨트롤에 대한 속성을 포함합니다.
예를 들면 다음과 같습니다.
<video src="video.mp4" controls></video>
지도
Google 지도와 같은 서비스에서 지도를 삽입하려면 <iframe>
태그를 사용하고 서비스에서 제공하는 지도의 삽입 코드를 삽입하세요.
예를 들면 다음과 같습니다.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024..." width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
웹 애플리케이션
웹 애플리케이션 또는 외부 웹사이트를 임베드하려면 <iframe>
태그를 다시 사용하고 웹 애플리케이션의 URL을 제공하십시오.
예를 들면 다음과 같습니다.
<iframe src="https://www.example.com" width="800" height="600" frameborder="0"></iframe>
이러한 예는 다양한 유형의 멀티미디어 및 외부 콘텐츠를 HTML 페이지에 포함하는 방법을 보여줍니다. 적절한 표시와 기능을 보장하기 위해 필요에 따라 속성과 치수를 조정해야 합니다.