임베디드요소

내용을 코드로 작성하는것이 아니라 외부의 소스를 가져와서 웹페이지에 표현하는 방법

ex. 이미지 비디오 

---

<img> 이미지 삽입요소

빈요소- 닫는태그가 사용되지 않음

 

-src (source) 특성은 필수 ,src 속성에 값으로 들어가는 애들이 url, 이미지가 위치한 파일의 경로 

 

절대경로

<img src="~~~">

어떤 위치에서 어떤 파일이던간에 보여질 수 있는것들 

마우스 우클릭- 이미지 링크복사 한 값들을 넣어서 사용

 

상대경로 

내가 있는 현재 위치에서 이미지가 있는 위치를 나타내고 가리킬때 

현재위치가 어디냐에 따라서 다른 이미지가 보여질 수 있음 

 이미지 파일을 만든 뒤에 파일을 넣어두고 경로를 입력 

 

 

 

 

 

 

---

<alt 속성> ( alternative 속성 = 대체 텍스트)

이미지에 대한 설명을 텍스트로 직접 입력하는 속성 

스크린 리더 사용에 용이 접근성 올라감

절대경로를 이용하여 표현한다면 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수없는 경우에도 이 속성의 값을 대신 보여줌 

 절대경로 링크에 오타를 내게 되면 

깨진 사진 파일과 내가 alt 속성으로 설명했던 오렌지가 텍스트로 설명 한다. 

 

 

<width> 

폭

<height>

높이

css를 이용한 것 이 아닌 이미지 자체에서 사이즈를 조정할 수 있음. 

숫자를 속성의 값으로 받음.

---

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

-래스터 이미지 확대하면 확대할수록 계단형으로 깨질 수 있음 (풍경, 일반적인 사진)

 

JPEG 정지 이미지의 손실 압축에 적합 (현재 가장 많이 사용됨)

 

PNG 원본이미지를 보다 정확하게 보여주거나 투명도가 필요한 경우 JPEG 보다 더 선호 

          ex. 아이콘

GIF 여러장의 이미지로 이루어진 에니메이션 표현 기능 위에것들 보다 지원되는 컬러 범위가 적음-화질이 떨어짐

 

WEBP 구글이 만든 이미지 포맷, 품질, 압축률 등이 훨씬 우수하긴 하나 지원 브라우저가 제한적

구글에 can i use 에서 지원 가능한 브라우저를 확인 가능함

 

-벡터 이미지 : 아무리 확대 해도 이미지가 깨지지 않음 (아이콘, 그래프 그릴때 )

SVG 다양한 크기로 정확하게 그려야 하는 아이콘, 다이어그램 등에 사용됨 

 

---

srcset 

이미지의 url 

여러개의 구성으로 set로 하는 이유는 반응형 이미지를 만들기 위해 

사용자의 viewport  => 노트북으로 보는것과 휴대폰으로 보는것은 보이는 화면에 차이가 있음.

                                    그 화면에 맞춰 적절한 이미지의 크기를 보여주기 위한 속성

 

-여러개의 이미지 소스로 쉼표로 구분하는 한개 이상의 문자열 목록 

-선택적으로 공백과 함께 그 뒤에 너비서술자('w') , 픽셀 밀도 서술자 ('x')

 

특정사이즈의 이미지를 구할 때 사용하는 사이트 via.placeholder.com/600  

---

sizes

어떤 특정 조건에 따라서 아예 다른 파일을 줄때도 있고 다른 파일의 사이즈를 지정 

1. 미디어 조건. 

2. 소스 크기 값 

 

size= "(min-width: 600px) 600px,

           (min-width: 450px) 450px,

             300px"

 

600px 이상인 경우엔 600px로 보여주고 450px 이상 600 이하는 450px, 그 나머지 것들은 300px 로 보여주세요! 

---

<video>

 

 

 

비디오 태그 뒤에 문구는 비디오가 나오지 않을 경우 나타나게 되는 문구들

 

 

 

src 

삽입할 동영상의 주소(url) 

src는 선택사항으로 비디오 블록 내의 <source> 요소를 사용하여 삽입 할 수도 있다. 

 

<video controls>

이 속성이 존재하면, 소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume)을 할 수 있는 컨트롤러를 제공합니다.

 

<video autoplay>

자동적으로 재생할 수 있음

새로고침 하면 다시 멈춤

갑자기 재생이 되면 사운드 때문에 불편감을 느낄 수 있기 떄문

 

<video muted>

음소거 역할 

 

=>  <video autoplay muted>  하게 되면 새로고침을 하더라도 계속적으로 재생 가능함 

 

<video loop>

재생이 끝나면 다시 처음부터 재생 할 수 있도록 함 

 

<height> 

높이 설정 가능 

 

<poster>

재생이 되지 않을때 poster를 썸네일로 띄울 수 있음. 만약 poster 기능이 없으면 첫번째 프레임을 포스터 프레임으로 출력 

---

<audio>

src를 이용하거나 자식으로 <source> 요소를 사용해 한 개 이상의 오디오 소스를 지정 할 수 있다. 

 

지원하는 오디오를 찾기 위해서 여러가지를 해놓음 

 

 

 

 

 

<autoplay>

오디오를 가진 비디오를 자동으로 재생하는 사이트는 사용자 경험에 악영향을 끼칠 수 있으므로 어렵다. 

 

---

<canvas> 그래픽 캔버스 요소 

마크업을 html로 하고 내부에 그림을 그리려면 자바스크립트를 이용한다. 

---

<iframe> 인라인 프레임 요소

중첩 브라우징맥락을 나타내는 요소로, 현재 문서 안에 다른 html 페이지를 삽입