언어/Javascript
[Javascript]<script>태그의 위치, 위? 아래? / <head>안 혹은 <body>안?
개발자국S2
2023. 6. 12. 14:44
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./lecture.js"></script>
<link href="./lecture.css" rel="stylesheet" />
</head>html은 위에서 아래로 읽는 스크립트 언어이다.
그래서 <html> 태그부터 아래로 읽어내려가는데 <script></script> 태그를 만나면 해당 페이지로 넘어가서 해당 스크립트를 먼저 실행(파싱)한다.
다시말해 html에 작성한 태그들을 js파일에서 따로 명시해주지 않으면 해당 태그는 ‘부재’하다고 판단하는 것.
그럼 위와 같은 에러가 발생한다.
해결방법 1) <script></script> 태그를 body 안, 가장 하단에 위치시키는 것이다.
해결방법2) script태그를 <head>태그 안으로 꼭 위치시켜야한다고 주장하는 개발자들이 있다.
이 경우, <link href="./lecture2.css" rel="stylesheet" defer/> (태그 안에 defer 입력)으로 변경해주면 <head>해당 js가 <head>안에 위치해도 문제가 발생하지 않는다.
어떤 원리인가?
html을 파싱할 때 <script>태그를 발견하면 해당 태그를 먼저 실행시키느라 html 파싱을 멈추기 마련인데, 멈추지 않고 동시에 html과 script 내용을 모두 읽어내려가게 만드는 명령어이다.
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./lecture2.js"></script>
<link href="./lecture2.css" rel="stylesheet" defer />
</head>
반응형