스타일링 더하기

Coddy HTML 여정의 CSS Mastery 섹션에 포함된 레슨 — 43개 중 19번째.

챌린지

쉬움

구조적 선택자와 형제 선택자를 사용하여 특정 단락과 메뉴 항목을 대상으로 지정하고 각각에 다른 스타일을 적용해 보겠습니다.

.info-section 내부에 있는 첫 번째 단락(첫 번째 자식)의 스타일을 지정하세요. 글꼴 크기("20px")와 두께를 변경하여 눈에 띄게 만듭니다.
.intro 클래스가 있는 단락 뒤에 오는 모든 단락(일반 형제)의 스타일을 지정하세요. 읽기 편하도록 패딩을 추가합니다.
상단 내비게이션의 모든 홀수 번째 메뉴 항목(nth-child)의 스타일을 지정하세요. 줄무늬 효과를 주기 위해 다른 색상을 부여합니다.

직접 해보기

<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
        <ul class="submenu">
          <li>Board Games</li>
          <li>Card Games</li>
          <li>Video Games</li>
        </ul>
      </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>