HTML/태그/script: 두 판 사이의 차이

2025년 1월 2일 (목) 10:25 판

HTML의 주요 태그 목록

분류	관련 태그
문서 기본 구조	<html>	<head>	<body>	<main>	<footer>
메타데이터	<title>	<meta>	<base>	<link>
콘텐츠 구획	<header>	<nav>	<section>	<article>	<aside>
텍스트 콘텐츠	<h1>-<h6>	<p>	<div>	<span>	<pre>
텍스트 형식	<b> / <strong>	<i> / <em>	<small>	<sub> / <sup>	<mark>
수정 표시	<ins>	<del>	<s>	<u>
목록	<ul>	<ol>	<li>	<dl>	<dt> / <dd>
표	<table>	<thead> / <tbody>	<tr>	<th>	<td>
멀티미디어	<img>	<audio>	<video>	<canvas>	<svg>
임베드	<iframe>	<embed>	<object>	<param>
스크립트	<script>	<noscript>	<template>	<slot>
양식	<form>	<input>	<button>	<select> / <option>	<textarea>
구분선	<br>			<hr>

개요

HTML의 <script> 태그는 웹 페이지에 스크립트를 삽입하는 데 사용되는 핵심 요소이다. 주로 자바스크립트를 사용하며, 웹 페이지에 동적 기능을 추가하고 사용자 상호작용을 구현하는 데 필수적이다. HTML5 이후 더욱 다양한 기능과 옵션을 제공하여 현대 웹 개발의 기반이 되고 있다.

기본 문법

기본 구조

<script>
    // 자바스크립트 코드
</script>

타입 지정

script 태그의 기본 type 속성은 "text/javascript"이다.^[1]

<script type="text/javascript">
    console.log("Hello, World!");
</script>

모듈 시스템

ES 모듈

기본 사용법

ES6부터 도입된 모듈 시스템을 사용하려면 type="module" 속성을 지정해야 한다.

<script type="module">
    import { someFunction } from './module.js';
    someFunction();
</script>

.mjs 확장자

.mjs 확장자는 자바스크립트 모듈 파일임을 명시적으로 나타낸다.

<!-- .mjs 파일 import -->
<script type="module" src="module.mjs"></script>

주요 특징

.mjs 파일은 자동으로 strict mode로 실행된다.
모듈 스코프를 가진다 (전역 스코프 오염 방지).
import/export 구문을 사용할 수 있다.
비동기로 로드된다 (기본적으로 defer 속성과 같은 효과).

모듈 import/export 예시

// module.mjs
export const add = (a, b) => a + b;
export default class Calculator {
    // 클래스 구현
}

// main.mjs
import Calculator, { add } from './module.mjs';
import * as utils from './utils.mjs';

타입스크립트 사용

기본 설정

타입스크립트를 사용하기 위해서는 추가 설정이 필요하다.

트랜스파일러 사용

<!-- tsc로 컴파일된 JS 파일 사용 -->
<script src="compiled.js"></script>

<!-- 또는 타입스크립트 컴파일러 직접 사용 -->
<script src="https://unpkg.com/typescript@latest/lib/typescriptServices.js"></script>
<script type="text/typescript">
    interface Person {
        name: string;
        age: number;
    }
    
    const person: Person = {
        name: "홍길동",
        age: 30
    };
</script>

개발 환경 설정

tsconfig.json 설정 필요
모듈 번들러(webpack, rollup 등) 설정
소스맵 생성 여부 결정

스크립트 로딩 최적화

로딩 전략

async vs defer

스크립트 로딩 속성 비교
속성	특징	사용 시기
async	* HTML 파싱과 병렬로 로드 * 로드 완료 즉시 실행 * 실행 순서 보장 안 됨	* 독립적인 스크립트 * 다른 스크립트에 의존성 없는 경우
defer	* HTML 파싱과 병렬로 로드 * DOM 생성 후 실행 * 실행 순서 보장	* DOM 조작이 필요한 스크립트 * 실행 순서가 중요한 경우

동적 임포트

필요한 시점에 스크립트를 로드할 수 있다.

// 동적 임포트 예시
button.addEventListener('click', async () => {
    const module = await import('./feature.js');
    module.doSomething();
});

보안 고려사항

CSP(Content Security Policy)

다양한 CSP 설정으로 스크립트 실행을 제어할 수 있다.

<!-- 기본적인 CSP 설정 -->
<meta http-equiv="Content-Security-Policy" 
    content="script-src 'self' https://trusted-cdn.com">

<!-- nonce 사용 -->
<meta http-equiv="Content-Security-Policy" 
    content="script-src 'nonce-랜덤값'">
<script nonce="랜덤값">
    // 스크립트 코드
</script>

XSS 방지

innerHTML 대신 textContent 사용^[2]
사용자 입력 데이터 이스케이프 처리^[3]
eval() 사용 자제^[4]

브라우저 호환성

주요 기능 브라우저 지원 현황
기능	Chrome	Firefox	Safari	Edge	IE
ES Modules	61+	60+	11+	16+	미지원
Dynamic Import	63+	67+	11.1+	79+	미지원
Module Workers	80+	68+	15+	80+	미지원
TypeScript	지원(컴파일 필요)	지원(컴파일 필요)	지원(컴파일 필요)	지원(컴파일 필요)	부분 지원

디버깅 및 개발

소스맵 사용

트랜스파일된 코드의 디버깅을 위해 소스맵을 활용할 수 있다.

<script src="app.min.js"></script>
<!-- 소스맵 지정 -->
//# sourceMappingURL=app.min.js.map

개발 도구 활용

브라우저 개발자 도구를 통해 브레이크포인트 설정이나 네트워크 요청 모니터링 등 디버깅이 가능하다.

기타

깃허브나 가온 위키 등에서 사용하는 미디어위키 등 거의 대부분의 서비스나 CMS에서는 보안상의 이유로 <script> 실행을 제한한다. 가령 깃허브는 <script> 부문을 제거한다. 이는 XSS 등의 보안을 위해 제한하는 것이다.

각주

↑ HTML5 이전에는 반드시 타입 지정을 해야 했지만, HTML5에서는 기본값이 "text/javascript"가 되어 자바스크립트 사용 시 생략 가능하다.
↑ innerHTML은 HTML 코드를 직접 삽입할 수 있어 XSS 공격에 취약하므로, 단순히 텍스트를 삽입할 때는 textContent를 사용해야 한다.
↑ 사용자로부터 입력받은 데이터는 신뢰할 수 없으므로, 이를 렌더링하기 전에 특수 문자를 적절히 이스케이프 처리해야 한다.
↑ eval() 함수는 문자열을 코드로 실행하는 기능을 제공하지만, 이는 실행 환경에 따라 예상치 못한 취약점을 유발할 수 있으므로, 보안을 위해 사용을 금지해야 한다.자세한 내용은 해당 문서를 참고하자.

[1] HTML5 이전에는 반드시 타입 지정을 해야 했지만, HTML5에서는 기본값이 "text/javascript"가 되어 자바스크립트 사용 시 생략 가능하다.

[2] rHTML은 HTML 코드를 직접 삽입할 수 있어 XSS 공격에 취약하므로, 단순히 텍스트를 삽입할 때는 textContent를 사용해야 한다.

[3] 사용자로부터 입력받은 데이터는 신뢰할 수 없으므로, 이를 렌더링하기 전에 특수 문자를 적절히 이스케이프 처리해야 한다.

[4] val() 함수는 문자열을 코드로 실행하는 기능을 제공하지만, 이는 실행 환경에 따라 예상치 못한 취약점을 유발할 수 있으므로, 보안을 위해 사용을 금지해야 한다.자세한 내용은 해당 문서를 참고하자.

[1]

[2]

[3]

[4]

@@ 1번째 줄: / 1번째 줄: @@
 {{틀:html_태그}}<br/>
-==이 태그는==
+==개요==
-[[HTML]]에서 사용되는 태그로, 스크립트를 정의하는 태그이다. 클라이언트 스크립트를 정의하며, 보통은 [[자바스크립트]]를 사용한다.
+[[HTML]]의 <script> 태그는 웹 페이지에 스크립트를 삽입하는 데 사용되는 핵심 요소이다. 주로 [[자바스크립트]]를 사용하며, 웹 페이지에 동적 기능을 추가하고 사용자 상호작용을 구현하는 데 필수적이다. HTML5 이후 더욱 다양한 기능과 옵션을 제공하여 현대 웹 개발의 기반이 되고 있다.
-==사용법==
+==기본 문법==
-===외부에서 불러오지 않고 사용===
+===기본 구조===
 <syntaxhighlight lang="HTML">
 <script>
-	alert('알림');
+    // 자바스크립트 코드
 </script>
 </syntaxhighlight>
-위와 같이 사용하면, '알림' 이라는 경고창이 뜬다.
+===타입 지정===
+script 태그의 기본 type 속성은 "text/javascript"이다.<ref>HTML5 이전에는 반드시 타입 지정을 해야 했지만, HTML5에서는 기본값이 "text/javascript"가 되어 자바스크립트 사용 시 생략 가능하다.</ref>
-기본적으로 script 태그의 속성은 "text/javascript"이다. 따라서 자바스크립트를 사용시 생략해도 무관하다.<ref>HTML5 이전에는 반드시 타입 지정을 해야 하지만, HTML5에서는 기본값이 "text/javascript"이 되었기 때문에 자바스크립트를 사용하려고 하면 굳이 입력하지 않아도 된다.</ref>
+<syntaxhighlight lang="HTML">
+<script type="text/javascript">
+    console.log("Hello, World!");
+</script>
+</syntaxhighlight>
+==모듈 시스템==
+===ES 모듈===
+====기본 사용법====
+ES6부터 도입된 모듈 시스템을 사용하려면 type="module" 속성을 지정해야 한다.
+<syntaxhighlight lang="HTML">
+<script type="module">
+    import { someFunction } from './module.js';
+    someFunction();
+</script>
+</syntaxhighlight>
+===.mjs 확장자===
+.mjs 확장자는 자바스크립트 모듈 파일임을 명시적으로 나타낸다.
+<syntaxhighlight lang="HTML">
+<!-- .mjs 파일 import -->
+<script type="module" src="module.mjs"></script>
+</syntaxhighlight>
-결국...
+====주요 특징====
-<syntaxhighlight lang="HTML"><script></script></syntaxhighlight> 사이에 스크립트 명령어를 넣으면 스크립트를 사용할 수 있다.
+* .mjs 파일은 자동으로 strict mode로 실행된다.
+* 모듈 스코프를 가진다 (전역 스코프 오염 방지).
+* import/export 구문을 사용할 수 있다.
+* 비동기로 로드된다 (기본적으로 defer 속성과 같은 효과).
-===외부에서 불러와 사용===
+===모듈 import/export 예시===
-HTML 내부에 넣는 것이 아닌 외부에 있는 스크립트 파일을 불러와 사용 할 수 있다.
+<syntaxhighlight lang="JavaScript">
+// module.mjs
+export const add = (a, b) => a + b;
+export default class Calculator {
+    // 클래스 구현
+}
-보통 협업을 해야하는 경우나, 스크립트 부분의 내용이 많은 경우에는 분리해 사용한다.
+// main.mjs
+import Calculator, { add } from './module.mjs';
+import * as utils from './utils.mjs';
+</syntaxhighlight>
-script 태그 뒤에 '''src'''를 붙혀 사용하면 되며, 상대경로, 절대경로 둘 다 사용이 가능하고, 웹상에 있는 파일도 사용이 가능하다.
+==타입스크립트 사용==
+===기본 설정===
+타입스크립트를 사용하기 위해서는 추가 설정이 필요하다.
-이렇게 쓰면 된다.
+====트랜스파일러 사용====
 <syntaxhighlight lang="HTML">
-<script src="test.js"></script></syntaxhighlight>
+<!-- tsc로 컴파일된 JS 파일 사용 -->
+<script src="compiled.js"></script>
+<!-- 또는 타입스크립트 컴파일러 직접 사용 -->
+<script src="https://unpkg.com/typescript@latest/lib/typescriptServices.js"></script>
+<script type="text/typescript">
+    interface Person {
+        name: string;
+        age: number;
+    }
+    const person: Person = {
+        name: "홍길동",
+        age: 30
+    };
+</script>
+</syntaxhighlight>
+====개발 환경 설정====
+* tsconfig.json 설정 필요
+* 모듈 번들러(webpack, rollup 등) 설정
+* 소스맵 생성 여부 결정
+==스크립트 로딩 최적화==
+===로딩 전략===
+====async vs defer====
+{| class="wikitable"
+|+ 스크립트 로딩 속성 비교
+|-
+! 속성 !! 특징 !! 사용 시기
+|-
+| async || * HTML 파싱과 병렬로 로드<br/>* 로드 완료 즉시 실행<br/>* 실행 순서 보장 안 됨 || * 독립적인 스크립트<br/>* 다른 스크립트에 의존성 없는 경우
+|-
+| defer || * HTML 파싱과 병렬로 로드<br/>* DOM 생성 후 실행<br/>* 실행 순서 보장 || * DOM 조작이 필요한 스크립트<br/>* 실행 순서가 중요한 경우
+|}
+===동적 임포트===
+필요한 시점에 스크립트를 로드할 수 있다.
+<syntaxhighlight lang="JavaScript">
+// 동적 임포트 예시
+button.addEventListener('click', async () => {
+    const module = await import('./feature.js');
+    module.doSomething();
+});
+</syntaxhighlight>
+==보안 고려사항==
+===CSP(Content Security Policy)===
+다양한 CSP 설정으로 스크립트 실행을 제어할 수 있다.
 <syntaxhighlight lang="HTML">
-<script src="../test.js"></script></syntaxhighlight>
+<!-- 기본적인 CSP 설정 -->
+<meta http-equiv="Content-Security-Policy"
+    content="script-src 'self' https://trusted-cdn.com">
+<!-- nonce 사용 -->
+<meta http-equiv="Content-Security-Policy"
+    content="script-src 'nonce-랜덤값'">
+<script nonce="랜덤값">
+    // 스크립트 코드
+</script>
+</syntaxhighlight>
+===XSS 방지===
+* innerHTML 대신 textContent 사용<ref>innerHTML은 HTML 코드를 직접 삽입할 수 있어 XSS 공격에 취약하므로, 단순히 텍스트를 삽입할 때는 textContent를 사용해야 한다.</ref>
+* 사용자 입력 데이터 이스케이프 처리<ref>사용자로부터 입력받은 데이터는 신뢰할 수 없으므로, 이를 렌더링하기 전에 특수 문자를 적절히 이스케이프 처리해야 한다.</ref>
+* [[eval 함수|eval()]] 사용 자제<ref>eval() 함수는 문자열을 코드로 실행하는 기능을 제공하지만, 이는 실행 환경에 따라 예상치 못한 취약점을 유발할 수 있으므로, 보안을 위해 사용을 금지해야 한다.자세한 내용은 해당 문서를 참고하자.</ref>
+==최신 기능 활용==
+===웹 워커===
+별도의 스레드에서 스크립트를 실행할 수 있다.
 <syntaxhighlight lang="HTML">
-<script src="https://common.gaon.xyz/js/bootstrap/bootstrap.js"></script>
+<script>
+    const worker = new Worker('worker.js');
+    worker.postMessage({data: 'some data'});
+</script>
 </syntaxhighlight>
+===모듈 워커===
+ES 모듈을 웹 워커에서 사용할 수 있다.
+<syntaxhighlight lang="HTML">
+<script>
+    const worker = new Worker('worker.mjs', {
+        type: 'module'
+    });
+</script>
+</syntaxhighlight>
+==브라우저 호환성==
+{| class="wikitable"
+|+ 주요 기능 브라우저 지원 현황
+|-
+! 기능 !! Chrome !! Firefox !! Safari !! Edge !! IE
+|-
+| ES Modules || 61+ || 60+ || 11+ || 16+ || 미지원
+|-
+| Dynamic Import || 63+ || 67+ || 11.1+ || 79+ || 미지원
+|-
+| Module Workers || 80+ || 68+ || 15+ || 80+ || 미지원
+|-
+| TypeScript || 지원(컴파일 필요) || 지원(컴파일 필요) || 지원(컴파일 필요) || 지원(컴파일 필요) || 부분 지원
+|}
+==디버깅 및 개발==
+===소스맵 사용===
+트랜스파일된 코드의 디버깅을 위해 소스맵을 활용할 수 있다.
+<syntaxhighlight lang="HTML">
+<script src="app.min.js"></script>
+<!-- 소스맵 지정 -->
+//# sourceMappingURL=app.min.js.map
+</syntaxhighlight>
+===개발 도구 활용===
+브라우저 개발자 도구를 통해 브레이크포인트 설정이나 네트워크 요청 모니터링 등 디버깅이 가능하다.
+== 기타 ==
+[[깃허브]]나 [[가온 위키]] 등에서 사용하는 [[미디어위키]] 등 거의 대부분의 서비스나 [[Contents Management System|CMS]]에서는 보안상의 이유로 <code><nowiki><script></nowiki></code> 실행을 제한한다. 가령 깃허브는 <code><nowiki><script></nowiki></code> 부문을 제거한다. 이는 [[XSS]] 등의 보안을 위해 제한하는 것이다.
 ==각주==
+<references />
+<!-- 분류 -->
+[[분류:HTML]] [[분류:자바스크립트]]