HTML정리 - 임베디드 요소

◎ 임베디드 요소

(외부의 소스를 불러와 페이지에 삽입)

 

1. 이미지 

○ <img> : 이미지 삽입 요소(빈요소). 내부에 코드 입력이 아닌 속성으로 이미지 형태를 정의.

● 웹에서 사용하는 이미지 유형

브라우저마다 지원하는 형식이 다르기때문에 이미지가 안나오는 경우도 있음.

약어		MIME타입	파일 확장자	요약
래스터이미지	JPEG	image/ jpeg	.jpg, .jpeg, .jfif, .pjpeg, .pjp	정지 이미지의 손실 압축에 적합(압축률이 좋을수록 로딩이 빠름)
	PNG	image/ png	.png	원본 이미지를 보다 정확하게 보여주거나 투명도가 필요한경우(아이콘, 제품사진 등) JPEG보다 선호됨
	GIF	image/ gif	.gif	여러장의 이미지로 이루어진 애니메이션 표현 가능. 사용되는 컬러는 제한적
	WEBP	image/ webp	.webp	구글이 만든 이미지포맷. 품질, 압축률 등이 훨씬 우수하나 지원 브라우저가 제한적
벡터 이미지	SVG	image/ svg+xml	.svg	다양한 크기로 정확하게 그려야하는 아이콘, 다이어그램 등에 사용

- 래스터 vs 벡터 : 같은 그림을 확대하면 래스터는 픽셀단위로 색칠된 이미지이므로 계단식으로 깨짐.

                            벡터는 직선을 이어 그린것으로 선명도를 유지함.

 

● 속성

▶ src : 포함하고자 하는 이미지 경로를 지정. 필수로 입력해야함.

• 절대경로 : 이미지의 주소를 그대로 가져옴(어디에서나 같은 이미지로 찍힘)
• 상대경로 : 현재 위치에서 이미지의 위치로 가서 가져옴(외부에서는 이미지에 접속 불가능)
• 상대경로 사용법 : src="폴더명/파일제목"

▶ alt : 이미지의 텍스트 설명. 필수는 아니지만 스크린리더 사용시 접근성 차원에서 매우 유용.

          이미지를 표시할 수 없을 때 이 속성의 값을 보여줌.

▶ title : 이미지의 제목. 커서를 이미지에 대면 말풍선이 나옴.

▶ width : 이미지 픽셀 기준 고유 너비. 정수만 들어감.

▶ height : 이미지 픽셀 기준 고유 높이. 대부분 너비 변경시 높이도 같이 바뀌는 경우가 많음.(정해진 비율에 따름)

 

 

● 반응형 이미지를 위한 속성 (사용자의 view port에 따라 반응하는 이미지)

▶ srcset : 사용할 수 있는 이미지 소스의 모음. 쉼표로 구분하는 한 개 이상의 문자열 목록.

-구성 요소

1. 2개 이상의 이미지url을 쉼표로 구분하여 입력

2. 뒤에 공백 입력 후 

┌ 너비 서술자(양의 정수와 바로 뒤의 'w'문자) 

└ 픽셀 밀도 서술자(양의 실수와 바로 뒤의 'x'문자)

입력

    <img src="이미지파일/200.png" 
        srcset="이미지파일/600.png 600w,
                이미지파일/400.png 400w,
                이미지파일/200.png 200w" 
        alt="반응형 이미지">

▶ sizes : 소스의 크기를 나타내는 쉼표로 구분한 하나 이상의 문자열.

-구성 요소

1. 미디어 조건(마지막 항목에서는 생략)

2. 소스 크기값

        sizes="(min-width: 600px) 600px, //조건1.최소너비가 600px인 경우 600px로 고정
            (min-width: 400px) 400px, //조건2. 최소너비가 400px인(400~600) 경우 400px로 고정
            200px //상위 조건에 모두 해당하지 않는 경우 200px로 고정"

 

 

 

---

 

2. 비디오

○ <video> : 비디오 삽입요소. 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입.

                 태그 안에 컨텐츠를 넣을 수 있고, 브라우저가 해당 요소를 지원하지 않을 경우 보여짐.

● 속성

▶ src : 삽입할 동영상 주소(url)입력. 선택사항→자식요소인 <source>로 삽입할 동영상을 명시할 수 있음

 

위 동영상을 넣어보자.

<video src="video.mp4" width="200px" height="100px">비디오</video>

동영상파일이 들어가있지만 재생이 되지는 않는다.

동영상 컨트롤바를 기본적으로 제공하지 않아 control속성으로 넣어주어야한다.

(동영상을 우클릭하면 설정할 수도 있음)

▶ controls : 소리조절, 동영상 탐색, 일시정지/재시작을 할 수 있는 콘트롤러 제공.

<video src="video.mp4" width="200px" height="100px" controls>비디오</video>

페이지 로딩이 완료되면 바로 동영상이 재생되게 하려면?

▶ autoplay : 불리언 속성. 데이터로딩이 완료되지 않더라도 재생 가능한 시점에 자동으로 재생.

                    만약 오디오가 포함된 영상인경우, 새로고침시 재생이 되지 않음 → 사용자가 놀라지 않게 하기 위함

☞ muted속성으로 소리를 없애자

▶ muted : 설정시 오디오가 나오지않음. 기본값은 false며 오디오가 재생됨.

    <video width="200px" height="100px" controls autoplay muted>
        <source src="video.mp4">비디오
    </video>

새로고침시에 동영상이 자동재생된다.

 

▶ loop : 동영상 재생이 마친 후 자동으로 처음으로 돌아감.

 

 

 

 

---

3. 오디오

○ <audio> : 문서에 소리 컨텐츠를 포함. src속성 또는 <source>요소를 사용해 한 개 이상의 오디오 소스를 지정할 수 있음.

                  다수를 지정한 경우 가장 적절한 소스를 브라우저가 고름.

● 속성

▶ autoplay : 전체 오디오 파일의 다운로드를 기다리지 않고 가능한 빠른 시점에 재생을 시작. 음소거 상태여야 동작.

▶ muted : 설정시 오디오가 나오지않음. 불리언 속성.

 

 

4. canvas, iframe요소

○ <canvas> :  그래픽 캔버스 요소. HTML만으로는 사용불가능 → 자바스크립트를 넣어야함.

○ <iframe> : 인라인 프레임 요소. 중첩 브라우징 맥락을 나타내는 요소. 현재 문서 안에 다른 HTML페이지를 삽입.