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

Develop/HTML & CSS

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

마크투비 2021. 7. 16. 13:14

강의자료: 한 눈에 보는 HTML 요소 총정리 https://heropy.blog/2019/05/26/html-elements/
강의영상: 패스트캠퍼스 프론트엔드 개발 올인원 패키지 with React Online https://fastcampus.co.kr/

1. 멀티미디어

▪ <img/>

- 이미지를 삽입

- img 요소의 srcset과 sizes 속성

- 이미지를 사이즈별로 2장 이상 사용할 떄 srcset 속성을 이용

- srcset에서 이미지의 크기로 px이 아닌 w(가로 너비의 원본 크기를 설정) 단위 혹은 x 단위를 입력해야 하며, 작은 크기 이미지부터 순서대로 입력

- x 단위보다는 w 단위를 사용하는 것을 추천

- width ~> 일반 출력, sizes ~> 최적화 출력

📌width는 이미지의 ‘출력 크기’만 지정하는 데 반해, sizes는 이미지의 ‘출력 크기’ + ‘최적 크기’도 함께 지정하는 개념

📌sizes와 width를 같이 작성할 경우 width가 우선

📌srcset과 sizes는 IE를 지원하지 않음

속성	의미	값
src	(필수)이미지 URL
alt	(필수)이미지의 대체텍스트
width	이미지의 가로 너비
height	이미지의 세로 너비
srcset	브라우저에게 제시할 이미지 URL과 원본 크기의 목록을 정의	w, x
sizes	미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의

▪ <audio>

- 소리 콘텐츠(MP3)를 삽입

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

속성	의미	값	기본값
autoplay	준비되면 바로 재생	불린(Boolean)
controls	제어 메뉴를 표시	불린(Boolean)
loop	재생이 끝나면 다시 처음부터 재생	불린(Boolean)
preload	페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공)	none: 로드하지 않음, metadata: 메타데이터만 로드, auto: 전체 파일 로드	metadata
src	콘텐츠 URL	URL
muted	음소거 여부	불린(Boolean)

▪ <video>

- 동영상 콘텐츠(MP4)를 삽입

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

속성	의미	값	기본값
autoplay	준비되면 바로 재생	불린(Boolean)
controls	제어 메뉴를 표시	불린(Boolean)
loop	재생이 끝나면 다시 처음부터 재생	불린(Boolean)
muted	음소거 여부	불린(Boolean)
src	콘텐츠 URL	URL
width	동영상 가로 너비
height	동영상 세로 너비
poster	동영상 썸네일 이미지 URL	URL
preload	페이지가 로드될 때 파일을 로드할지의 지정(힌트 제공)	none: 로드하지 않음, metadata: 메타데이터만 로드, auto: 전체 파일 로드	metadata

▪ <figure>, <figcaption>

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

<figure>
  <img src="milk.jpg" alt="A milk">
  <figcaption>Milk is a nutrient-rich, white liquid food produced by the mammary glands of mammals.</figcaption>
</figure>

2. 내장 콘텐츠

▪ <iframe>

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

- 주로 유튜브 동영상을 삽입할 때 자주 쓰임

속성	의미	값	기본값
name	프레임의 이름
src	포함할 문서의 URL	URL
width	프레임의 가로 너비
height	프레임의 세로 너비
allowfullscreen	전체 화면 모드 사용 여부	불린(Boolean)
frameborder	프레임 테두리 사용 여부	0, 1	1
sandbox	보안을 위한 읽기 전용으로 삽입	불린(Boolean) or allow-form: 양식 제출 가능, allow-scripts: 스크립트 실행 가능 , allow-same-origin: 같은 출처(도메인)의 리소스 사용 가능

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML elements</title>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
    <p>우리 페이지야~</p>
    <div><img src="./images/줌455.jpg" alt="mijin"></div>
    <div>
        <iframe src="https://www.naver.com" frameborder="0"
                width="70%"
                height="400px"
                style="border: 4px solid red;"></iframe>
    </div>
</body>
</html>

💢 위 코드대로 실행하면 왜 안나오지..? 자꾸 연결을 거부한다고 하는데...?ㅠㅠ

▪ <canvas>

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

속성	의미
width	캔버스의 가로 너비
height	캔버스의 세로 너비

3. 스크립트

▪ <script>

- 자바스크립트 코드를 문서에 포함하거나 참조(외부 스크립트)

속성	의미	값	특징
async	스크립트의 비동기적(Asynchronously) 실행 여부	불린(Boolean)	src 속성 필수
defer	전체 문서 파싱(구문 분석) 후 작동 여부	불린(Boolean)	src 속성 필수
src	참조할 외부 스크립트 URL	URL	포함된 스크립트 코드는 무시됨
type	MIME 타입	text/javascript(기본값)

▪ <noscript>

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

저작자표시

'Develop > HTML & CSS' 카테고리의 다른 글

Part9. HTML의 전역 속성/특수기호 (0)	2021.07.16
Part8. HTML 요소 - 표 콘텐츠 & 양식 (0)	2021.07.16
Part6. HTML 요소 - 인라인 텍스트 & 수정 (0)	2021.07.10
Part5. HTML <body> 요소 - 콘텐츠 구분 & 문자 콘텐츠 (0)	2021.07.10
Part4. HTML 요소 - 주요범위 & 메타데이터 (0)	2021.07.10

현재글Part7. HTML 요소 - 멀티미디어 & 내장콘텐츠 & 스크립트

마크투비의 고 GO