CSS 변수 사용하기

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

CSS 변수(사용자 정의 속성이라고도 함)를 사용하면 값을 이름 아래에 저장하고 CSS 전체에서 재사용할 수 있습니다.
변수는 다음 구문을 사용하여 선택기(일반적으로 페이지의 모든 곳에서 변수가 작동하도록 :root를 사용하며, 이를 전역이라고 함) 내에 선언됩니다:

:root {
 --main-color: midnightblue;
 --padding: 16px;
}

변수에 저장된 값을 사용하려면 var() 함수를 사용하세요:

.button {
  background-color: var(--main-color);
  padding: var(--padding);
}

챌린지

쉬움

영화관에서 상영 중인 몇 개의 영화를 보여주는 웹페이지가 있습니다. 각 영화에는 Buy Ticket 버튼이 있습니다.

작업 내용:

:root 선택자 안에 --main-color라는 CSS 변수를 생성하고 그 값을 seagreen으로 설정하세요.
해당 변수를 사용하여 페이지의 모든 <button> 요소의 배경색을 설정하세요.

치트 시트

CSS 변수(사용자 정의 속성)를 사용하면 값을 이름 아래에 저장하고 CSS 전체에서 재사용할 수 있습니다.

변수는 --variable-name 구문을 사용하여 선택자 내부에서 선언됩니다. 변수를 전역으로 만들려면 :root를 사용하세요:

:root {
 --main-color: midnightblue;
 --padding: 16px;
}

변수를 사용하려면 var() 함수를 사용하세요:

.button {
  background-color: var(--main-color);
  padding: var(--padding);
}

직접 해보기

<html>
<head>
    <title>How to declare a variable</title>
    <style>
        :root {
            --bg-color: #4c87f5;
             /* Write CSS rules here */
             
          }
        body {
            font-family: Arial, sans-serif;
            background: var(--bg-color);
            padding: 20px;
          }
        .movie {
            background: white;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 8px;
          }
        .movie h2 {
            margin: 0 0 10px;
          }
        .movie p {
            margin: 0 0 10px;
          }
        button {
            color: black;
            border: none;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
             /* Write CSS rules here */
            
          }
    </style>
</head>
<body>
    <h1>Today's Movies</h1>
    <div class="movie">
      <h2>Ocean Whispers</h2>
      <p>A sailor discovers a hidden island and the secrets of the sea.</p>
      <button>Buy Ticket</button>
    </div>
    
    <div class="movie">
      <h2>Midnight Chase</h2>
      <p>A detective races against the clock to stop a mysterious heist.</p>
      <button>Buy Ticket</button>
    </div>
    
    <div class="movie">
      <h2>Starlight Bakery</h2>
      <p>A warm comedy about friendship and following your dreams.</p>
      <button>Buy Ticket</button>
</div>
</body>
</html>