[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 23회차 미션

😎

패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 23일차입니다!

오늘은 멀티미디어를 삽입하는 태그에 대하여 학습했습니다.

항상 블로그 글쓰기나 웹 빌더를 통하여 오디오와 비디오, 그리고 이미지를 삽입해왔는데,

HTML로 이러한 멀티미디어를 삽입하고 제어할 수 있는 방법을 배워 재미있었습니다. 🥰

 

오늘은 05~07. 멀티미디어 - AUDIO / VIDEO / FIGURE, FIGCAPTION 에 대하여 공부했습니다.

---

<Today I Learned>

<audio>

 

https://developer.mozilla.org/ko/docs/Web/HTML/Element/audio

🔸 소리 컨텐츠 (MP3) 삽입, inline 요소

🔸 속성 (1) autoplay (boolean) : 사이트 접속시 음원이 바로 재생되게 함

🔸 속성 (2) controls (boolean) : controls 속성이 추가되어야 페이지에서 오디오 버튼 사용 가능

🔸 속성 (3) loop (boolean) : 음원 재생이 끝나면 다시 처음부터 재생되게 함

🔸 속성 (4) mute (boolean) : 페이지 접속시 음소거 상태 여부 결정

🔸 속성 (5) preload : 값으로 none, metadata, auto 를 가짐. 기본값은 metadata(=미리 기본 정보를 불러와놓음)

    ➡ none: 정보 로드하지 않음, auto: 전체 파일을 미리 로드해둠

🔸 속성 (6) src : 컨텐츠 URL

 

🔹 src 속성을 추가하고 controls 속성을 추가해야 페이지에 브라우저의 기본 오디오 컨트롤러가 나타남

🔹 <audio></audio> 태그 안의 내용은 브라우저가 <audio> 태그를 지원하지 않을 때 보임

 

- 예제

 

<video>

https://developer.mozilla.org/ko/docs/Web/HTML/Element/video

🔸 영상 컨텐츠 (MP4) 삽입, inline 요소

🔸 속성 (1) autoplay (boolean) : 사이트 접속시 음원이 바로 재생되게 함

🔸 속성 (2) controls (boolean) : controls 속성이 추가되어야 페이지에서 오디오 버튼 사용 가능

🔸 속성 (3) mute (boolean) : 페이지 접속시 음소거 상태 여부 결정

🔸 속성 (4) preload : 값으로 none, metadata, auto 를 가짐. 기본값은 metadata(=미리 기본 정보를 불러와놓음)

    ➡ none: 정보 로드하지 않음, auto: 전체 파일을 미리 로드해둠

🔸 속성 (5) src : 컨텐츠 URL

🔸 속성 (6) poster : 썸네일 이미지 URL

🔸 속성 (7) width, height : 영상 컨트롤러의 가로 너비와 세로 너비 설정

 

🔹 src 속성을 추가하고 controls 속성을 추가해야 페이지에 브라우저의 기본 오디오 컨트롤러가 나타남

🔹 <video></video> 태그 안의 내용은 브라우저가 <video> 태그를 지원하지 않을 때 보임

 

- 예제

 

<figure>

🔸 이미지나 삽화, 도표 등의 영역 설정

 

<figcaption>

🔸 <figure> 태그에 포함됨, 이미지, 삽화 등의 설명 표시

✨ 정보 보조 기기가 읽기 수월함

<figure>
    <img src="...">
    <figcaption>...</figcaption>
</figure>

---

학습 내용 출처 : https://heropy.blog/2019/05/26/html-elements/

한눈에 보는 HTML 요소(Elements & Attributes) 총정리

강의 링크: https://bit.ly/3m0t8GM