HTML <script> 태그

정의 및 사용법

<script> 태그를 사용하여 클라이언트 스크립트를 삽입합니다.

<script> 요소는 스크립트 문장을 포함하거나 src 속성 외부 스크립트 파일을 지정합니다.

가장 일반적인 스크립트 유형은 JavaScript이지만, 브라우저는 다른 스크립트 언어를 지원합니다.

JavaScript의 일반적인 용도는 이미지 처리, 양식 검증 및 내용의 동적 변경입니다.

주의사항:script 요소가 속한 종류는 사용 방법에 따라 다릅니다. head 요소에 있는 script 요소는 메타데이터 요소로, 다른 요소（예를 들어 body 또는 section）의 것은 문법 요소입니다.

다른 것을 참조하십시오:

HTML 강의:HTML 스크립트

HTML DOM 참조 매뉴얼:Script 객체

JavaScript 강의:JavaScript 학습

예제

예제 1: 문서 내부 스크립트 정의

JavaScript를 사용하여 "Hello JavaScript!"을 쓰세요:

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

직접 시도해보세요

예제 2: 외부 스크립트 라이브러리 로드

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

직접 시도해보세요

힌트 및 주석

힌트:스크립트를 비활성화하거나 스크립트를 지원하지 않는 브라우저에 대한 추가 정보는 다음을 참조하십시오: <noscript> 요소。

힌트:JavaScript에 대해 더 배우고 싶다면 우리의 JavaScript 강의。

속성

속성 값 설명
async async 스크립트가 페이지를 파싱하는 동안 병행 다운로드를 수행하고 사용 가능할 때 즉시 실행됩니다（파싱 완료 전에）（외부 스크립트에만 적용됩니다）.
crossorigin
  • anonymous
  • use-credentials
 HTTP CORS 요청의 모드를 설정합니다.
defer defer 스크립트가 페이지를 파싱하는 동안 병행 다운로드를 수행하고 페이지가 파싱이 완료된 후에 실행됩니다（외부 스크립트에만 적용됩니다）.
integrity filehash 브라우저가 가져온 스크립트를 확인하여 원본 코드가 조작된 경우 코드가 결코 로드되지 않도록 코드를 로드할 수 있도록 합니다.
nomodule
  • True
  • False
 스크립트가 ES2015 모듈을 지원하는 브라우저에서 실행되지 않도록 정의합니다.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 스크립트를 가져오는 동안 전달할 참조자 정보를 정의합니다.
src URL 외부 스크립트 파일의 URL을 정의합니다.
type 스크립트 타입 스크립트의 미디어 타입을 정의합니다.

HTML과 XHTML의 차이

XHTML에서 스크립트 내용은 #PCDATA로 선언되며 (CDATA 대신), 이는 엔티티가 해석될 것이라는 의미입니다.

이는 XHTML에서 모든 특수 문자가 인코딩되어야 하거나 모든 내용이 CDATA 부분에 포함되어야 한다는 것을 의미합니다：

<script type="text/javascript">
//<![CDATA[
var i = 10;
if (i < 5) {
  // some code
}
//]]>
</script>

전체 속성

<script> 태그는 다음과 같은 전체 속성을 지원합니다 HTML의 전체 속성。

기본 CSS 설정

대부분의 브라우저는 다음 기본 값으로 표시합니다. <script> 요소:

script {
  display: none;
}

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원