테마가 있는 블로그 페이지

Coddy HTML 여정의 JavaScript in Action 섹션에 포함된 레슨 — 27개 중 27번째.

챌린지

쉬움

이 챌린지에서는 Lens & Light라는 이름의 사진 블로그 페이지를 다룹니다. 이 페이지에는 사진 촬영 팁에 관한 블로그 포스트, 다크/라이트 테마 전환 버튼, 그리고 제출 시 토스트 메시지를 표시하는 간단한 뉴스레터 구독 양식이 포함되어 있습니다.

이 사진 블로그 페이지를 위한 HTML과 CSS는 이미 준비되어 있습니다. 여러분의 작업은 다음의 JavaScript 기능을 추가하는 것입니다:

테마 전환 – 전환 버튼에 이벤트 리스너를 추가하세요. 버튼을 클릭하면 <body> 요소에서 dark-mode 클래스를 토글하여 테마가 변경되도록 합니다.
토스트 메시지 – 양식이 제출되면, 토스트 요소에서 "hidden" 클래스를 제거하고 "show" 클래스를 추가하여 토스트 메시지가 보이게 만드세요.

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Photographer's Blog</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Lens & Light</h1>
    <button id="themeToggle">Toggle Theme</button>
  </header>

  <main>
    <article class="post">
      <h2>Capturing Golden Hour</h2>
      <p>
        The hour before sunset and after sunrise brings warm, soft light that adds 
        depth and atmosphere to portraits and landscapes. Every photographer should 
        experiment with golden hour lighting.
      </p>
    </article>

    <article class="post">
      <h2>5 Tips for Street Photography</h2>
      <p>
        Look for interesting shadows, capture candid emotions, blend into the crowd, 
        use a prime lens, and always be ready to click. Street photography is about 
        telling raw and authentic stories.
      </p>
    </article>

    <section class="newsletter">
      <h3>Subscribe to Photo Notes</h3>
      <form id="newsletterForm">
        <input type="email" id="email" placeholder="Enter your email">
        <button type="submit">Sign Up</button>
      </form>
    </section>
  </main>

  <div id="toast" class="toast hidden">Subscribed successfully! 📸</div>

  <script src="script.js"></script>
</body>
</html>