<7> HTML & CSS

[멀티미디어]

<img />: 이미지를 삽입

              속성

              - src: 이미지 URL(필수)

                       값: URL

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

              - width: 이미지의 가로 너비

              - height: 이미지의 세로 너비

              - srcset: 브라우저에게 제시할 이미지 URL과 원본 크기의 목록을 정의(반응형 웹사이트를 만들때 활용)

                            값: w(이미지의 원본 크기 가로너비), x(이미지의 비율 의도, ex.1을 기준으로 몇배인지)

              - sizes: 미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의(반응형 웹사이트를 만들때 활용)

 

<audio>: 소리 콘텐츠(MP3)를 삽입, autoplay가 지정된 경우, preload는 무시됨

               속성

               - autoplay: 준비되면 바로 재생

                                 값: 불린(Boolean)

               - controls: 제어 메뉴를 표시

                                 값: 불린(Boolean)

               - loop: 재생이 끝나면 다시 처음부터 재생

                                 값: 불린(Boolean)

               - preload: 페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공)

                                값: none: 로드하지 않음, metadata(기본값): 메타데이터만 로드, auto: 전체 파일 로드

               - src: 동영상 썸네일 이미지 URL

                                값: URL

               - muted: 음소거 여부

                                 값: 불린(Boolean)

 

<video>: 동영상 콘텐츠(MP4)를 삽입, autoplay가 지정된 경우, preload는 무시됨

               속성

               - autoplay: 준비되면 바로 재생

                                 값: 불린(Boolean)

               - controls: 제어 메뉴를 표시

                                 값: 불린(Boolean)

               - loop: 재생이 끝나면 다시 처음부터 재생

                                 값: 불린(Boolean)

               - muted: 음소거 여부

                                 값: 불린(Boolean)

               - poster: 동영상 썸네일 이미지 URL

                                 값: URL

               - preload: 페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공)

                                값: none: 로드하지 않음, metadata(기본값): 메타데이터만 로드, auto: 전체 파일 로드

               - src: 동영상 썸네일 이미지 URL

                                값: URL

               - width: 동영상 가로 너비

               - height: 동영상 세로 너비

 

<figure>, <figcaption>: <figure>는 이미지나 삽화, 도표 등의 영역을 설정

                                    <figcaption>는 <figure>에 포함되어 이미지나 삽화 등의 설명을 표시(Figure Caption)

 

[내장 콘텐츠]

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

                속성

                - name: 프레임의 이름

                - src: 포함할 문서의 URL

                         값: URL

                - width: 프레임의 가로 너비

                - height: 프레임의 세로 너비

                - allowfullscreen: 전체 화면 모드 사용 여부

                         값: 불린(Boolean)

                - frameborder: 프레임 테두리 사용 여부

                         값: 0(보통 외곽선 사용x), 1(기본값)

                - sandbox: 보안을 위한 읽기 전용으로 삽입

                         값: 불린(Boolean) orallow-form: 양식 제출 가능,allow-scripts: 스크립트 실행 가능,

                               allow-same-origin: 같은 출처(도메인)의 리소스 사용 가능

 

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

                속성

                - width: 캔버스의 가로 너비

                - height: 캔버스의 세로 너비

 

[스크립트]

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

                속성

                - async: 스크립트의 비동기적(Asynchronously) 실행 여부

                             값: 불린(Boolean), 특징: src 속성 필수

                - defer: 문서 파싱(구문 분석) 후 작동 여부

                             값: 불린(Boolean), 특징: src 속성 필수

                - src: 참조할 외부 스크립트 URL

                             값: URL, 특징:포함된 스크립트 코드는 무시됨

                - type: MIME 타입 

                             값: text/javascript(기본값)

 

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