<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>대한민국 날씨, 미세먼지, 휴일 정보</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 20px;
    }

    .container {
      border: 1px solid #ccc;
      padding: 20px;
      border-radius: 5px;
    }

    .section {
      margin-bottom: 20px;
    }

    .section h2 {
      border-bottom: 1px solid #eee;
      padding-bottom: 5px;
    }

    .details {
      display: none;
    }

    .show-details {
      cursor: pointer;
      color: blue;
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>대한민국 날씨, 미세먼지, 휴일 정보</h1>

    <div class="section">
      <h2>오늘의 날씨
        <span class="show-details" onclick="toggleDetails('weather', this)">자세히 보기</span>
      </h2>
      <div id="weather" class="details">
        <p><strong>날씨:</strong> 맑음</p>
        <p><strong>기온:</strong> 25°C</p>
        <p><strong>습도:</strong> 60%</p>
        <p><strong>풍속:</strong> 5m/s</p>
        <p><strong>강수확률:</strong> 10%</p>
      </div>
    </div>

    <div class="section">
      <h2>미세먼지 정보
        <span class="show-details" onclick="toggleDetails('dust', this)">자세히 보기</span>
      </h2>
      <div id="dust" class="details">
        <p><strong>미세먼지(PM10):</strong> 30㎍/m³ (좋음)</p>
        <p><strong>초미세먼지(PM2.5):</strong> 15㎍/m³ (좋음)</p>
        <p><strong>오존(O3):</strong> 0.03 ppm (보통)</p>
      </div>
    </div>

    <div class="section">
      <h2>주요 휴일 정보
        <span class="show-details" onclick="toggleDetails('holiday', this)">자세히 보기</span>
      </h2>
      <div id="holiday" class="details">
        <p><strong>다음 휴일:</strong> 2025년 5월 5일 (어린이날)</p>
        <p><strong>주요 휴일 목록:</strong></p>
        <ul>
          <li>2025년 5월 5일 (어린이날)</li>
          <li>2025년 5월 28일 (부처님 오신 날)</li>
          <li>2025년 6월 6일 (현충일)</li>
        </ul>
      </div>
    </div>
  </div>

  <script>
    function toggleDetails(id, element) {
      var details = document.getElementById(id);
      if (details.style.display === "none" || details.style.display === "") {
        details.style.display = "block";
        element.textContent = "닫기";
      } else {
        details.style.display = "none";
        element.textContent = "자세히 보기";
      }
    }
  </script>
</body>

</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.