body 태그 세번째

img

이미지 삽입을 위한 필수 태그

src

이미지 url 을 삽입 하기 위한 필수 태그

alt

이미지를 대체하기 위한 텍스트(필수)

width

가로 사이즈를 변경하기 위한 속성

만약 이미지의 크기를 변경하기 위한 목적이라면 width 와 height 중 하나만 지정할 것.

만약 둘 다 설정하면 이미지 비율을 유지한 채 작은 속성이 선택되게 됨.

srcset

반응형에서 사용됨

다양한 사이즈의 뷰포트일 경우 맞는 이미지를 배열에 넣어두어, 지정해 사용하게 됨.

<img srcset="images/heropy_small.png 400w,
             images/heropy_medium.png 700w,
             images/heropy_medium.png 1000w"
             

x Unit

이미지 비율, 일반적으로 W가 사용됨

sizes

반응형에서 사용됨

사이즈를 여러가지 넣어두고, 최적화된 조건에 맞는 srcset에서 이미지를 불러와 사용함

출력 크기와 최적화된 크기를 동시에 지정하는 것

audio

소리에 대한 내용이 들어갈 경우

autoplay

사이트가 열리자마자 실행됨

controls

제어 메뉴를 보여줌

loop

반복 재생

src

콘텐츠 url 설정

video

동영상 콘텐츠 mp4 를 삽입하는 태그

autoplay

준비되면 바로 재생

controls

제어메뉴를 보여줌

crossorigin

동영상의 경우 용량이 크기 때문에, 다른 서버에서 가져와야 되는 경우가 많기 때문에, 다른 도메인에서 데이터를 받아오는 것은 동일출처를 검사하는지 안하는지 확인해주어야 함.

poster

썸네일 (url)

src

콘텐츠 url 로 파일 경로를 입력해줌.

iframe

다른 HTML 페이지를 현재 페이지에 삽입하는 것.

중첩된 브라우저 컨텍스트를 표시하는 것.

(유튜브, 빔웨어 등)

src

가져올 웹페이지의 url

sandbox

보안을 위한 읽기 전용으로 삽입하는 게 가능 ->

조건으로 양식 제출, 자바스크립트 실행 등을 줄 수 있음

canvas

canvas api나 webGL api 를 사용하여 그래픽이나 애니메이션을 렌더링

자바스크립트를 이용해 해당 api를 사용함

script

자바스크립트 코드를 실행시키는 부분

src

외부의 자바스크립트 파일을 불러와야 함.

src로 외부 코드를 가져오면 script내에 작성된 코드는 무시됨.

defer

문서 파싱 후 작동 여부를 넣어줌.

<script>
  const dom = document.getElementById("hi");
</script>
<div id="hi">hi</div>

위 처럼 작성하면 자바스크립트 코드는 에러를 뱉는다. 왜냐하면 브라우저는 파일을 위에서부터 순차적으로 읽기 때문에 자바스크립트를 읽는 시점에는 div 가 읽히지 않았기 때문이다.

이 부분을 문서 파싱 후 동작할 수 있도록 해주는 것이 defer이다.

noscript

스크립트를 지원하지 않는 경우에 삽입할 HTML 을 정의

브라우저에서 스크립트를 지원하지 않을 수 있어서 해당 자바스크립트가 없을 경우 실행될 HTML을 정의함.

iframe에서 보안 상 자바스크립트를 막는 경우가 있는데, 이런 경우를 대처하는데 사용될 수 있음.