멀티미디어 플레이어 만들기
발행: (2026년 2월 11일 오후 08:00 GMT+9)
3 분 소요
원문: Dev.to
Source: Dev.to
HTML 보일러플레이트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multimedia Player</title>
</head>
<body>
<!-- Your player markup will go here -->
</body>
</html>오디오 요소 예시
<audio controls>
<source src="path/to/audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>비디오 요소 예시
<video controls width="640" height="360">
<source src="path/to/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>완성된 실습 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multimedia Player</title>
</head>
<body>
<section id="player">
<h2>멀티미디어 플레이어</h2>
<article>
<h3>현재 재생 중: Sailing Away</h3>
<audio controls>
<source src="sailing-away.mp3" type="audio/mpeg">
재생 버튼을 눌러 오디오 트랙을 시작하세요. 일시 정지를 눌러 멈출 수 있습니다. 볼륨 조절을 사용해 소리를 조절하세요.
</audio>
</article>
<section>
<h3>map 메서드란 무엇이며 어떻게 작동하나요?</h3>
<!-- Content about the map method -->
</section>
<section>
<h3>Transcript</h3>
<p>
map 메서드란 무엇이며 어떻게 작동하나요? map 메서드는 JavaScript에서 배열에 작용하는 널리 사용되는 강력한 함수입니다. 원본 배열의 각 요소에 지정된 함수를 적용하여 새로운 배열을 생성합니다. 원본 배열은 변경되지 않으며, 새로운 배열에는 각 요소에 함수가 적용된 결과가 들어 있습니다.
</p>
</section>
</section>
</body>
</html>접근성에 초점을 맞춘 이번 세 개의 실습을 정말 즐겼습니다. 이제 커리큘럼 전체 HTML 섹션 퀴즈에 도전하기 전에 접근성 리뷰와 퀴즈가 남아 있습니다. 다음 번에 그 리뷰에 대해 더 공유하겠습니다—그때까지 코딩을 계속하세요!