임베디드 요소 Embedded elements

빈 요소이다. 닫는 태그 없이 쓴다.

src에는 절대, 상대 경로를 입력할 수 있다.

alt는 스크린 리더로 읽어주므로 웹 접근성 차원에서 중요하다. 오류, 차단 등에도 이용

(툴팁으로 설명 넣고 싶을 땐 title 속성 알려줬었다.)

width, height 줄 수 있는데 width만 주어도 기존 정해진 사이즈의 비율에 맞춰서 변경된다.

이건 브라우저가 지원하느냐로 갈린다.

jpeg는 압축이 잘되서 많이 쓴다. 용량이 매우매우 중요한 것이기 때문

png는 투명도가 적용된다는 점(제품 사진이나 아이콘)

gif는 색의 범위가 좀 작다.

svg는 좀 다른데. 위는 "래스터" 이미지고 이건 "벡터" 이미지다.

이미지를 커다랗게 확대했을 때 래스터 이미지는 계단형으로 깨져버린다. 벡터이미지는 점과 점만 있으면 그걸 잇는 식으로 되어 있어 표나 그래프에 많이 쓰인다.

webp는 대체를 하고 싶어서 나왔는데 브라우저 지원이 약함(can i use로 확인하자)

src의 세트? 왜 필요한가? 반응형을 위해. 사용자의 뷰포트에 따라 달라지는 것

예시는 placeholder.com에서 테스트용 이미지(커스텀 사이즈)를 가져온다.

작은 것부터 쓰면 된다.

이미지 파일 캐싱 끄기 체크

뷰포트 작게 했을 때 small.png부터 가져온다 순차적으로 크게 가져온다. 근데 가장 큰거 가져오면 그걸로만 쓰게된다.

조건과 그 값을 적어준다. CSS의 미디어쿼리 같은 걸 의미하는 것 같았다.

이건 몰랐다.

가장 큰 width부터 걸러내려가는데 min-width, max-width를 속성으로 준다. 600px보다 크면 그냥 600px로 보여줘 이런 식으로. 미디어 쿼리와 비슷한데 처음 알게 되었다.

바로 전 강의에서 저걸 지정하지 않았을 땐 600px이 넘었을 때 무한정 늘어났었다. 줄어들 때도 무한정 줄어들었었다.

선생님께서 이건 CSS로도 되니까 srcset을 기억해두라고 하셨다.

이미지와 달리 내부에 자식 컨텐츠(안내 문구)를 넣을 수 있다. 정상 작동 안할 때 보여진다. 태그까지도 넣어줄 수 있다.

mp4를 지원한다면 source를 제대로 인식하고 src처럼 동작하게 된다. source 태그로 따로 지정해줄 수 있다는 점이 신기하다.

일반적인 플레이어 모양을 만들기 위해 controls 속성을 주면 된다.

autoplay는 넣어주어도 새로고침 시 막기도 한다. 사운드가 있다면 바로 켜지게 하지 않아야 유저 경험에 좋다. 따라서 muted를 주면 정상 작동시킬 수 있다.

loop, height, width, 썸네일용 poster(이미지 지정 or 첫 프레임)도 있다.

비디오 태그는 사용해본 적이 있는데 audio는 안 써봤지만 거의 동일하다고 한다.

소스를 한 개 이상을 지정해줄 수 있다는 것.

src 봤더니 다 지원 안한다면 내부 자식으로 안내 문구를 넣어주자.

figure-figcaption과 같이 써주면 좋다.

어떤 건지만 살짝 알아본다.

canvas란 JS로 HTML 내부에 그림을 그리는구나~

iframe은? 임베디드해서 보여준다. 다른 HTML 페이지를(허용한 데만 가능)