HTML5 의 <noscript> 태그는 사용자의 브라우저가 JavaScript 를 지원하지 않거나 JavaScript 가 비활성화된 경우 사용자에게 표시될 텍스트 섹션을 정의하는 데 사용됩니다. 오늘날 웹 개발에서 JavaScript 가 널리 사용되고 있으며, 모든 사용자가 브라우저에서 JavaScript 를 활성화하지 않을 수 있으므로 중요한 HTML 태그입니다.
이 튜토리얼에서는 브라우저 구성에 관계없이 모든 사용자가 웹 페이지에 액세스할 수 있도록 HTML 코드에서 <noscript> 태그를 사용하는 방법을 배웁니다.
참고:
index.html에서 코딩을 연습하고 Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
먼저 index.html이라는 새 파일을 만듭니다. 이 파일에는 웹 페이지의 HTML 코드가 포함됩니다.
시작하려면 기본 HTML 구조를 파일에 추가합니다.
<!doctype html>
<html>
<head>
<title>Using the Noscript Tag</title>
</head>
<body></body>
</html>이제 JavaScript 가 활성화된 경우에만 표시되어야 하는 콘텐츠를 웹 페이지에 추가합니다.
<!doctype html>
<html>
<head>
<title>Using the Noscript Tag</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<noscript>
<p>Please enable JavaScript to view this webpage.</p>
</noscript>
</body>
</html>이 예제에서 <h1> 태그는 페이지 헤더를 표시하는 데 사용됩니다. <noscript> 태그에는 JavaScript 가 활성화되지 않은 경우 표시되어야 하는 텍스트가 포함되어 있습니다. JavaScript 가 활성화되면 이 텍스트는 표시되지 않습니다.
다음으로, JavaScript 가 비활성화된 경우에만 표시되어야 하는 콘텐츠를 웹 페이지에 추가합니다.
<!doctype html>
<html>
<head>
<title>Using the Noscript Tag</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<noscript>
<p>Please enable JavaScript to view this webpage.</p>
</noscript>
<div id="myContent">
<p>This content is only displayed when JavaScript is disabled.</p>
</div>
<script>
document.getElementById("myContent").style.display = "none";
</script>
</body>
</html>이 예제에서 id 속성이 myContent인 <div> 태그는 JavaScript 가 비활성화된 경우 표시되어야 하는 텍스트를 포함합니다. JavaScript 가 활성화되면 HTML 코드의 <script> 태그가 HTML 요소의 display 속성을 none으로 설정하여 이 콘텐츠를 숨기기 때문에 이 텍스트는 표시되지 않습니다.
HTML 코드를 index.html로 저장하고 웹 브라우저에서 엽니다. 브라우저에서 JavaScript 를 활성화 및 비활성화하여 <noscript> 태그가 어떻게 작동하는지 확인해 보세요.
필요에 따라 <noscript> 태그를 사용자 정의할 수 있습니다. 예를 들어, 텍스트를 시각적으로 더 매력적으로 만들기 위해 CSS 스타일을 추가할 수 있습니다.
<noscript style="background-color: #ffcccc; padding: 20px;">
<p>Please enable JavaScript to view this webpage.</p>
</noscript>이 튜토리얼에서는 HTML5 의 <noscript> 태그에 대해 배우고, 브라우저 구성에 관계없이 모든 사용자가 웹 페이지에 액세스할 수 있도록 하는 방법에 대해 배웠습니다. JavaScript 가 비활성화된 경우에만 표시되는 콘텐츠를 추가하는 방법과 <noscript> 태그의 모양을 사용자 정의하는 방법을 배웠습니다. <noscript> 태그를 사용하면 더 포괄적이고 접근 가능한 웹 페이지를 만들 수 있습니다.
