HTML 4 명세에는 <script> 태그는 HTML 문서의 <head>, <body> 태그 안에다가 쓸 수 있습니다. 외부 자바스크립트 파일을 불러오는 <sciprt> 태그나 CSS 파일을 비롯한 메타 정보를 불러오는 <link>태그는 보통 <head>태그 안에서 사용합니다.
페이지에 영향을 주는 스타일과 스크립트를 가장 먼저, 가능한 한 많이 로드하고 있어야 그 뒤에 불러올 페이지 내용이 정확하게 표시되고 동작한다는 이론 때문입니다. 예를 들어 다음처럼 페이지를 만들었습니다.
<html> <head> <title>타이틀</title> <script type="text/javascript" src="abc.js"/> <script type="text/javascript" src="def.js"/> <script type="text/javascript" src="ghi.js"/> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>하하</p> </body> </html> |
이 코드는 아무 문제 없어 보이지만 사실 <head> 태그에서 자바스크립트 파일을 불러오는 동안 실제 페이지 표시가 멈추는 문제가 생깁니다.
물론 한 개가 아니고 여러개일때 인터넷 익스플로러8, 파이어폭스 3.5, 사파리 4, 크롬2 브라우저는 파일을 동시에 받긴 합니다만... 완전히 문제가 해결되진 않았습니다. 스크립트를 내려받거나 실행하는 동안에는 다른 자원을 내려받을 수 없으므로 모든 <script> 태그를 가능한 한 <body> 태그의 마지막에 배치해서 페이지 전체를 내려받는 것에 영향을 주지 않게 하길 권합니다.
예를 들면 다음처럼 할 수 있습니다.
<html> <head> <title>타이틀</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>하하</p> <script type="text/javascript" src="abc.js"/> <script type="text/javascript" src="def.js"/> <script type="text/javascript" src="ghi.js"/> </body> </html> |
권장되는 css 위치는 <head> 안이고, script 위치는 </body> 앞쪽 입니다.
2010년도 내용이라 지금 기술과 브라우저 환경을 비교했을 때, 어찌 바뀌었는지는 잘 모르겠습니다.
* 중요
일반적으로 <script> 태그를 <body>태그 안에 두는 것보다는 <head> 태그 안에 두는 것이 안전합니다.
특히, <script> 태그의 코드가 페이지 로드 중에 실행되는 것이라면 <head> 태그 안에 놓아야 에러가 발생하지 않습니다.
'개발 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트 한글 글자 길이 2로 처리하기 (1) | 2015.07.02 |
|---|---|
| JSON 사이트 소개와 사용법 및 쓰는 이유 (0) | 2015.07.01 |
| jQuery addClass removeClass 사용법 (0) | 2015.07.01 |
| jQuery offset top left 값 가져오기 (0) | 2015.06.30 |
| java의 response가 list<map<String, Object>>인 경우에 javascript에서 어떻게 쓰죠? (0) | 2015.03.27 |
| 자바스크립트 속성 관련 사이트 소개 : 코소(koxo) (0) | 2014.01.04 |
| 자바스크립트 사이트 소개 : w3schools (0) | 2014.01.03 |
