서브메뉴 추가하기

Coddy HTML 여정의 CSS 마스터 섹션에 포함된 레슨. 43개 중 17번째.

챌린지

쉬움

이 미니 프로젝트에서는 드롭다운 탐색 메뉴를 단계별로 만들어 봅니다. 기본 상단 탐색 모음으로 시작하여 "Games" 아래에 하위 메뉴를 추가하고 CSS 의사 클래스를 사용해 스타일을 지정합니다. 그 과정에서 flexbox와 상호작용 스타일 같은 주요 웹 디자인 개념을 배우면서 검색창과 CTA 버튼을 추가해 디자인을 더욱 향상합니다.

이 챌린지에서는 "Games" 메뉴 항목 아래에 하위 메뉴를 추가하여 드롭다운 메뉴 만들기를 시작합니다.

<li class="has-submenu">의 "Games" 항목 안에 새로운 <ul class="submenu">를 추가합니다.
하위 메뉴 안에 새로운 <li> 항목 3개를 만듭니다:
1. 보드 Games
2. 카드 Games
3. 비디오 Games

이 단계에서는 올바른 HTML 구조 작성에 집중하세요. 아직 스타일 지정은 필요하지 않습니다.

직접 해보기

<html>
<head>
  <title>Dropdown Menu</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
 <section class="menu-panel">
  <h2>Hobby Club</h2>
  <nav class="top-menu">
    <ul class="menu-list">
      <li class="menu-item">Photography</li>
      <li class="menu-item">Cooking</li>
      <li class="menu-item has-submenu">
        Games
      </li>
      <li class="menu-item">Drawing</li>
      <li class="menu-item">Music</li>
    </ul>
  </nav>
  <div class="menu-controls">
    <input type="text" class="search" placeholder="Search activities..." />
    <button class="cta-button">Join a Club!</button>
  </div>
  <div class="info-section">
    <p class="intro">Welcome to the Hobby Club community!</p>
    <p>Joining a hobby club is a great way to meet people who share your interests.</p>
    <p>You can learn new skills, have fun, and even discover talents you didn’t know you had!</p>
   </div>
</section>
</body>
</html>