CSS 테마 설정

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

CSS 테마 설정(Theming)은 재사용 가능한 색상, 글꼴 및 스타일을 사용하여 웹사이트에 일관된 모양을 만드는 것을 의미합니다. 모든 곳에서 동일한 코드를 반복하는 대신, 테마를 한 번 정의하고(예: 기본 색상 및 강조 색상 설정) 이를 사이트 전체에 적용합니다. 이를 통해 디자인이 전문적이고 통일된 느낌을 줍니다.

작동 방식:
가장 일반적인 접근 방식은 CSS 변수를 사용하여 테마 값을 정의하는 것입니다:

:root {
  --primary-color: #4a90e2;
  --secondary-color: #f5a623;
  --font-family: 'Arial, sans-serif';
}

body {
  font-family: var(--font-family);
  color: var(--primary-color);
}

button {
  background-color: var(--secondary-color);
  color: white;
}

챌린지

쉬움

산과 하이킹에 관한 작은 페이지를 위한 HTML 및 CSS 파일이 제공됩니다. CSS 변수인 --primary-color와 --secondary-color가 이미 코드 전반에 걸쳐 사용되고 있으므로, 테마가 이미 적용되어 있습니다.

과제:
:root에서 이 변수들의 값을 설정하고, 이 페이지에서 서로 잘 어울리는 멋진 메인 색상과 강조 색상을 선택하세요.

치트 시트

CSS 테마 지정은 한 번 정의하고 사이트 전체에 적용되는 재사용 가능한 색상, 글꼴 및 스타일을 사용하여 일관된 디자인을 만듭니다.

:root 선택자에서 CSS 변수를 사용하여 테마 값을 정의하세요:

:root {
  --primary-color: #4a90e2;
  --secondary-color: #f5a623;
  --font-family: 'Arial, sans-serif';
}

var()를 사용하여 테마 변수를 적용하세요:

body {
  font-family: var(--font-family);
  color: var(--primary-color);
}

button {
  background-color: var(--secondary-color);
  color: white;
}

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Theming in CSS</title>
  <style>
    /* Theming with CSS Variables */
    :root {
     
      --bg-color: #f0c4f8;
      --text-color: #333333;
      --font-family: 'Arial, sans-serif';
    }

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

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

    header h1 {
      margin: 0;
      font-size: 2rem;
    }

    nav a {
      color: white;
      text-decoration: none;
      margin: 0 1rem;
      font-weight: bold;
    }

    main {
      padding: 2rem;
    }

    section {
      margin-bottom: 2rem;
    }

    h2 {
      color: var(--primary-color);
    }

    p {
      line-height: 1.6;
    }

    .highlight {
      color: var(--secondary-color);
      font-weight: bold;
    }

    .button {
      display: inline-block;
      padding: 0.75rem 1.5rem;
      background-color: var(--secondary-color);
      color: white;
      text-decoration: none;
      border-radius: 5px;
      margin-top: 1rem;
    }

    footer {
      background-color: var(--primary-color);
      color: white;
      text-align: center;
      padding: 1rem;
    }
  </style>
</head>
<body>

  <header>
    <h1>Mountain Hiking Adventures</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">Trails</a>
      <a href="#">Gear</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <main>
    <section>
      <h2>Explore the Mountains</h2>
      <p>Discover breathtaking trails, enjoy nature, and challenge yourself with our curated hiking routes. Whether you're a beginner or an expert, there is a path for everyone. <span class="highlight">Adventure awaits!</span></p>
      <a href="#" class="button">Learn More</a>
    </section>

    <section>
      <h2>Essential Gear</h2>
      <p>Prepare for your hikes with the right gear. From backpacks to boots, we provide tips on choosing items that will keep you safe and comfortable. <span class="highlight">Stay prepared!</span></p>
      <a href="#" class="button">Shop Gear</a>
    </section>

    <section>
      <h2>Join Our Community</h2>
      <p>Connect with fellow hikers, share your experiences, and participate in group hikes. Our community is welcoming and supportive for all skill levels. <span class="highlight">Join us today!</span></p>
      <a href="#" class="button">Sign Up</a>
    </section>
  </main>

  <footer>
    &copy; 2025 Mountain Hiking Adventures. All rights reserved.
  </footer>

</body>
</html>