[HTML/CSS] 임베디드 요소

임베디드 요소

임베디드 요소는
외부 소스를 가져와서 내장시키는 것이다.

🔶 img

이미지를 삽입할 수 있다.
내용을 작성하지 않는 빈 요소!

🔹 특성

• src - 필수이다! 이미지의 경로를 지정한다.
• alt(alternative) -
  optional, 스크린 리더가 alt 값을 읽어
  사용자에게 이미지를 설명한다.

또한 이미지를 읽어올 수 없는 경우에도
에러 페이지 대신 대체 텍스트인 alt 값을 보여줄 수 있다.
alt 속성은 원래는 툴팁으로 나타나는 속성은 아니므로,
title 속성을 사용하는 편이 더 적합하다.

• height - 픽셀 기준 높이.
• width - 픽셀 기준 너비. 단위를 적지 않는다.
  width만 적게 되면 기본적으로 원래의 너비/높이 비율을 유지한다.

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

파일의 유형에 따라 지원이 될수도, 안 될수도 있다.
웹 브라우저가 지원하는 이미지를 알아야 한다.
대표적으로는 JPEG, PNG, GIF, WEBP, SVG가 있다.

🔹 JPEG - image/jpeg
웹의 이미지는 용량을 더 고려해야 하기 때문에
정지 이미지에 가장 많이 사용한다. 압축률이 좋은 편!

🔹 PNG - image/png
투명도가 적용 가능한 유형!

🔹 GIF - image/gif
애니메이션을 표현 가능한 유형. 지원 컬러 범위가 조금 더 적다.

🔹 WEBP - image/webp
위의 포맷들보다 압축률이 좋으나,
지원하는 브라우저가 제한적이다.

🔹 SVG - image/svg+xml
벡터 이미지.
다양한 크기에 적합한 아이콘, UI 등에 사용한다.

< 래스터 이미지와 벡터 이미지의 차이 >
이미지 확대 시 계단 현상이 있고 없고의 차이가 있다.
앨리어싱 현상이라고도 한다.
안티앨리어싱이란 말을 많이 들어보았을텐데,
이는 앨리어싱 현상을 방지하는 것이다!

caniuse.com

에 접속하면, 브라우저가 지원 가능한 이미지 포맷을 확인 가능하다.

🔶 반응형 이미지

🔹 srcset
이미지에 하나의 url이 아닌 여러개의 경로로 입력할 수 있다.
반응형 이미지를 만들기 위함이 목적이다. (뷰포트 고려)

placeholder.com

에 들어가면 뷰포트에 따른 이미지를 테스트 할 수 있는 견본이 있다!
(너무 신기.... 편리..💬)

<img
  src="이미지.png"
  srcset="small.png 300w, medium.png 450w, large.png 600w"
/>

이미지의 크기가 뷰포트에 따라 변하지 않으면,
개발자 도구의 Network탭의 Disable cache를 고려해볼 것!

🔹 sizes
특정 조건과 조건에 맞는 값을 지정한다.

<img
  src="이미지.png"
  sizes="(min-width: 300px) 300px,
(min-width: 450px) 400px,
(min-width: 600px) 600px"
/>

라고 쓰면 정확히 300px, 450px, 600px의 이미지가 되기 전까지는
그 전 범위의 이미지를 나타낸다.
srcset과 sizes는 위와 같은 면에서 용도가 조금 다르다.

🔶 video

- 속성

🔹 src
image 태그와 유사하게 src 속성이 있다.
image 태그는 빈 요소지만, video 태그는 자식 요소가 존재할 수 있다.
내용을 입력하면, video를 나타낼 수 없을 때 해당 컨텐츠를 보여준다.

<video>
  <source src="비디오.mp4" />
  Sorry!
</video>

와 같이 써도 비디오.mp4 파일을 보여줄 수 있기에,
video 태그의 src 속성이 optional이 될 수 있다.

🔹 controls - 컨트롤 패널이 나타난다.

🔹 autoplay - 자동 재생, 새로고침을 누르면 다시 재생되지 않음.
이같은 상황에서 다시 재생하게 하려면 muted 속성을 추가해주면 된다.
사용자 경험(UX)를 고려한 부분이다!
즉 autoplay 속성을 지정한다고 자동 재생되는 것이 아니다!

🔹 loop - 동영상이 끝나면 다시 재생해준다!

🔹 poster - 썸네일과 같은 역할을 한다.
지정하지 않으면, 첫 번째 프레임이 첫 화면으로 등장한다.

🔶 audio

대부분 video 태그와 같은 속성, 비슷한 특성을 공유한다.

<audio controls>
  <source src="1.opus" type="audio/ogg; codecs=opus" />
  <source src="2.ogg" type="audio/ogg; codecs=vorbis" />
  <source src="3.mp3" type="audio/mpeg" />
</audio>

와 같이 다중 <source> 요소를 쓰게 되면,
위에서부터 차례로 지원 가능한지를 확인하여 재생한다. 🔊

🔶 canvas, iframe 차이

canvas는 그래픽 캔버스 요소이다.
js와 혼용해야 쓸 수 있고, html 단일 사용으로는 거의 표현하기 힘들다!

iframe은 인라인 프레임 요소이다.
어떤 외부 소스(html 등)를 frame 안에 보여주도록 한다.
보안 상의 이유로 iframe에서 표현할 수 없는 컨텐츠도 있다.