[HTML] script 태그의 위치

개요

html 에서 script 태그의 위치는
head 태그 내부여도 되고 body 태그 내부여도 된다.

브라우저는 런타임시 script 태그를 만나면 html의 로딩을 잠시 중단하고
script 태그를 먼저 실행하는데 이때 자바스크립트 내부에서
html의 태그를 조작하는 코드가 있을 시 에러가 발생한다.

html이 아직 읽히지 않아서 id나 class 값을 참조할 수 없기 때문이다.

해결 방법

script 태그를 body 태그 내부 최하단에 위치시킨다.
이렇게하면 body의 코드를 모두 실행한 후에 script를 읽기 때문에
위 문제를 해결할 수 있다.

script 태그는 head 태그 내부에 있어야한다고 주장하는 사람도 있다.
이 조건을 충족시키기 위해서 script 태그 속성에 defer를 추가하면
script 태그를 만났을때 html을 모두 실행한 후에 이 script 태그를 실행한다.

<script src="./script.js" defer />