[02-4] HTML 필수태그 정리 4: 사진, 영상, 음악 태그

 

 

인터넷에서 절대 빠질 수 없는 요소는 미디어죠. 미디어는 영상, 음악, 사진 등 여러가지 유형들이 있습니다. 웹 페이지를 통해 내가 만든 영상이나 음악을 보여줄 수 있다면 나만의 자산이 되고 자릿세 없이 전세계인들에게 공유할 수 있다는 이점이 있습니다. 이번 포스팅에서는 어떻게 미디어를 출력할 수 있는지 알아보도록 하겠습니다.

 

 

---

 

미디어 태그

---

 

 

01. 이미지 태그

이미지 태그는 사실 이전 포스팅에서 언급한 적이 있었습니다.

2021.10.16 - [나만의 웹사이트 만들기/HTML 정복하기] - [02-1] HTML 필수 태그 정리: 뼈대를 만들어 보자!

[02-1] HTML 필수 태그 정리: 뼈대를 만들어 보자!

 

좀 더 구체적으로 어떻게 태그를 적어야 출력이 되는지 보여드리겠습니다.

 

이미지 태그같은 경우는 특이하게도 닫는 태그(/슬래시가 붇는 태그)가 없기 때문에 '빈 요소 태그'라 불립니다. 빈 요소 태그 같은 경우 이전 HTML버전에서는 <image src="이미지 이름" alt="이미지 설명 텍스트" />처럼 슬래시(/)를 넣어줬어야 했는데 HTML5로 넘어오면서 슬래시 없이도 출력가능하게 되었습니다.

 

이미지 태그의 구성은 이러합니다.

<img src="image/shinra.jpg" alt="신라유적지">

src에는 이미지 파일의 이름을 적고

alt에는 대체 텍스트를 적습니다.

 

여기서 alt는 alternative로 시각장애인분들이 사진설명을 귀로 들을 수 있게끔 해주는 대체 텍스트입니다. 적지 않아도 사진을 눈으로 보는데 지장은 없지만 몸이 불편하신 분들을 위해 스크린리더기를 사용할 때 인식할 수 있도록 텍스트를 적는 것이 좋겠죠.

 

그 외에도 이미지의 크기를 조절하고 싶으면 width="치수" 를 적으면 됩니다. 사진을 보면서 어떻게 출력되는지 확인해보겠습니다.

 

이런 식으로 구현이 가능합니다. width="픽셀크기"(가로), height="픽셀크기"(세로) 를 설정해 이미지 크기를 지정해줄 수 있습니다. 여기서 width만 지정해주면 가로 길이에 맞게 사진의 원본비율을 맞춰주는데 width와 height를 둘다 설정해주면 비율이 달라질 수 있습니다.

 

 

 

 

 

 

 

 

02. 오디오 태그

오디오 태그의 구성은 이러합니다.

<audio src="music/Allemande.mp3" controls ></audio>

똑같이 src에는 음악파일 이름을 적어주면 됩니다. 추가로 뒤에 controls, autoplay, loop, preload, muted 등의 속성을 부여할 수 있습니다.

 

• controls: 재생, 정지 및 소리 조절 등 오디오의 기본적인 동작을 조절할 수 있는 패널을 생성합니다.
• autoplay: 웹 페이지가 열렸을 때 자동으로 재생하는 기능입니다.
• loop: 오디오 재생이 끝나도 계속 반복해서 재생합니다.
• preload: 파일을 먼저 로딩한 후 오디오를 재생합니다.
• muted: 웹 페이지가 열렸을 때 오디오를 음소거하는 기능입니다.

 

출력한 화면의 모습입니다.

 

 

 

 

 

 

 

03. 비디오 태그

비디오 태그 구성입니다.

 <video src="movie/walking.mp4" controls></video>

 

똑같이 src에 비디오 파일 이름을 적으면 되고 속성도 필요에 따라 부여해줄 수 있습니다. 한 가지 다른 기능을 알려드리자면 poster="이미지 파일 이름"을 적으면 영상이 재생되기 전 지정한 이미지를 먼저 보여줄 수 있습니다.

 

 

왼쪽화면이 영상재생 전 이미지가 나오는 화면이고 오른쪽이 재생되고 있는 영상 화면입니다.

 

 

 

 

 

---

여기까지 기본적인 미디어 삽입방식을 알려드렸습니다. 생각보다 쉽게 출력할 수 있어서 처음 알게되었을 때 괜히 겁먹었던 기억이 있네요. 이것 말고도 다른 방법이나 다양한 미디어 파일을 올릴 수 있는 법을 아시는 분은 댓글로 얘기해주셔도 좋습니다! 공부는 함께 하는 것이 혼자 할 때보다 효과가 좋으니까요. 😊

다음 포스팅에서 뵙겠습니다!