HTML <script> 태그는 HTML 문서 안에 스크립트를 선언할 때 사용하는 요소입니다. 이 태그를 활용하면 브라우저에서 직접 실행되는 클라이언트 사이드 JavaScript를 정의할 수 있습니다.
<script> 태그는 단순히 코드를 삽입하는 것 외에도 다양한 속성을 통해 스크립트의 로딩 방식과 동작을 세밀하게 제어할 수 있습니다.
<script> 태그의 주요 속성
| 속성 | 값 | 설명 |
|---|---|---|
| async | async | 스크립트를 비동기적으로 실행하도록 지정합니다. 스크립트 다운로드와 페이지 렌더링이 동시에 진행됩니다. |
| charset | charset | 스크립트에서 사용하는 문자 인코딩을 정의합니다. |
| defer | defer | 스크립트가 문서 콘텐츠를 생성하지 않음을 선언합니다. 따라서 브라우저(사용자 에이전트)는 스크립트 실행을 기다리지 않고 페이지의 나머지 부분을 계속 파싱하고 렌더링할 수 있습니다. |
| src | URL | 외부 스크립트 파일의 URI/URL을 지정합니다. |
| type | text/javascript application/ecmascript application/javascript text/vbscript | 스크립팅 언어를 콘텐츠 유형(MIME 타입)으로 지정합니다. |
참고: HTML5부터는 JavaScript가 기본 스크립팅 언어이므로
type속성을 생략해도 무방합니다. 또한async와defer속성은src속성과 함께 외부 스크립트를 불러올 때만 유효합니다.
사용 예제
다음 코드를 직접 실행해 보면 <script> 태그를 사용하여 클라이언트 사이드 JavaScript를 정의하는 방법을 쉽게 이해할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML script Tag</title>
</head>
<body>
<script>
document.write("Tutorialspoint 자바스크립트 튜토리얼에 오신 것을 환영합니다!")
</script>
</body>
</html>
위 예제에서는 <body> 요소 내부에 <script> 태그를 작성하고, document.write() 메서드를 사용해 화면에 텍스트를 출력했습니다. 이처럼 <script> 태그는 HTML 문서 어디에나 배치할 수 있으며, 일반적으로 <head> 또는 <body> 끝부분에 위치시킵니다.