비디오 및 오디오 추가

약 4분

본문 듣기

안녕하세요! 오늘은 HTML에서 비디오와 오디오를 웹페이지에 추가하는 방법에 대해 알아보겠습니다. 비디오와 오디오는 웹에서 매우 중요한 요소로, 사용자의 경험을 더 풍부하게 만들어 줍니다. 배운 내용을 실제로 적용해보면서 재미있게 따라해 보세요!

1. 비디오 추가하기

비디오를 웹페이지에 추가하기 위해서는 태그를 사용합니다. 이 태그는 비디오 파일을 삽입하고, 재생할 수 있는 플레이어를 자동으로 생성합니다.

코드 html

<video controls>
  <source src="path/to/your/video.mp4" type="video/mp4">
  비디오를 재생할 수 없습니다.
</video>

위 코드에서 태그는 비디오 플레이어를 생성합니다. controls 속성은 사용자에게 재생, 일시정지 등의 기능을 제공하는 컨트롤러를 표시하게 해줍니다. 태그는 어떤 비디오 파일을 사용할 것인지 지정합니다. 해당 경로와 파일 이름을 여러분의 비디오로 바꿔보세요.

오디오를 웹페이지에 추가할 때는 태그를 사용합니다. 이 태그는 오디오 파일을 삽입하고, 오디오 재생에 필요한 컨트롤러를 자동으로 생성합니다.

코드 html

<audio controls>
  <source src="path/to/your/audio.mp3" type="audio/mpeg">
  이 브라우저는 오디오 태그를 지원하지 않습니다.
</audio>

위 코드에서 태그와 함께 controls 속성을 사용하여 오디오 플레이어를 생성합니다. 마찬가지로 태그는 어떤 오디오 파일을 사용할 것인지 지정합니다. 여러분의 파일로 경로를 수정해 보세요.

비디오와 오디오 태그는 웹 페이지에서 멀티미디어 콘텐츠를 추가하는 데 매우 유용합니다. 각각 와 태그를 사용하고, 각 태그에 controls 속성을 추가하여 사용자에게 재생 컨트롤을 제공할 수 있습니다.

HTML로 여러분만의 작은 비디오 또는 오디오 플레이어를 만들어 보세요! 개인적으로 좋아하는 콘텐츠를 추가해보세요.

여러분의 자기소개 페이지에 비디오 또는 오디오를 추가해 보세요! 예를 들어, 자신의 목소리로 자기소개를 녹음하거나, 좋아하는 영상의 링크를 추가해서 나만의 페이지를 꾸며보세요.