강조 색상 및 하이라이트

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

강조 색상은 버튼, 링크, 콜 투 액션(CTA) 섹션 또는 강조된 텍스트와 같은 중요한 요소를 돋보이게 하는 데 도움이 됩니다. 이를 CSS 변수(--primary-color, --accent-color, --highlight-color)로 정의하고 사이트 전체에서 일관되게 사용할 수 있습니다. 호버 상태와 하이라이트에도 이러한 변수를 사용할 수 있어, 주요 콘텐츠에 주의를 끌면서도 시각적으로 매력적이고 통일감 있는 테마를 쉽게 만들 수 있습니다.

강조 색상을 위한 CSS 변수를 생성하세요:

:root {
  --accent-color: #ff6b6b;
}

버튼과 같은 중요한 대화형 요소에는 강조 색상(accent color)을 사용하세요:

.button-primary {
  background-color: var(--accent-color);
  color: white;
}

강조 색상을 사용하여 활성화된 내비게이션 항목을 강조 표시합니다:

.nav-item.active {
  color: var(--accent-color);
  border-bottom: 2px solid var(--accent-color);
}

챌린지

쉬움

작업 내용:

CSS 변수인 --accent-color를 사용하여 강조 색상(accent color)을 설정하세요.
페이지의 모든 버튼에 강조 색상을 적용하세요.
버튼의 호버(hover) 상태를 기본 색상(primary color)으로 변경하세요.
일관성을 위해 링크, 강조된 텍스트, 그리고 푸터 링크에 강조 색상을 적용하세요.

치트 시트

강조 색상은 중요한 요소를 돋보이게 하는 데 도움이 됩니다. 이를 CSS 변수로 정의하고 사이트 전체에서 일관되게 사용하세요.

강조 색상을 위한 CSS 변수를 생성합니다:

:root {
  --accent-color: #ff6b6b;
}

버튼에 강조 색상을 사용합니다:

.button-primary {
  background-color: var(--accent-color);
  color: white;
}

활성화된 탐색 항목을 강조합니다:

.nav-item.active {
  color: var(--accent-color);
  border-bottom: 2px solid var(--accent-color);
}

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Accent Colors & Highlighting</title>
  <style>
    :root {
      --primary-color: #1e90ff;
      --text-color: #222;
      --bg-color: #f9f9f9;
      
    }

    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: var(--bg-color);
      color: var(--text-color);
    }

    header {
      background-color: var(--primary-color);
      color: white;
      padding: 1rem;
      text-align: center;
    }

    main {
      padding: 2rem;
      display: grid;
      gap: 1.5rem;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .card {
      background-color: white;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .card h2 {
      margin-top: 0;
      color: var(--primary-color);
    }

    .card button {
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 5px;
      cursor: pointer;
    }

    a {
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    .highlight {
      color: white;
      padding: 0 4px;
      border-radius: 3px;
    }

    footer {
      background-color: #222;
      color: white;
      text-align: center;
      padding: 1rem;
      margin-top: 2rem;
    }

    footer a {
      margin: 0 0.5rem;
    }
  </style>
</head>
<body>
  <header>
    <h1>Summer Music Festival</h1>
    <p>Experience <span class="highlight">unforgettable</span> music and vibes all summer long!</p>
  </header>

  <main>
    <div class="card">
      <h2>Rock Stage</h2>
      <p>Join the rock legends for an unforgettable night of music! <a href="#">More info</a></p>
      <button>Learn More</button>
    </div>

    <div class="card">
      <h2>Jazz Stage</h2>
      <p>Relax with smooth jazz performances under the open sky. <a href="#">Schedule</a></p>
      <button>Learn More</button>
    </div>

    <div class="card">
      <h2>EDM Stage</h2>
      <p>Dance all night with top DJs spinning the hottest tracks. <a href="#">Lineup</a></p>
      <button>Learn More</button>
    </div>
  </main>

  <footer>
    <p>Follow us on <a href="#">Instagram</a> | <a href="#">Facebook</a> | <a href="#">Twitter</a></p>
  </footer>
</body>
</html>