✔임베디드
직접 코드를 작성하는 게 아니라 외부에서 소스를 불러와서 웹페이지에 삽입하는 요소
✔image
-
alt속성 (alternative)
필수 값은 아니지만 접근성을 올려주는데 중요한 역할을 함
스크린리더가 이미지를 설명할 수 있음
이미지가 깨졌을 때 대체 텍스트로 나옴 -
title전역속성
마우스를 올렸을 때 설명이 뜸 -
width,height속성
단위 안붙임
둘 중 하나만 설정하면 비율 그대로 변경
css로도 가능
✔srcset 속성
반응형 이미지 (view port)
화면 가로길이에 따라서 이미지를 다르게 다운받을 수 있음
작은 화면을 가진 사용자에게는 작은이미지, 큰 화면을 가진 사용자에게는 큰이미지를 보여주는 것
두개 이상의 파일을 쉼표로 구분
✔sizes 속성
600px보다 화면이 넓은 사용자들은 이미지 가로사이즈를 600px로 고정해줘
화면이 450px보다 크고 600px보다 작은 사용자들은 450px로 고정해줘
✔video
img태그와 차이점 :img태그는 빈요소여서 자식을 가질 수 없었지만video는 닫는 태그가 있고 내부에 자식요소를 가질 수 있음
자식컨텐츠는 브라우저가<video>요소를 지원하지 않을 때 보여짐src속성 이용해서 url 써도되고<source>자식을 만들어src속성 이용해도됨controls속성 = boolean 속성이라 쓰기만 하면 비디오에 컨트롤패널 표시됨autoplay속성 = boolean 속성, 자동재생, 사운드가 있는 동영상의 경우 새로고침했을 때 자동재생되지 않을 수 있음(브라우저 속성)muted속성 = 음소거, boolean 속성,autoplay랑 같이 쓰면 새로고침해도 자동재생됨loop속성 = 반복재생, boolean 속성poster속성 = 동영상 썸네일, 기본값은 동영상 첫번째 프레임
✔audio
video태그와 속성 같음
첫번째 source를 보고 이 형식이 현재 브라우저가 지원가능한 형식인지 봄 -> 문제가 없으면 진행 -> 문제가 있으면 다른 source경로를 보게됨
✔canvas
html로 가로 세로 길이정도 마크업하고 javascript로 색, 좌표 등으로 그림을 그리는 요소
✔iframe 인라인 프레임요소
임베디드 요소를 프레임안에 넣고 띄워주는 요소
지도를 띄워주는 역할
