img
속성
src= 필수 속성으로 이미지의 경로를 지정한다.
alt= 대체텍스트 기능과 스크린리더기의 이미지 설명 기능을 제공하는 속성이다. 웹접근성에서 매우 중요
width, height = 단위 없이 정수만을 기입해야 하며 1 = 1px이다.
srcset= 뷰포트 넓이를 기준으로 이미지를 변경할 수 있다.
익스플로러에서는 지원 하지 않으므로 src속성을 필수적으로 기입해야 한다.
<!-- ,로 구분하고 뷰포트의 width값에 따라 이미지가 변경된다. -->
<img
srcset="./small.png 200w,
./medium.png 400w,
./large.png 600w"
/>sizes= 뷰포트의 크기에 따라 이미지의 사이즈를 지정 및 고정할 수 있다.
<!-- 아래는 뷰포트가 600px이상일 경우 이미지를 600px로 400px이상은 400px로 그 이하는 200px로 이미지를 고정하라는 뜻이다. -->
<img
srcset="./small.png 200w,
./medium.png 400w,
./large.png 600w"
sizes="(min-width: 600px) 600px,
(min-width: 400px) 400px,
300px"
/>video
video태그는 img태그와 다르게 자식 요소를 가질 수 있다.
video태그안에 텍스트를 기입하면 브라우저에서 동영상이 지원되지 않을 경우 텍스트로 대체된다.
src= 비디오의 경로를 지정한다. img와 다르게 필수 속성이 아니다.
src속성을 사용하지 않을 경우 자식으로 source태그를 넣어 src를 지정할 수 있다.
controls= boolean형으로 지정 시 소리 조절, 정지/재시작, 탐색 기능을 제공한다.
autoplay= boolean형으로 지정 시 동영상을 자동으로 재생한다.
하지만 새로고침을 할 경우 autoplay는 기능하지 않는다.
muted= boolean형으로 지정 시 소리를 제거한다. 브라우저 새로고침을 해도 autoplay정상 작동
loop= boolean형으로 지정 시 동영상 무한 재생한다.
poster= 썸네일 같은 기능. 지정하지 않을 시 동영상의 첫번째 프레임 노출
audio
문서에 소리 콘텐츠를 포함할 때 사용한다.
video태그의 속성과 거의 비슷함.
video태그와 audio태그는 모두 multiple기능을 제공한다.
canvas, iframe
canvas
웹상에 도형과 같은 그래픽적인 것을 표현 할 때 사용하며 마크업 하는 용도로 사용. 나머지는 js로 동작
iframe
크기가 지정된 iframe태그 내에서 다른 HTML페이지를 삽입할 수 있다. ex) 지도
