HTML 문서에 스크립트를 추가하려면 <script> 태그를 사용합니다. HTML의 <script> 태그는 자바스크립트(JavaScript)와 같은 스크립트를 HTML 문서 내에서 선언하거나 외부 파일로 불러올 때 사용되는 요소입니다.
<script> 태그는 다양한 속성을 지원하여 스크립트의 로딩 방식, 문자 인코딩, 실행 시점 등을 세밀하게 제어할 수 있습니다.
script 태그의 주요 속성
| 속성 | 값 | 설명 |
|---|---|---|
| async | 불리언 속성 | 스크립트가 비동기적으로 실행되도록 지정합니다. 스크립트 다운로드와 페이지 렌더링이 동시에 진행됩니다. |
| charset | 문자 인코딩 | 스크립트에서 사용하는 문자 인코딩 방식을 정의합니다. |
| defer | defer | 스크립트가 문서에 콘텐츠를 생성하지 않음을 선언합니다. 따라서 브라우저(사용자 에이전트)는 나머지 페이지의 파싱과 렌더링을 계속 진행할 수 있습니다. |
| src | URL | 외부 스크립트 파일의 URI/URL 경로를 지정합니다. |
| type | text/javascript application/ecmascript application/javascript text/vbscript |
스크립트 언어를 콘텐츠 타입(MIME 타입) 형식으로 지정합니다. |
| xml:space | preserve | 폐기됨(Deprecated) — 코드 내 공백(whitespace)을 유지할지 여부를 지정합니다. |
HTML에서 스크립트 표시 예제
아래 코드를 직접 실행해 보면서 HTML에서 스크립트가 어떻게 동작하는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML script Tag</title>
</head>
<body>
<script>
document.write("You're visiting tutorialspoint!")
</script>
</body>
</html>
위 예제에서는 <body> 태그 안에 <script> 태그를 배치하고, document.write() 메서드를 사용해 화면에 텍스트를 출력합니다. 이처럼 스크립트는 HTML 문서 어디에나 배치할 수 있으며, 일반적으로 <head> 또는 <body> 마지막 부분에 작성하는 것이 좋습니다.