HTML/태그/script

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]