<script> 태그의 정의 및 사용법

<script> 태그는
HTML 문서에서 사용 가능한 클라이언트 스크립트나 데이터 블록을 포함하기 위한 태그입니다.
자바스크립트 코드를 포함해서 동적인 HTML이나 스타일을 구현하기 위해 가장 많이 사용됩니다. 이 태그는 화면에 표시되지 않습니다.

"클라이언트 스트립트"란
웹 페이지를 로드한 사용자의 웹 브라우저(흔히 '클라이언트'라고 함)에서 실행되는 스크립트를 의미합니다. 대표적으로 자바스크립트가 있습니다.
자바스크립트 외에도 WebGL 셰이더 등의 클라이언트 스크립트가 있습니다.

"데이터 블록"이란
구조화된 데이터 코드 블록을 의미하며 대표적으로 JSON이 있습니다.
이러한 데이터 블록은 클라이언트 측 스크립트에서 동적인 기능을 제어하는 데이터를 제공하거나, 검색 엔진 등에 제공하기 위해 사용됩니다.

<script> 태그는 자바스크립트를 주로 포함하지만,
JSON, WebGL 셰이더 등 다른 언어와 함께 사용할 수도 있습니다.

기본 예제

스크립트 코드를 포함

다음은 <script>에 가장 많이 사용되는 자바스크립트 코드를 포함하는 예제입니다.

HTML 
<script>
    // 자바스크립트 코드 작성
    alert("자바스크립트 코드를 포함합니다.");
</script>

다음은 <script>에 외부 자바스크립트 파일로 코드를 포함하는 예제입니다.

HTML 
<!-- HTML 문서에서 외부 자바스크립트 파일로 코드를 포함 -->
<script src="example.js"></script>

데이터 블록을 포함

다음은 <script>에 데이터 블록을 포함하는 예제입니다.
JSON은 대표적인 구조화된 데이터인데, 다음은 JSON 코드 블록을 포함하는 예제입니다.

HTML 
<script type="application/json">
    {
       "username" : "my_username",
       "password" : "my_password",
       "validation-factors" : {
            "validationFactors" : [
                {
                    "name" : "remote_address",
                    "value" : "127.0.0.1"
                }
            ]
        }
    }
</script>

사용되는 속성들

<script> 태그에서 사용되는 속성들에 대해 살펴보겠습니다.

<script> 태그는 글로벌(전역) 속성을 포함합니다.

src 속성은 외부 스크립트 파일의 URL을 지정합니다. 이는 <script> 태그 내부에 스크립트 코드를 작성하는 대신 사용할 수 있습니다.

HTML 
<script src="script.js"></script>

type 속성

type 속성은 스크립트의 유형(MIME 유형)을 지정합니다. 이 속성의 값은 다음 중 하나입니다.

속성이 설정되지 않음(기본값), 빈 문자열 또는 자바스크립트 MIME 유형

스크립트가 자바스크립트임을 나타냅니다.

HTML5 이전에는 자바스크립트 MIME 유형을 명시하여 지정하였지만(예를 들어, type="text/javascript"), HTML5에서는 스크립트가 자바스크립트일 경우에는 type 속성 자체를 설정하지 않을 것을 권장합니다.

권장하지 않음 스크립트가 자바스크립트임을 나타낼 경우 
<script type="text/javascript"></script>
권장함 스크립트가 자바스크립트임을 나타낼 경우 
<script></script>
module

이 값을 사용하면 코드가 자바스크립트가 모듈로 처리됩니다.

HTML 
<script type="module" src="main.mjs"></script>
importmap

자바스크립트의 새로운 기능 중 하나인 Import Maps를 나타냅니다. Import Maps는 웹 애플리케이션에서 자바스크립트 모듈을 가져오는 방식을 제어하기 위한 메커니즘을 제공합니다.

자세한 설명과 내용은 MDN - <script type="importmap">를 참조하세요.

HTML 
<script type="importmap">
    {
        "imports": {
            "square": "./module/shapes/square.js",
            "circle": "https://example.com/shapes/circle.js"
        }
    }
</script>
그 밖의 다른 값

삽입된 콘텐츠는 데이터 블록으로 처리되며 브라우저에서 처리되지 않습니다. 개발자는 데이터 블록을 표시하기 위해 자바스크립트 MIME 유형이 아닌 유효한 MIME 유형을 사용해야 합니다. src 속성을 포함한 다른 모든 속성은 무시됩니다

다음의 예제를 참조하세요.

HTML 
<script type="application/json">
    {
       "username" : "my_username",
       "password" : "my_password",
       "validation-factors" : {
            "validationFactors" : [
                {
                    "name" : "remote_address",
                    "value" : "127.0.0.1"
                }
            ]
        }
    }
</script>

async 속성

이 속성은 값을 필요로 하지 않는 부울 속성(boolean attribute)입니다. 이 속성이 있으면 이 속성이 적용되고 없으면 적용되지 않습니다.

HTML 문서에서는 마크업한 내용을 순차적으로 처리하는데, <script> 태그에 자바스크립트 코드가 있을 경우 브라우저는 이 코드를 분석하고 평가할 동안 다른 콘텐츠를 로드하지 않고 중단합니다. 자바스크립트 코드를 분석하고 평가가 끝나야 비로소 중단한 그 다음의 콘텐츠를 로드합니다.

이렇게 순차적으로 처리하는 것을 "동기적"으로 처리한다고 말합니다.

하지만, async 속성을 지정하면 <script> 태그에 자바스크립트 코드가 있을 경우 구분 분석과 평가를 브라우저가 실행하면서 동시에 그 다음의 콘텐츠 로드를 중단하지 않고 같이 처리합니다. 평가가 끝난 자바스크립트 코드는 즉시 실행됩니다.

이렇게 동시에 처리하는 것을 "비동기적"으로 처리한다고 말합니다.

스크립트가 "비동기적"으로 로드되면 페이지의 렌더링이 중단되지 않으며, 스크립트가 로드될 때까지 대기할 필요가 없습니다. 이는 일반적으로 페이지의 성능을 향상시키고 사용자 경험을 개선하는 데 도움이 됩니다.

이때 주의할 점은,
async 속성을 지정해서 "비동기적"으로 스크립트를 처리하려면 <script> 태그에 src 속성이 포함되 있어야 합니다. 즉, 외부 자바스크립트 파일을 <script> 태그에 포함하는 경우에만 작동합니다. 그렇지 않고 직접 <script> 태그에 코드를 작성한 경우에는 작동하지 않습니다.

HTML 
<script src="script.js" async></script>
HTML async 속성이 작동하지 않음 
<script async>
    // 자바스크립트 코드 작성
    alert("자바스크립트 코드를 포함합니다.");
</script>

defer 속성

이 속성은 값을 필요로 하지 않는 부울 속성(boolean attribute)입니다. 이 속성이 있으면 이 속성이 적용되고 없으면 적용되지 않습니다.

defer 속성은 async 속성처럼 스크립트를 비동기적으로 로드하지만, 스크립트의 실행을 페이지가 완전히 로드된 후로 지연시킵니다. defer 속성을 사용할 경우 스크립트가 문서의 로드가 끝날 때까지 실행되지 않습니다. async 속성은 자바스크립트의 구문 분석과 평가가 끝나면 즉시 실행한다는 점에서 defer 속성과 차이가 있습니다.

defer 속성도 async 속성처럼 <script> 태그에 src 속성이 포함되 있어야 합니다. 그렇지 않으면 이 속성은 작동하지 않습니다.

HTML 
<script src="script.js" defer></script>
HTML defer 속성이 작동하지 않음 
<script defer>
    // 자바스크립트 코드 작성
    alert("자바스크립트 코드를 포함합니다.");
</script>

또한, defer 속성은 type="module" 에도 적용되지 않습니다.

HTML defer 속성이 작동하지 않음 
<script type="module" src="main.mjs" defer></script>

<script> 태그에는 이 글에서 언급한 속성 이외에도 crossorigin, integrity, nomodule, nonce, referrerpolicy 등의 속성을 적용할 수 있습니다.

명세서

script 태그의 명세서 사양
명세서 사양
<script> HTML Standard
#the-script-element

브라우저 호환성

script 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<script> 1 12 1 3

참고문헌

같이 보기