728x90
반응형
728x90
목 차
반응형
1. <script> 태그란?
- HTML의 <script> 태그는 웹 페이지에서 자바스크립트(JavaScript) 코드를 포함하거나 외부 스크립트 파일을 가져올 때 사용되는 태그입니다. <script> 태그는 웹 페이지의 동적 요소를 구현하고, 페이지 로드 시 특정 기능을 실행하거나 사용자 상호작용에 반응하는 로직을 정의할 수 있습니다.
2. 사용법
2-1. 내부 스크립트
- 브라우저는 <script> 태그 내부에 있는 코드를 실행합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>My Web Page</h1>
<script>
console.log("Hello, World!");
</script>
</body>
</html>
2-2. 외부 스크립트
- app.js 파일에 있는 자바스크립트 코드를 가져와서 실행합니다. 외부 스크립트는 재사용성이 높고, 코드의 분리와 유지보수가 용이합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>My Web Page</h1>
<script src="app.js"></script>
</body>
</html>
3. 속성
3-1. async
- async 속성은 외부 스크립트를 비동기적으로 로드하고 실행합니다. 즉, HTML 문서가 계속해서 파싱되는 동안 스크립트를 동시에 로드합니다. 스크립트가 준비되면 바로 실행됩니다.
- 이 속성은 페이지 성능을 높이는 데 유용하지만, 스크립트 실행 순서를 보장하지 않기 때문에 의존성이 없는 스크립트에 사용됩니다.
<script src="app.js" async></script>
3-2. defer
- defer 속성은 스크립트를 비동기적으로 로드하지만, HTML 문서의 파싱이 끝난 후에 스크립트를 실행합니다. 이 속성은 스크립트 실행 순서를 보장하므로 여러 개의 스크립트 파일이 있을 때 유용합니다.
<script src="app.js" defer></script>
3-3. type
- type 속성은 스크립트의 MIME 타입을 지정합니다. 기본값은 text/javascript로, 자바스크립트 파일이 사용됩니다. 현대 브라우저에서는 type 속성이 생략되어도 자동으로 자바스크립트로 인식됩니다. 하지만 다른 스크립트 타입을 사용할 때는 type을 명시해야 합니다.
<script type="module" src="app.js"></script>
3-4. crossorigin
- crossorigin 속성은 외부 스크립트의 CORS(Cross-Origin Resource Sharing) 요청 정책을 정의합니다. 주로 다른 도메인에서 스크립트를 로드할 때 사용됩니다.
<script src="app.js" crossorigin="anonymous"></script>
4. 자바스크립트 위치
- <head>: 자바스크립트 파일을 <head>에 넣으면 HTML이 파싱되기 전에 스크립트가 실행될 수 있어, DOM 조작이 필요한 스크립트라면 예상치 못한 에러가 발생할 수 있습니다.
- 끝 부분: 일반적으로 페이지의 성능 최적화를 위해 끝에 스크립트를 배치하는 것이 좋습니다. 이렇게 하면 HTML이 모두 파싱된 후에 스크립트가 실행되므로 DOM을 바로 조작할 수 있습니다.
<body>
<!-- body content -->
<script src="app.js"></script>
</body>
5. 주의 사항
- 자바스크립트는 기본적으로 동기적으로 실행되기 때문에 페이지의 성능에 영향을 미칠 수 있습니다. 비동기 처리와 같은 최적화 기법을 사용할 수 있습니다.
- 다른 도메인에서 스크립트를 로드할 때는 CORS 정책에 유의해야 합니다.
- 너무 많은 스크립트 파일을 로드하면 페이지 로드 속도에 영향을 줄 수 있으므로, 번들링 및 최소화 작업이 필요합니다.
728x90
반응형
'프로그래밍 > HTML' 카테고리의 다른 글
| [HTML] meta 태그 (0) | 2024.10.15 |
|---|---|
| [HTML] link 태그 (0) | 2024.10.13 |
| [HTML] p 태그 - 줄바꿈 (0) | 2024.10.09 |
| [HTML] a태그 noopener와 noreferrer 정리 (0) | 2024.10.04 |
| [HTML] a 태그 (0) | 2024.10.03 |