변수

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

이번 챌린지에서는 접을 수 있는 측면 탐색 메뉴를 만들어 볼 거예요. 목표는 스크립트 전체를 완성하고 CSS 전환 효과도 추가해 탐색 메뉴가 부드럽게 열리고 닫히도록 하는 거예요.

챌린지

쉬움

메뉴 div에 ID sideNav를 지정하세요.
스크립트에서 변수 세 개를 만드세요.

사이드 내비게이션 요소를 저장할 변수 하나(sideNav)
열기 버튼을 저장할 변수 하나(openBtn)
닫기 버튼을 저장할 변수 하나(closeBtn)

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Space Exploration</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="sidenav">
    <button id="closeBtn" class="close-btn">&times;</button>
    <a href="#apollo">Apollo Missions</a>
    <a href="#iss">International Space Station</a>
    <a href="#mars">Mars Rovers</a>
    <a href="#jameswebb">James Webb Telescope</a>
  </div>

  <header>
    <button id="openBtn" class="open-btn">&#9776; Menu</button>
    <h1>Space Exploration</h1>
  </header>

  <main>
    <section id="apollo">
      <h2>Apollo Missions</h2>
      <p>
        The Apollo program, carried out by NASA in the 1960s and 1970s, 
        successfully landed humans on the Moon for the first time in 1969.
      </p>
    </section>

    <section id="iss">
      <h2>International Space Station</h2>
      <p>
        The ISS is a multinational research laboratory in low Earth orbit, 
        continuously inhabited since 2000 by astronauts and scientists.
      </p>
    </section>

    <section id="mars">
      <h2>Mars Rovers</h2>
      <p>
        Rovers like Spirit, Opportunity, Curiosity, and Perseverance 
        have been exploring the Martian surface, searching for signs of past life.
      </p>
    </section>

    <section id="jameswebb">
      <h2>James Webb Space Telescope</h2>
      <p>
        Launched in 2021, the James Webb Telescope is providing 
        breathtaking images of the universe and studying distant galaxies.
      </p>
    </section>
  </main>

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