멀티미디어&내장 콘텐츠& 스크립트

프런트엔드/HTML 2021. 3. 3. 14:53

<img/>

src : 이미지 URL (필수)

alt : 이미지의 텍스트(필수)

srcset: 브라우저에게 제시할 이미 URL과 원본 크기의 목록을 정의, 2장 이상, 원본

srcset 속성은 쉼표(,)로 구분된 사용할 이미지들의 경로와 해당 이미지의 원본 크기를 지정하고,

w 디스크립터(Width descriptor)는 이미지의 원본 크기(가로 너비)를 의미합니다. 예를 들어 400x300(px) 크기 이미지의 w 값은 400w

고정된 이미지 크기를 유지하려면 width 속성을 추가할 수 있습니다.

x 디스크립터(Device pixel ratio descriptor)는 이미지의 비율 의도를 의미합니다.

sizes: 미디어 조건과 해당 조건일때 이미지 최적화 크기의 목록을 정의

sizes 속성은 쉼표(,)로 구분된 미디어조건(선택적)과 그에 따라 최적화되어 출력될 이미지 크기를 지정

<figure>는 이미지나 삽화, 도표 등의 영역을 설정.
<figcaption>는 <figure>에 포함되어 이미지나 삽화 등의 설명을 표시.

다른 HTML 페이지를 현재 페이지에 삽입. (중첩된 브라우저 컨텍스트(프레임)를 표시)

Canvas API이나 WebGL API를 사용하여 그래픽이나 애니메이션을 랜더링.

async	스크립트의 비동기적(Asynchronously) 실행 여부	불린(Boolean)	src 속성 필수
defer	문서 파싱(구문 분석) 후 작동 여부	불린(Boolean)	src 속성 필수
src	참조할 외부 스크립트 URL	URL	포함된 스크립트 코드는 무시됨

defer는 <head>에 쓰거나 안쓰면 <body>에 넣을 수 있음

스크립트를 지원하지 않는 경우에 삽입할 HTML을 정의.

코맹탈출하기 코맹탈출하기