noscript 태그의 역할은 뭘까?

Javascript

noscript 태그의 역할은 뭘까?

쟌문 2023. 12. 10. 16:57

머릿말

React 강의를 보면서 프로젝트를 따라 만들던 중 HTML에 기본적으로 마크업된 태그 중 noscript 라는 태그가 있는 것을 보게 되었다. 많은 사이트를 둘러보면서 가끔 본 적 있는 태그였다. 하지만 정확히 이 태그가 어떤 목적으로 사용되는 태그인지는 몰랐다. 정확히는 모르는 채 지나갔다. 문득 그간 봤어도 '이게 뭐지?' 라고만 생각하고 지나쳐온 순간들이 떠올랐고, 재차 궁금증이 살아난 이 기회에 <noscript> 태그의 역할과 어떻게 활용 가능한지에 대해 알아보고 정리하고 싶었다.

이 글은 그 궁금증을 해결하고 정의와 활용 방법에 대해 정리하여 작성해보고자 한다.

알아보기에 앞서

<noscript> 태그는 곳곳에서 확인 가능하다. 간혹 특정 사이트의 개발자 도구를 열어 해당 사이트의 DOM(Document Object Model)을 살펴보거나

<noscript>
  <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=2050250308523590&amp;ev=PageView&amp;noscript=1">
</noscript>

[ 프로그래머스 DOM 일부 코드 ]

<noscript data-n-css=""></noscript>

[ 네이버, 29CM DOM 일부 코드 ]

Create React App(CRA)을(를) 활용하여 React 프로젝트 생성 시 <noscript> 태그가 기본적으로 마크업되어 있는 것을 확인할 수 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    ...
  </body>
</html>

[ CRA로 생성된 프로젝트 내 'public/index.html' 파일의 일부 코드 ]

어떠한 목적으로 활용되고 있는 것일까? 정의와 활용 방법에 대해 알아보자.

<noscript>의 정의

<noscript>란?

HTML <noscript> 요소는 페이지의 스크립트 유형을 지원하지 않거나, 브라우저가 스크립트를 비활성화한 경우 보여줄 HTML 구획을 정의합니다. - MDN

한 마디로 브라우저를 이용하는 사용자(Client)가 직접 개발자 도구나 크롬 설정에서 스크립트 사용을 비활성화하여 스크립트가 동작되지 않는 상태이거나, 스크립트를 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의할 때 사용된다.

웹 페이지 사용자는 배터리 절약, 개인 정보 보호 등을 이유로 자바스크립트 사용을 비활성화 해 놓는 경우가 있다. 따로 설정하지 않았을 때 default 값으로 js 사용이 비활성화 되어있는 경우도 있다. 그런 상황에서 자바스크립트 활성화를 요청하기 위해 사용되는 태그가 <noscript> 태그다.

활용 방법

확인을 위한 예제

See the Pen Untitled by yjm7575 (@JaanMun) on CodePen.

브라우저 스크립트 상태 변경하는 방법

첫째, 브라우저 설정 변경하기

1. (Chrome 브라우저 기준) 우측 상단 세로로 된 ... 버튼 클릭

2. 설정 클릭

3. 개인 정보 보호 및 보안 -> 사이트 설정으로 이동

개인 정보 보호 및 보안 -> 사이트 설정 항목으로 이동하는 방법 참고 이미지

4. 자바스크립트 항목으로 이동

5. 기본 동작 섹션에서의 설정값 변경 및 확인

둘째, 개발자 도구에서 변경하기

1. 윈도우 기준 F12누르거나 마우스 우클릭 -> 검사 선택

2. 톱니바퀴 모양 선택

3. Preferences -> Debugger 섹션 중 Disable JavaScript항목 토글하여 변경

: 체크되지 않은 상태가 기본값 (스크립트 활성화 상태)

마무리

자바스크립트 옵션을 비활성화하고 블로그를 다시 새로고침할 경우 첨부된 Codepen 예제 코드가 로드되지 않아 확인이 불가하다. 만약 동작하는 화면을 확인하고 싶다면 첨부된 예제코드를 복사하여 VScode에 직접 파일 생성 후 코드를 복사 붙여넣기 후 Serve를 실행해 local 환경에서 테스트 해보면 좋을 것 같다.

참고

🔸 작성된 본문 내용 중 미흡한 부분이 있을 수 있습니다.
🔸 고칠 부분이나 추가되면 좋을 내용 댓글로 남겨주시면 완성도 높은 글을 만들어가는 데에 큰 힘이 됩니다. ☺️

저작자표시 비영리 변경금지 (새창열림)