웹을 더욱 풍성하게 해줄 멀티미디어 관련 Tag 들 !

HTML

yg-0103 2020. 10. 1. 18:31

<img/>태그는 이미지를 삽입할 수 있게 해주는 태그이며 빈 태그이다.

필수 속성으로는 삽입하려는 이미지의 경로를 지정해주는 src 속성과

이미지가 제대로 출력이 되지 않는 상활일 때에 대체 텍스트를 띄워주는

alt 속성이 있다.

이외의 속성으로는 이미지의 넓이를 설정 할 수 있는 width와 height 속성이 있으며

둘중 하나의 속성에만 값을 주어도 이미지가 기본비율에 맞게 변화한다.

그리고 srcset 속성은 뷰포트의 크기가 변화했을 때 변화된 크기에 최적화된 이미지를 사용하도록

값으로 사용될 이미지들의 경로와 이미지의 원본크기를 지정해주고 작은 크기의 이미지부터 입력하며

이미지의 크기는 px 단위가 아닌 w(가로너비) 나 x(비율을 의미하지만 일반적으로 w를 많이 사용함) 단위로 입력해야 한다.

작은 이미지를 늘려야 하는 상황이라면 크기의 차이가 커도 큰 이미지를 줄여서 사용하게 됨.

sizes 속성이 지정되지 않았을 때에는 브라우저가 알아서 최적화된 크기의 이미지를 사용하여 출력한다

사용 예) srcset="경로 이미지의 크기

경로 이미지의 크기

경로 이미지의 크기"

sizes 속성은 값으로는 뷰포트 크기의 조건과 그에 최적화된 이미지가 출력될 크기를 입력해주면

srcset에 설정된 이미지 중 조건에 가장 알맞은 크기의 이미지를 출력해준다.

사용 예) sizes ="(조건) 출력 크기px" 여러 조건을 설정이 가능함.

<audio> 태그는 mp3 같은 소리 형 콘텐츠를 삽입할 때 사용된다.

속성으로는 준비가 되면 바로 재생을 시키는 autoplay,

오디오의 제어 메뉴를 표시해주는 controls,

재생이 끝나면 처음부터 다시 반복을 시켜주는 loop,

기본적으로 음소거를 시켜주는 muted,

오디오의 경로를 지정해주는 src와

페이지가 로드될 때 파일을 어느 정도 로드할지에 대한 설정을 해주는

preload 값으로는 none, metadata, auto 가 있다. 기본값은 metadata이다.

<video> 태그는 동영상 콘텐츠를 삽입할 때 사용된다.

속성으로는 준비가 되면 바로 재생을 시키는 autoplay,

동영상의 가로너비와 세로 너비를 지정해주는 width, height,

동영상 제어 메뉴를 표시해주는 controls,

재생이 끝나면 처음부터 다시 반복을 시켜주는 loop,

기본적으로 음소거를 시켜주는 muted,

동영상의 경로를 지정해주는 src,

썸네일을 이미지를 설정해주는 poster 값으로는 경로를 입력해준다.

그리고 페이지가 로드될 때 파일을 어느 정도 로드할지에 대한 설정을 해주는

preload 값으로는 none, metadata, auto 가 있다. 기본값은 metadata이다.

속성으로는 삽입된 페이지의 넓이를 설정해주는 width, height,

삽입될 페이지의 경로를 입력하는 src,

프레임의 이름을 설정해주는 name,

동영상 콘텐츠의 경우에는 전체 화면 모드의 사용 여부를 정해주는 allowfullscreen,

프레임의 테두리를 설정하는 frameborder 기본값은 1 사용하지 않으려면 0을 입력해준다.