07. HTML / 요소 - 멀티미디어 & 내장 콘텐츠 & 스크립트

 

멀티미디어 

 

        img 태그 (이미지를 삽입 , 빈태그)

              - 필수 속성으로는 src 속성과 alt 속성은 필수 

       

   

srcset, size 속성 - (반응형 웹사이트 제작할 시 사용) 

        -srcset (2장 이상 사용할때 사용) 은 브라우저에 제시할(사용할) 이미지들과 그 이미지들의 원본 크기를 지정한다. 

        1장이면 src 사용하면 된다. 

        -sizes 는 미디어 조건과 그 조건에 해당하는 미이지의 '최적화 출력 크기'를 지정 

size 최적화-> 브라우저크기가 500px이면 444px로 최적화 하고 444px니깐 이미지를 700w 미디엄을 선택 ( 낮은거에서 높이는건 안좋음 이미지가 깨지기 때문)

 

 

width 속성 

width를 400으로 설정하면 이미지는 무조건 400크기로 출력이 되고 브라우저의 크기에 따라 변경되는 이미지는 변함이 없다.

 

 

 

 audio 태그 ( 소리 콘턴츠 (mp3) 를 삽입 )

controls 속성을 넣어야 화면에 오디오 창이 뜬다.

 

 

 

video 태그   

 

       - autoplay가 지정된 경우, preload는 무시됨.

 

 

 

figure태그,  figcaption 태그 

지금 t스토리 이 사진에 지금 이글을 쓰는거와 같은 기능 ( 사진 밑 글 )

 

 

 

내장 콘텐츠

 

 

iframe 태그 ( 다른 HTML 페이지를 현재 페이지에 삽입 ) 

 

인라인 태그 이기 때문에 구역을 설정하기 위해 div 로 묶어주고 iframe 태그를 설정한다.

페이지 안에 네이버 페이지가 들어가 있다. 유튜브가 이런식으로 페이지안에 동영상을 넣어서 만든다.

 

 

canvas 태그  ( Canvas API 이나 WebGL API를 사용하여 그래픽이나 애니메이션의 범위를 지정 )

     속성에는 width, height ( java script를 이용하여 그림을 그릴수 있다.) 

 

 

script 태그 (스크립트 코드를 문서에 포함하거나 참조(외부 스크립트) )

async 속성 - 순차적이냐 아니냐 (src 속성 필수) defer 속성 - 순차적이 아니고 모든 문서를 분석후 작동 (src 속성 필수)

    src 속성은 포함된 스크립트 코드는 무시가 된다. 

 

                    순차적 문제 

js에서 id my-name을 찾아서 콘솔창에 출력하는 간단한 코딩인데 오류가 난다 . 그 이유는 코드들은 순차적으로 이루어지는데 script태그가 도착하고 밑에 바디 태그는 도착이 안하여 바디 태그에 정보가 없기 때문이다.

 

                    해결 1. ( js 태그를 맨 밑으로 가서 정보를 읽는다. ) 

 

                    해결 2. (defer 속성을 이용하여 html 코드의 모든 문서를 분석한후 실행 되게 한다. )

 

 

noscript 태그 ( 스크립트를 지원하지 않는 경우에 삽입할 HTML 을 정의 <거의 옛날에 사용> )