멀티미디어 태그

hoicryu·2020년 11월 17일
0

html

목록 보기
8/14
# 멀티미디어

<img/> { display: inline; }
	이미지를 삽입
    	scr 속성(필수) - 값 : ule
        alt 속성(필수) - 이미지의 대체 텍스트
        width 속성 - 이미지의 가로 너비
        height 속성 - 이미지의 세로 너비
        srcset 속성 - 브라우저에 제시할 이미지 url과 원본 크기의 목록을 정의 - 값 : w, x
        sizes 속성 - 미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의 
        
<audio> { display: inline; }
  소리 콘텐츠(mp3)를 삽입
  * autoplay가 지정된 경우, preload는 무시됨
  	autoplay 속성 - 준비되면 바로 재생
  	controls 속성 - 제어 메뉴를 표시
  	loop 속성 - 재생이 끝나면 다시 처음부터 재생
  	preload 속성 - 페이지가 로드될 대 파일을 로드할지의 지정 - 값 : none - 로드하지않음
  														metadata - 메타데이터만 로드
  														auto - 	전체 파일 로드
  	src 속성 - 값 : url
  	muted - 음소거 여부
  
<vidoe> { display: inline; }
  동영상 콘텐츠(mp4)를 삽입
   * autoplay가 지정된 경우, preload는 무시됨
  	autoplay 속성 - 준비되면 바로 재생
  	controls 속성 - 제어 메뉴를 표시
  	loop 속성 - 재생이 끝나면 처음부터 재생
  	muted 속성 - 음소거 여부
  	poster 속성 - 동영상 썸네일 이미지 url
  	preload 속성 - 값 : none, metadata, auto
  	src 속성 - 콘텐츠 url
  	width 속성 - 동영상 가로 너비
  	height 속성 - 동영상 세로 너비
  
<figure> { display: block; } 
<figcaption> { display: inline; }
  <figure>는 이미지나 삽화, 도표 등의 영역을 설정
  <figcaption><figure>에 포함되어 이미지나 삽화등의 설명을 표시
    
profile
There's more to do than can ever be done

0개의 댓글