| |||||
| 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 방지[편집 / 원본 편집]
최신 기능 활용[편집 / 원본 편집]
웹 워커[편집 / 원본 편집]
별도의 스레드에서 스크립트를 실행할 수 있다.
<script>
const worker = new Worker('worker.js');
worker.postMessage({data: 'some data'});
</script>모듈 워커[편집 / 원본 편집]
ES 모듈을 웹 워커에서 사용할 수 있다.
<script>
const worker = new Worker('worker.mjs', {
type: 'module'
});
</script>브라우저 호환성[편집 / 원본 편집]
| 기능 | 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)