06_멀티미디어(img,audio,video)
FrontEnd/HTML&CSS

06_멀티미디어(img,audio,video)

728x90

이번에는 HTML을 이용하여 사진,소리, 비디오를 넣는법을 알아보겠다.

 

저번에 공부한 내용에서 이미지는 인라인형식이고 기초적으로 넣는것은 배웠는데 이미지파일들을 사이즈에 맞게 분류해두고, 출력되는 화면에 따라 다르게 출력되는 것도 확인할 수 있었다.

 

<img srcset="images/heropy_small.png 400w,
                images/heropy_medium.png 700w,
                images/heropy_large.png 1000w" 
                width = 400                     
                src="images/heropy.png" 
                alt="HEROPY"          view포인트에 따라서 선택되는 파일이 달라진다.-->

heropy블로그에서 첨부

하지만 수행결과가 위처럼 나온다고 생각하면 안된다. width를 설정해두었기 때문이다. 개발자 옵션을 통해 브라우저 창을 통해 조절하면, width가 고정되어 사진의 크기는 400으로 고정되나, 이미지는 small medium large 으로 계속 바뀌게 되는 것을 알 수 있다.

 

더보기

<img>
src (필수)이미지 URL URL
alt (필수)이미지의 대체텍스트
width 이미지의 가로 너비
height 이미지의 세로 너비


srcset 브라우저에게 제시할 이미지 URL과 원본 크기의 목록을 정의 w, x 
sizes 미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의
반응형 홈페이지를 만들때 사용

> 우리는 HTML IMG의 srcset과 sizes를 통해 쉽게는 이미지의 크기를 설정하는 것만으로 대부분의 고려 사항을 사용자 브라우저(User agent)에 떠넘길 수 있습니다.


srcset > 사이즈가 2개 이상일때 필요하다. 작은크기부터 입력하는것이 좋다.


W unit
이미지의 원본크기(가로)를 의미

X descriptor 이미지의 비율의도릀 ㅏ용
> W디스크립터를 사용하는경우 x를 사용하지 않아도 되기에 W사용을 조금 더 권장

size와 width
width는 이미지의 ‘출력 크기’만 지정하는 데 반해, sizes는 이미지의 ‘출력 크기’ + ‘최적 크기’도 함께 지정하는 개념입니다.
따라서 sizes="500px"이 지정된 첫번째 예제는 500px에 최적화된 이미지로 heropy_medium.png를 사용했고 이미지 크기도 500px로 설정한 것이죠.

위는 내가 필기한 간단히 필기한 내역이다. 나중에 복습하도록 하자(나중에 필요할때 보러 오겠지만..)

 

<img srcset="images/heropy_small.png 400w,
        images/heropy_medium.png 700w,
        images/heropy_large.png 1000w" 
        sizes="(min-width: 1000px) 700px" 
        sizes = 500px    
        src="images/heropy.png" alt="HEROPY" />

size를 이용하여 정의하면 width와는 달리 창의 크기를 변경해도 사진의 종류도 medium으로 고정될 것이다.

 

이 두개의 차이점은 알아두자.

 

<figure>
    <img src="images/heropy.png" alt="HEROPY">
    <figcaption>Heropy 이미지입니다!</figcaption>
</figure>

figure은 단순하다. 밑에 실행을 보자.

바로이부분

<바로 이부분>이라고 말되어있는게 figure의 역할이다 tistory글에 기본적으로 이미지랑 붙어서 딸려있듯이 되어있는것이 특징!

 

더보기

<audio>
autoplay 준비되면 바로 재생 불린(Boolean)
controls 제어 메뉴를 표시 불린(Boolean)
loop 재생이 끝나면 다시 처음부터 재생 불린(Boolean)
preload 페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공) none: 로드하지 않음,
 metadata: 메타데이터만 로드,
auto: 전체 파일 로드 metadata
src 콘텐츠 URL URL
muted 음소거 여부 불린(Boolean)

오디오의 성질은 다음과 같다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <audio src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" 
        controls autoplay loop></audio>
</body>
</html>

되게 직관적이다. 각 옵션의 성질만 이해하면 그리 어렵지는 않았다.

 

비디오는 오디오와 매우 유사하였다.

 

더보기

<video>
autoplay 준비되면 바로 재생 불린(Boolean)
controls 제어 메뉴를 표시 불린(Boolean)
loop 재생이 끝나면 다시 처음부터 재생 불린(Boolean)
muted 음소거 여부 불린(Boolean)
poster 동영상 썸네일 이미지 URL URL
preload 페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공) none: 로드하지 않음,
metadata: 메타데이터만 로드,
auto: 전체 파일 로드 metadata
src 콘텐츠 URL URL
width 동영상 가로 너비
height 동영상 세로 너비 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    
    <title>Document</title>
</head>
<body>
    <video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" 
    controls 
     loop
     muted
     poster= "./images/heropy.png"></video>
</body>
</html>

썸네일 ㄷㄷ

다른것보다 썸넬을 만들 수 있다는게 참 흥미로웠다.

728x90

'FrontEnd > HTML&CSS' 카테고리의 다른 글

08_표 콘텐츠  (0) 2021.11.01
07_내장요소  (0) 2021.10.31
05_HTML 인라인 요소  (0) 2021.10.31
04_content 구분 & 문자콘텐츠  (0) 2021.10.30
03_HTML 블록과 인라인, 메타데이터  (0) 2021.10.28

    티스토리툴바