HTML5

[HTML] script 태그 속성 값 올바르게 정의하기

HTML script 태그 올바르게 정의하기


HTML script 태그는 동적인 페이지를 구성하기 위해 자주 사용되는 태그입니다. <script> … </script> 와 같이 사용합니다.

...
<script>
    function scriptTest() {
        alert("Success!");
    }
</script>
...

 

그런데, 어떤 코드를 보면 <script type=”text/javascript”><script language=”javascript”> 의 예시와 같이 script 태그에 속성이 붙어있는 것을 알 수 있습니다.

 

결론적으로는 어떻게 태그를 시작하던지 동작은 거의 같습니다. script 태그에 속성을 붙이지 않아도 정상적으로 자바스크립트가 실행될 것입니다. 그러나 표준화와 브라우저의 코드 식별력을 위해서는 속성을 붙이는 것이 좋습니다.

우리가 알고있는 Internet Explorer, Edge, 구글 크롬 브라우저들은 대개 자바스크립트를 기본 스크립트 엔진으로 채택하여 typelanguage 속성을 붙이지 않아도 JavaScript를 기본 값으로 지정합니다. 또한 HTML5 부터 별다른 값이 없으면 자바스크립트를 실행할 수 있도록 기본 값으로 지정되었습니다.

 

그러나 자바스크립트가 아닌 다른 스크립트를 기본값으로 실행하는 브라우저라면 어떻게 될까요? (예를 들어 오래되거나 특수한 브라우저인 경우) 자바스크립트 구문으로 개발된 소스를 다른 스크립트 엔진으로 파싱해버리면 페이지에 오류가 발생할 수 있습니다.

따라서 속성 값을 넣게 되면 일종의 식별을 위한 정보로서 중요한 역할을 하기 때문에 기본적으로 속성을 포함하는 것을 권장합니다.

  • HTML5 기반에서는 속성을 포함하지 않아도 자바스크립트로 동작
  • 동작하는 스크립트가 자바스크립트가 아닌 경우 반드시 속성을 붙이기
  • 하위 호환성을 위해서는 속성을 붙이는 것을 권장

 

먼저 가장 많이 사용되는 type 속성을 이용하는 방법입니다. type 속성의 값은 MIME 타입 형식으로 작성됩니다. type=”text/javascript” 와 같이 사용합니다.

...
<script type="text/javascript">
    function scriptTest() {
        alert("Success!");
    }
</script>
...

자바스크립트에 대한 MIME 타입만해도 application/javascript 라던지 text/x-javascript 등의 다양한 타입이 있지만, 일반적으로 text/javascript 를 사용합니다.

 

다음으로 language 속성을 사용하는 방법입니다. 해당하는 언어만 값으로 입력해주시면 됩니다. 그러나 이 방법은 흔히 사용되지 않습니다.

...
<script language="javascript">
    function scriptTest() {
        alert("Success!");
    }
</script>
...

위의 type 속성과 같이 혼용하여 사용할 수도 있지만, 이 방법 역시 흔히 사용되지 않습니다.

...
<script type="text/javascript" language="javascript">
    function scriptTest() {
        alert("Success!");
    }
</script>
...

 

참조문서


JooTC

안녕하세요. 테크놀로지에 관심이 많은 블로거입니다.

Recent Posts

[iOS] Xcode ‘You do not have required contracts to perform an operation’ 해결

Xcode에서 iOS 애플리케이션을 빌드(Archive)하고 App Store Connect에 앱을 업로드하는 도중, 아래와 같은 에러가 발생하면서 더…

2주 ago

[안드로이드] INSTALL_FAILED_INSUFFICIENT_STORAGE 해결

INSTALL_FAILED_INSUFFICIENT_STORAGE 문제 안드로이드 스튜디오에서 에뮬레이터를 실행하고 개발중인 애플리케이션을 실행하려 하면 로그 창에 아래와 같이 표시되면서…

6개월 ago

Zalgo 텍스트와 이를 방지하는 방법

인터넷 커뮤니티 사이트에서 게시글이나 댓글에 간혹 장난을 목적으로 작성된 특이한 글자를 볼 수 있습니다. 위…

8개월 ago

리눅스 kill, killall 명령어 – 특정 프로세스 종료하기

리눅스 명령어 - kill, killall 리눅스 kill 명령어는 특정 프로세스를 종료해주는 명령어입니다. 백그라운드에서 실행되고 있는…

8개월 ago

JavaScript typeof null이 ‘object’인 이유

JavaScript는 역사가 긴 스크립트 프로그래밍 언어입니다. 세월이 흐르면서 많은 자바스크립트 표준이 만들어졌고, 현재는 많은 문법적…

8개월 ago

Mocha Error: Resolution method is overspecified. 해결 방법

NodeJS 테스트 프레임워크인 Mocha는 비동기 테스트를 지원합니다. 간혹 특정 테스트 스크립트를 작성하고 실행하면 아래와 같이…

8개월 ago