테마가 적용된 블로그 페이지

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

챌린지

쉬움

이 챌린지에서는 photography blog page인 Lens & Light를 다룹니다. 이 페이지에는 photography 팁에 관한 블로그 게시물, dark/light 테마 Toggle 버튼, 그리고 제출 시 toast 메시지를 표시하는 간단한 newsletter 가입 폼이 포함되어 있습니다.

이 photography blog page에 사용할 HTML과 CSS는 이미 준비되어 있습니다. 여러분의 과제는 JavaScript 기능을 추가하는 것입니다:

Theme 전환: Toggle 버튼에 이벤트 리스너를 추가하세요. 버튼이 클릭되면 dark-mode 클래스를 <body>에 Toggle하여 테마가 변경되도록 하세요.
Toast message: 폼이 제출되면 toast 요소에서 "hidden" 클래스를 제거하고 toast 요소에 "show" 클래스를 추가하여 toast가 표시되도록 하세요.

직접 해보기

<!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>