세계 7대 불가사의

Coddy HTML 여정의 Practical Frontend 섹션에 포함된 레슨 — 35개 중 34번째.

챌린지

쉬움

세계 7대 불가사의에 대한 미니 정보 페이지의 HTML이 제공됩니다. 귀하의 작업은 다음과 같습니다:

사이드바 스타일 지정:
- 너비를 220px로 설정합니다.
- 원하는 배경색을 지정합니다.
- 내부에 패딩을 추가합니다.
사이드바 링크(<strong>a</strong> 태그) 스타일 지정:
- 기본 파란색을 사이드바 배경에 어울리는 색상으로 변경합니다.
- 약간 다른 색조로 호버 효과를 추가합니다.
드롭다운 메뉴 추가:
- 드롭다운 버튼 뒤에 class가 dropdown-content인 div를 추가합니다.
- 그 안에 History, Maps, Gallery 링크를 추가합니다.

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Seven Wonders</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      background: #f9f9f9;
    }

    /* Notification Banner */
    .notification {
      background-color: #4CAF50;
      color: white;
      padding: 12px;
      text-align: center;
      font-weight: bold;
    }

    /* Layout */
    .container {
      display: flex;
      min-height: 100vh;
    }

    .sidebar h2 {
      font-size: 18px;
      margin-bottom: 10px;
    }

    .sidebar a {
      display: block;
      text-decoration: none;
      margin: 6px 0;
      padding: 5px;
      border-radius: 4px;
    }

    .sidebar a:hover {
      background: #444;
    }

    /* Dropdown in sidebar */
    .dropdown {
      margin-top: 15px;
    }

    .dropdown-btn {
      cursor: pointer;
      padding: 5px;
      display: block;
      background: #444;
      border-radius: 4px;
    }

    .dropdown-content {
      display: none;
      margin-top: 5px;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }

    .dropdown-content a {
      padding-left: 15px;
      font-size: 14px;
    }

    /* Content */
    .content {
      flex: 1;
      padding: 30px;
      background: white;
    }

    .content h1 {
      margin-top: 0;
    }

    .content img {
      max-width: 100%;
      border-radius: 8px;
      margin: 15px 0;
    }

    /* Tooltip */
    .tooltip {
      position: relative;
      border-bottom: 1px dotted #333;
      cursor: help;
      color: #0077cc;
    }

    .tooltip-text {
      visibility: hidden;
      width: 160px;
      background-color: #33fbe6;
      color: #333;
      text-align: center;
      padding: 6px;
      border-radius: 6px;
      position: absolute;
      left: 105%;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
    }

    .tooltip:hover .tooltip-text {
      visibility: visible;
    }
  </style>
</head>
<body>
  <!-- 알림 배너 -->
  <div class="notification">
    New wonder discovered!
  </div>

  <div class="container">
    <!-- 사이드바 -->
    <div class="sidebar">
      <h2>Seven Wonders</h2>
      <a href="#">Great Wall of China</a>
      <a href="#">Petra</a>
      <a href="#">Christ the Redeemer</a>
      <a href="#">Machu Picchu</a>
      <a href="#">Chichen Itza</a>
      <a href="#">Colosseum</a>
      <a href="#">Taj Mahal</a>

      <div class="dropdown">
        <span class="dropdown-btn">More Resources ▼</span>
        <!-- 여기에 dropdown-content를 추가하세요 -->
        
      </div>
    </div>

    <!-- 메인 콘텐츠 -->
    <div class="content">
      <h1>The Mausoleum at Halicarnassus</h1>
      <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Mausoleum_at_Halicarnassus_by_Ferdinand_Knab_%281886%29_cropped.png" alt="Mausoleum">
      <p>
        The <span class="tooltip">Mausoleum
        <span class="tooltip-text">A grand tomb built for Mausolus, satrap of Caria.</span>
        </span> at Halicarnassus was one of the Seven Wonders of the Ancient World, built around 350 BCE in modern-day Turkey. It stood approximately 45 meters high and combined Greek, Egyptian, and Lycian architectural styles.
      </p>
    </div>
  </div>
</body>
</html>