지역 변수

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

우리는 변수를 선언하기 위해 종종 :root를 사용한다는 것을 눈치채셨을 것입니다. 이는 :root가 전역(global)이기 때문입니다. 여기서 정의된 변수는 (이전에 언급했듯이) HTML 페이지 전체에 적용됩니다.

하지만 때로는 페이지의 특정 부분에만 영향을 미치는 변수가 필요할 때가 있습니다. 예를 들어, 여러 개의 제품 카드가 있는 온라인 쇼핑몰을 구축한다고 상상해 보세요. 다른 요소에 영향을 주지 않고 해당 카드들만 스타일링하기 위해 .card 클래스 내부에 변수를 생성할 수 있습니다.

.card {
  --card-color: orchid;
  background-color: var(--card-color);
}

이런 방식으로, 변수는 .card 요소 내부에서만 작동하므로 특정 영역을 더 세밀하게 제어할 수 있습니다.

챌린지

쉬움

여러 개의 제품 카드가 있는 온라인 쇼핑 페이지가 주어집니다. 당신의 작업은 다음과 같습니다:

.card 클래스 내부에 --card-accent라는 이름의 로컬 CSS 변수를 생성하고 그 값을 coral로 설정하세요.
이 변수를 사용하여 카드 내부 <h3> 제목의 텍스트 색상(text color)을 설정하세요.
동일한 변수를 카드의 <button>에 대한 배경 색상(background color)으로 사용하세요.

치트 시트

CSS 변수는 :root에서 전역적으로 정의하는 것뿐만 아니라, 특정 선택자 내에서 지역적으로 정의될 수도 있습니다. 지역 변수는 해당 선택자의 범위 내에 있는 요소에만 적용됩니다.

.card {
  --card-color: orchid;
  background-color: var(--card-color);
}

이것은 .card 요소 내부에서만 작동하는 --card-color 변수를 생성하여, 특정 컴포넌트의 스타일을 더욱 정밀하게 제어할 수 있게 해줍니다.

직접 해보기

<html>
<head>
    <title>Local Variables</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">    <style>
      /* Global variable for body background */
      :root {
        --body-bg: #000f26;
        --font-family: "Playfair Display", serif;
      }
    
      body {
        background-color: var(--body-bg);
        font-family: var(--font-family);
        padding: 20px;
        display: flex;
        gap: 20px;
        justify-content: center;
      }
    
      /* Card styles */
      .card {
        --card-bg: white;
        background-color: var(--card-bg);
        border-radius: 10px;
        padding: 15px;
        width: 250px;
        text-align: center;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      }
    
      .card h3 {
        margin-top: 0;
      }
    
      .card p {
        font-size: 0.9rem;
        color: #333;
      }
    
      .card button {
        border: none;
        color: #000f26;
        padding: 8px 12px;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;
        margin-top: 10px;
        width: 100%;
      }
    
    </style>
    </head>
    <body>
    
    <div class="card">
      <h3>Classic Sneakers</h3>
      <p>Comfortable and stylish sneakers for everyday wear.</p>
      <button>Buy Now</button>
    </div>
    
    <div class="card special">
      <h3>Luxury Watch</h3>
      <p>Elegant watch with a unique design for special occasions.</p>
      <button>Buy Now</button>
    </div>
    
    <div class="card">
      <h3>Leather Backpack</h3>
      <p>Durable, spacious backpack made from premium leather.</p>
      <button>Buy Now</button>
    </div>
    
    </body>
</html>