[TIL] Embedded content

Sohee Yeo·2022년 3월 31일

TIL

목록 보기

5/23

2022.03.30 Today I Learned📚

📝Embedded content

Embedded content is content that imports another resource into the document, or content from another vocabulary that is inserted into the document.

Embedded content란 이미지, 동영상 등 다른 리소스를 문서에 가져오거나 문서에 삽입된 다른 용어에서 내용을 가져오는 것이다.

Embedded content의 주요 tag들

<img>
<picture>
<iframe>
<audio>
<video>

1. img

<img> 이미지를 삽입할 때 사용하는 태그. 닫기태그가 없기 때문에 자식요소를 추가 불가하다.

src (source)
브라우저에게 이미지 파일의 위치 및 파일명을 알려준다. 절대경로 혹은 상대경로 입력.
-절대경로: 전체 경로. 최초 위치에서부터 파일이 있는 곳까지의 루트. 외부에 있는 파일을 가져올 때 사용한다.
ex) C:\Users\User\images\choc.png
http://www.cwhdk.com/images/choc.png
-상대경로: 작업하고 있는 현재 위치로부터 파일을 찾아가는 루트. 내부에 있는 폴더에서 파일을 가져올 때 사용한다.
ex) ./images/choc.png

alt (alternative text)
이미지를 설명하는 속성. 화면에 이미지가 랜더링 되지 않을 경우 alt속성에 적힌 텍스트로 대체된다. 스크린리더와 같은 접근성을 위한 프로그램에 정보를 제공한다. SEO(Search Engine Optimization)에 도움을 주기도 한다. 장식적인 이미지, 아이콘 등에는 alt값을 넣지 않는다.

<img src="img/구름.jpg"> → 읽지 않는다
<img src="img/구름.jpg" alt=" "> → 파일명을 읽는다
<img src="img/구름.jpg" alt=""> → 읽지 않는다
<img src="img/구름.jpg" alt="하늘에 떠 있는 구름"> → '하늘에 떠 있는 구름' 이라고 읽는다

srcset
반응형 이미지를 위한 것. 다양한 크기를 가지는 동일 이미지를 최소 2개 이상 사용할 때 사용한다. 브라우저가 최적의 이미지를 골라서 브라우저에 랜더링한다.
x 서술자
화소의 밀도(pixel density)를 나타낸다. 디바이스의 화소 밀도에 알맞은 이미지를 로딩하도록 브라우저에게 알려준다.

<img
width="200px"
srcset="img/peng_1.png 2x,
        img/peng_2.png 3x"
src="a.png"
alt="걸어가는 펭귄">

w 서술자: 원본 이미지의 넓이를 브라우저에게 알려준다 px이 아닌 w로 표기.

<img
width="200px"
srcset="img/peng_3.png 700w,
        img/peng_2.png 600w,
		img/peng_1.png 300w"
src="a.png"
alt="걸어가는 펭귄">

✒️w서술자와 x서술자는 동시에 사용할 수 없다. 또한 비교적 최신 기능이기 때문에 srcset을 사용할 수 없는 브라우저(Internet Explorer)를 대비하여 src 속성을 유지해야 한다.

sizes 속성
viewport의 조건에 따라 이미지가 UI안에서 차지하게 될 사이즈를 브라우저에 알려준다.

<img
srcset="img/peng_3.png 700w,
        img/peng_2.png 600w,
				img/peng_1.png 300w"
sizes="(min-width: 960px) 250px,
			 (min-width: 620px) 150px,
			 300px"
src="a.jpg"
alt="걸어가는 펭귄">

✒️사이즈가 큰 이미지부터 나열하기

✒️sizes 속성을 사용할 때 CSS와 충돌 할 수 있다. 협업시엔 사전에 반드시 어떠한 방법으로 반응형 이미지를 처리했는지 공유하기!

2. Picture

<picture> 각기 다른 디스플레이 혹은 디바이스에 따라 조건에 맞는 이미지를 보여주는 요소. 이미지 포맷 자체를 변경 할 수 있다

<picture>
    <source srcset="_large.jpeg" media="(min-width:960px)">
    <source srcset="babies.jpeg" media="(min-width:620px)">
    <img src="babies_small.jpeg" alt="귀여운 아기 팽귄들">
</picture>

media 속성
media 속성의 값을 통해 조건에 알맞는 이미지를 찾는다. 조건에 맞는 <source> 요소 안의 srcset 속성 값을 찾아 src 에 넣어 화면에 보여준다. 그렇기 때문에 <img> 요소가 없다면 이미지가 화면에 나타나지 않는다.

✒️<picture> 와 <source> 요소는 <img>가 없으면 화면에 출력되지 않는다!
type 속성
이미지의 포맷 타입을 브라우저에게 알려준다.

<picture>
    <source srcset="babies.webp" type="image/webp">
    <source srcset="babies.avif" type="image/avif">
    <img src="babies.jpeg" alt="귀여운 아기 팽귄들">
</picture>