임베디드 요소
임베디드 요소란?
외부의 리소스를 불러와서 삽입할 수 있게 해주는 요소이다.
✏️ img 태그
이미지 삽입 요소이며, 안에 들어가는 내용이 없는 빈 태그이다.
<img src="이미지의_경로" alt="img태그">필수 속성
src이미지의 경로를 지정해준다. (절대경로/상대경로)alt이미지에 대한 설명을 적어주는 곳이며, 스크린 리더기 등ㅇ에서 alt 값을 읽어 사용자에게 보여주기 때문에 필수로 작성해야 한다. 또한 이미지를 불러올 수 없는 경우 보여준다.
기타 속성
width이미지의 너비를 명시한다.height이미지의 높이를 명시한다.
등이 있다.
srcset속성
여러 개의 이미지 소스의 후보를 쉼표로 구분하여 하나의 세트로 묶어서 사용할 수 있다.
이 속성은 반응형 이미지를 구현하기 위해 사용한다.
즉, 사용자의 화면(viewport)에 따라서 이미지의 크기가 다르게 보이는데, 이를 해결하기 위해 작은 화면에는 작은 이미지를 보여주고 큰 화면에는 사용자에게 큰 이미지를 보여준다.
<img srcset="/이미지경로/pic_960.jpg 960w,
/이미지경로/pic_575.jpg 575w"
sizes="(min-width: 960px) 50vw,
(min-width: 575px) 75vw,
100vw"
src="/이미지경로/pic_575.jpg" alt="pic">결과 확인
- 960px 이상일 때는
pic_960.jpg를 50vw의 너비로 보여준다. - 960px 미만, 575px 이상일 때는
pic_575.jpg를 75vw의 너비로 보여준다. - 그 외는
pic_575.jpg를 100vw 너비로 보여준다. - 이미지 소스를 나열할 때는 내림차순으로 정렬해야 한다.
✏️ video 태그
비디오 플레이어를 지원하는 미디어 플레이어를 문서에 삽입해준다
이 태그는 닫는 태그가 있어서 자식 태그를 넣을 수 있다. 자식 태그로는 비디오가 정상적으로 작동하지 않을 때, 작동되지 않음을 사용자에게 알리는 용도로 사용하는 편이다.
<video height="180" width="288" controls>
<source src="비디오1.ogg" type="video/ogg">
<source src="비디오1.mp4" type="video/mp4">
해당 브라우저가 video를 지원하지 않습니다.
</video>속성
autoplay비디오의 자동으로 실행되게 해준다.controls비디오의 실행을 제어할 수 있는 제어기가 표시되게 해준다.height비디오의 높이를 지정할 수 있으며, 값은 픽셀(pixel) 단위로 명시한다.loop비디오의 반복 재생이 가능하도록 해준다.muted비디오가 음소거인 상태로 만들어준다.poster비디오의 썸네일을 표시해주며, 값은 URL 주소로 넣어줘야 한다.preload페이지가 로드될 때 오디오 파일도 같이 로드하는지, 그리고 여부에 대한 방법을 결정할 수 있다.
값으로는auto,metadata,none이 있다.src비디오 파일의 위치 경로를 명시해준다.
✏️ audio 태그
문서에 오디오 콘텐츠를 넣을 때 사용하며, 오디오는 src 속성을 사용하거나 자식 태그인
<source>를 사용하여 넣을 수 있다.
비디오 태그와 마찬가지로 지원하지 않는 브라우저를 고려하여 여러 개의 파일을 넣을 수 있다.
<audio controls>
<source src="/audio1.ogg" type="audio/ogg">
<source src="/audio1.mp3" type="audio/mpeg">
해당 브라우저가 audio를 지원하지 않습니다.
</audio>속성
autoplay오디오가 자동으로 실행되게 해준다.controls제어기가 표시되게 해준다.loop오디오가 반복 재생이 가능하도록 해준다.muted오디오가 음소거인 상태로 만들어준다.preload페이지가 로드될 때 오디오 파일이 같을 로드하는지, 그리고 여부에 대한 방법을 결정할 수 있다.
값으로는auto,metadata,none이 있다.src오디오 파일의 위치 경로를 명시해준다.
✏️ canvas 태그
문서 내에 마크업으로 그려 스크립트를 통해 애니메이션을 구현할 수 있다.
HTML에서는 가로, 세로 마크업만 가능하지만, script가 들어가면 다양하게 구현할 수 있다.
<canvas id="myCanvas" style="border: 2px solid black">
사용자의 웹 브라우저가 canvas 요소를 지원하지 않습니다.
</canvas>✏️ iframe태그
현재 문서에 외부 소스를 가져와서 어떠한 웹 사이트를 보여주기 위해 사용하며, 홈페이지 내에 지도를 보여주기 위해 사용하는 등이 해당된다.
<iframe src="https://www.naver.com/">
<p>현재 사용 중인 브라우저는 iframe 요소를 지원하지 않습니다.</p>
</iframe>예시 화면
큐트걸