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

2025년 3월 25일 (화) 14:54 기준 최신판

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 등의 보안을 위해 제한하는 것이다.

src 속성과 내용이 동시에 있을 경우[편집 / 원본 편집]

다음과 같은 코드가 있을 때:

<script src="a.js">console.log("Hello world!")</script>

`a.js` 파일만 로드되고, 내부의 `console.log("Hello world!")`는 무시된다. 이는 HTML 명세서에 명시되어 있으며, `src` 속성이 존재하는 경우 태그 내부의 스크립트는 fallback 콘텐츠로 간주되며 **실행되지 않는다**.^[5]

즉, `<script>` 태그에는 다음 두 형태 중 하나만 사용할 수 있다:

외부 스크립트만 로드: `<script src="..."></script>`
인라인 스크립트만 포함: `<script>...</script>`

동시에 사용할 경우, 브라우저는 **외부 스크립트만 처리하고 내부 내용은 무시**하므로 주의가 필요하다.

HTML 명세서 상 script 태그의 주요 사항[편집 / 원본 편집]

`script` 요소는 문서 내 어디에나 위치할 수 있으나, 보통 `<head>` 또는 `<body>`의 끝부분에 위치한다.
`src`, `type`, `async`, `defer`, `crossorigin`, `integrity`, `nomodule`, `nonce`, `referrerpolicy` 등 다양한 속성을 지원한다.
`type` 속성이 없거나 `text/javascript`일 경우, 자바스크립트로 해석된다.
`defer` 속성이 있으면 DOMContentLoaded 전에 스크립트가 실행된다.
`async`는 로드된 시점에서 즉시 실행되므로, 실행 순서를 보장하지 않는다.
`nomodule` 속성은 모듈을 지원하지 않는 브라우저에서만 실행된다.

<!-- nomodule 예시 -->
<script nomodule src="legacy.js"></script>

<!-- defer 예시 -->
<script defer src="main.js"></script>

<!-- integrity + crossorigin 예시 -->
<script src="https://example.com/app.js"
        integrity="sha384-..."
        crossorigin="anonymous"></script>

이러한 속성들을 적절히 사용하면 보안, 성능, 호환성을 개선할 수 있다.

각주[편집 / 원본 편집]

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

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

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

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

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

[5] [HTML Living Standard - Script elements](https://html.spec.whatwg.org/multipage/scripting.html#the-script-element)

[1]

[2]

[3]

[4]

[5]