05. [HTML] 멀티미디어, 내장 콘텐츠, 스크립트

HEROPY Tech 블로그 참고.

 

 

🔗<IMG/>

▪<img/> 태그는 이미지를 삽입하는 데 사용된다.

📺display: inline

속성	의미	값
src	(필수)이미지 URL	URL
alt	(필수)이미지 대체텍스트
width	이미지의 가로 너비
height	이미지의 세로 너비
srcset	브라우저에게 제시할 이미지 URL과 원본 크기의 목록을 정의	w, x
sizes	미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의

<!-- srcset, sizes -->
<!-- 다양한 디스플레이 해상도에 맞는 최적의 이미지를 브라우저가 선택해서 사용 -->
<img srcset="./small.jpg 320w,
             ./medium.jpg 640w,
             ./large.jpg 1024w"
     sizes="(max-width: 480px) 300px,
            (max-width: 800px) 600px,
            900px"
     src="./small.jpg"
     alt="The image" />
<img srcset="./image.jpg,
             ./image-1.5x.jpg 1.5x,
             ./image-2x.jpg 2x"
     src="./image.jpg"
     alt="The image" />

 

 

🔗<AUDIO>

▪<audio> 태그는 웹에 소리를 삽입할 때 사용

💡autoplay가 설정되면 preload속성을 무시함

📺display: inline

 

▪원하는 부분을 재생, 시작시 오디오 설정 등 세세한 조정은 JS로 설정이 가능하다.

속성	의미	값	기본값
autoplay	준비되면 바로 재생 (정책으로 인해 몇몇 브라우저에서 사용 불가)	Boolean
controls	제어 메뉴를 표시	Boolean
loop	재생이 끝나면 다시 처음부터 재생	Boolean
preload	페이지가 로드될 때 파일을 로드할지 설정(힌트 제공)	none : 로드하지 않음 metadate : 메타데이터만 로드, auto : 전체 파일 로드	metadate
src	콘텐츠 URL	URL
muted	음소거 여부	Boolean

    <audio src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" 
        controls
        loop
        muted
        ></audio>

 

 

🔗<VIDEO>

▪동영상 콘텐츠를 삽입 할 때 사용

💡autoplay가 설정되면 preload속성을 무시함

📺display: inline

속성	의미	값	기본값
autoplay	준비되면 바로 재생 (정책으로 인해 몇몇 브라우저에서 muted를 써야 사용 가능)	Boolean
controls	제어 메뉴 표시	Boolean
loop	재생이 끝나면 다시 처음부터 재생	Boolean
muted	음소거 여부	Boolean
poster	동영상 썸네일 이미지 URL	URL
preload	페이지가 로드될 때 파일을 로드할지 지정(힌트 제공)	none : 로드하지 않음 metadate : 메타데이터만 로드, auto : 전체 파일 로드	metadate
src	콘텐츠 URL	URL
width	동영상 가로 너비
heigth	동영상 세로 너비

    <video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
    controls
    loop
    muted
    poster="/example.png"></video>

 

 

🔗<FIGURE>

▪<figure> 태그는 이미지나 삽화, 도표 등의 영역을 설정

📺display: block

    <figure>
        <img src="./example.png" alt="example">
        <figcaption>example 이미지 입니다.!</figcaption>
    </figure>

 

 

🔗<FIGCAPTION>

▪<figcaption> 태그는 <figure> 태그에 포함되고 이미지나 삽화 등의 설명을 작성하는데 쓰인다.

📺display: inline

    <figure>
        <img src="./example.png" alt="example">
        <figcaption>example 이미지 입니다.!</figcaption>
    </figure>

 

 

🔗<IFRAME>

▪<iframe> 태그는 다른 HTML 페이지를 현제 페이지에 삽입하는 데 사용한다.

📺display: inline

속성	의미	값	기본값
name	프레임의 이름
src	포함할 문서 URL	URL
width	프레임 가로 너비
height	프레임 세로 너비
allowfullscreen	전체 화면 모드 사용 여부	Boolean
frameborder	프레임 테두리 사용 여부	0, 1	1
sandbox	보안을 위한 읽기 전용으로 삽입	Boolean or allow-form : 양식 제출 가능, allow-scripts : 스크립트 실행 가능, allow-same-origin : 같은 출처(도메인)의 리소스 사용 가능

 

 

🔗<CANVAS>

▪<canvas> 태그는 Canvas API나 WebGL API를 사용하여 그래픽이나 애니메이션을 랜더링 할때 사용된다.

📺display: inline

속성	의미
width	캔버스의 가로 너비
height	캔버스의 세로 너비

<canvas id="canvas" width="200" height="150"></canvas>

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(200, 0, 0)';
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
ctx.fillRect(30, 30, 50, 50);

 

 

🔗<SCRIPT>

▪<script> 태그는 스크립트 코드를 문서에 포함하거나 참조할때 사용한다.

속성	의미	값	특징
async	스크립트의 비동기적(Asynchronously) 실행여부	Boolean	src 속성 필수
defer	문서 파싱(구문 분석) 후 작동 여부	Boolean	src 속성 필수
src	참조할 외부 스크립트 URL	URL	포함된 스크립트 코드는 무시됨
type	MIME 타입	text/javascript(기본값)

 

 

🔗<NOSCRIPT>

▪<noscript> 태그는 스크립트를 지원하지 않는 경우 삽입할 HTML을 작성하는 태그

📺dispay: inline

<noscript>
  <p>Your browser does not support JavaScript!</p>
</noscript>