HTML <noscript> 태그

<!-- JavaScript가 비활성화된 경우 표시될 메시지 -->
<noscript>
    <div class="alert">
        <h3>JavaScript가 비활성화되어 있습니다.</h3>
        <p>이 웹사이트는 최적의 경험을 위해 JavaScript가 필요합니다. JavaScript를 활성화해 주세요.</p>
    </div>
</noscript>

<!-- 동적 콘텐츠 로딩 예시 -->
<div id="dynamic-content">
    <!-- JavaScript로 로드될 콘텐츠 -->
</div>

<noscript>
    <div class="static-content">
        <h2>최신 뉴스</h2>
        <ul>
            <li>뉴스 항목 1</li>
            <li>뉴스 항목 2</li>
            <li>뉴스 항목 3</li>
        </ul>
    </div>
</noscript>

<!-- 1. 블로그 포스트 로딩 예시 -->
<div id="blog-post">
    <!-- JavaScript로 로드될 포스트 내용 -->
</div>

<noscript>
    <article class="blog-post">
        <h1>JavaScript ES6+ 완벽 가이드</h1>
        <div class="post-meta">
            <span class="date">2024-03-15</span>
            <span class="author">홍길동</span>
        </div>
        <div class="post-content">
            <p>이 포스트는 JavaScript가 활성화되어 있을 때 더 나은 경험을 제공합니다.</p>
            <!-- 정적 콘텐츠 -->
        </div>
    </article>
</noscript>

<!-- 2. 폼 유효성 검사 예시 -->
<form id="contact-form">
    <input type="text" name="name" placeholder="이름" required>
    <input type="email" name="email" placeholder="이메일" required>
    <textarea name="message" placeholder="메시지" required></textarea>
    <button type="submit">보내기</button>
</form>

<noscript>
    <div class="form-note">
        <p>JavaScript가 비활성화되어 있어 실시간 유효성 검사가 작동하지 않습니다.</p>
        <p>서버에서 유효성 검사가 이루어지므로 양식을 제출하기 전에 모든 필드를 올바르게 작성해 주세요.</p>
    </div>
</noscript>

<!-- 3. 스타일링 예제 -->
<style>
.alert {
    background-color: #f8d7da;
    color: #721c24;
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.static-content {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 4px;
}

.blog-post {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.post-meta {
    color: #6c757d;
    margin-bottom: 1rem;
}

.form-note {
    background-color: #fff3cd;
    color: #856404;
    padding: 1rem;
    border-radius: 4px;
    margin-top: 1rem;
}
</style>