CSS: 범위 변수

날 따라와

CSS 범위 변수

이 게시물/비디오에서는 css 범위 변수를 살펴보겠습니다. 나는 이미 우리가 어떻게 할 수 있는지 살펴본 게시물을 가지고 있지만 이 게시물에서는 변수를 인라인으로 선언하는 것에 대해 이야기하고 싶습니다.

___

아래에 이 기본 마크업이 있다고 가정해 봅시다. 8개의 항목이 있는 간단한 비순차 목록입니다.

<ul>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Lorem</li>
  <li>Lorem</li>
</ul>

몇 가지 기본 스타일을 사용하여 이러한 항목을 9 x 8 그리드로 바꿀 수 있습니다.

ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 0;
  list-style: none;
}

li {
  margin: 0;
  aspect-ratio: 1 / 1;
  padding: 1.5rem;
  background-color: white;
}

그러나 정적 그리드는 다소 지루할 수 있으므로 간단한 keyframe animation을 생성하여 애니메이션을 적용해 보겠습니다.

@keyframes show {
  0% {
    opacity: 0;
    scale: 0.5;
  }

  100% {
    opacity: 1;
    scale: 1;
  }
}

이러한 키프레임을 사용하여 완전히 투명한 상태에서 완전히 보이는 상태로 애니메이션을 적용하고 배율을 50%에서 100%로 변경합니다. 이제 이 애니메이션을 항목에 추가할 수 있습니다.

li {
  ...
  animation-name: show;
  animation-duration: 0.5s;
}

여기에서 애니메이션 이름을 키프레임의 이름과 동일하게 설정하고 애니메이션이 0.5초 동안 지속되도록 합니다.

li {
  ...
  animation-name: show;
  animation-duration: 0.5s;
  animation-delay: var(--delay, 0s);
}

모든 목록 항목에 적용될 애니메이션 지연을 설정하는 경우. 그러나 우리는 하드 코딩된 값을 제공하는 대신 기본 값이 0초인 css 사용자 정의 속성 또는 변수를 사용하여 설정하도록 애니메이션을 시차를 두고 싶습니다.

<ul>
  <li style="--delay: 0s;">Lorem</li>
  <li style="--delay: 0.1s;">Lorem</li>
  <li style="--delay: 0.2s;">Lorem</li>
  <li style="--delay: 0.3s;">Lorem</li>
  <li style="--delay: 0.4s;">Lorem</li>
  <li style="--delay: 0.5s;">Lorem</li>
  <li style="--delay: 0.6s;">Lorem</li>
  <li style="--delay: 0.7s;">Lorem</li>
  <li style="--delay: 0.8s;">Lorem</li>
</ul>

변수가 있으면 인라인으로 배치하여 각 목록 항목에 고유한 값을 부여할 수 있습니다.

nth-of-type 의사 선택기로 동일한 작업을 수행할 수 있지만 이는 매우 빠르게 지저분해지며 가질 수 있는 항목 수를 수정합니다. (의사 선택기에 대해 더 알고 싶다면 관련 기사가 있습니다.)

다음으로 동일한 기술을 사용하여 배경색을 변경할 수 있습니다.

li {
  animation-name: show;
  animation-duration: 0.5s;
  animation-delay: var(--delay, 0s);
  background-color: hsl(var(--hue, 0), 50%, 50%);
}

여기에서 css에 배경색을 추가하고 hsl 함수를 사용하여 색상을 만듭니다. 또한 --hue라는 변수를 사용하여 색조 값을 설정합니다! (hsl에 대해 잘 모르시겠습니까? 내 를 확인하십시오)

<ul>
  <li style="--delay: 0s; --hue: 100;">Lorem</li>
  <li style="--delay: 0.1s; --hue: 120;">Lorem</li>
  <li style="--delay: 0.2s; --hue: 140;">Lorem</li>
  <li style="--delay: 0.3s; --hue: 160;">Lorem</li>
  <li style="--delay: 0.4s; --hue: 180;">Lorem</li>
  <li style="--delay: 0.5s; --hue: 200;">Lorem</li>
  <li style="--delay: 0.6s; --hue: 220;">Lorem</li>
  <li style="--delay: 0.7s; --hue: 240;">Lorem</li>
  <li style="--delay: 0.8s; --hue: 260;">Lorem</li>
</ul>

그런 다음 이러한 변수를 html에서 인라인으로 설정할 수도 있습니다. 그러면 아래와 같이 애니메이션이 표시됩니다.

좀 더 다이내믹하게

이러한 모든 인라인 변수를 수동으로 생성하는 것은 약간 지루할 수 있습니다. 따라서 동적으로 생성할 수 있다면 좀 더 유용할 것입니다.

const listItems = Array(7).fill(null);

export default function App() {
  return (
    <main>
      <ul>
        {listItems.map((_val, i) => {
          return (
            <li key={i} style={{ "--i": i }}>
              List item
            </li>
          );
        })}
      </ul>
    </main>
  );
}

여기 우리는 배열 0f 7개의 빈 항목을 생성한 다음 이 배열에 llops하여 7개의 목록 항목을 만드는 매우 기본적인 React 앱이 있습니다. 또한 --i라는 인라인 변수를 생성하고 값을 현재 인덱스로 설정합니다.

li {
  animation-name: show;
  animation-duration: 0.5s;
  animation-delay: var(--i, 0s);
}

이제 CSS에서 이 변수를 사용할 수 있습니다! --i 값이 사용 가능한 css 단위 없이 정수로 설정되어 있기 때문에 위의 스니펫은 아무 작업도 수행하지 않는다는 점만 제외하면 됩니다!

li {
  animation-name: show;
  animation-duration: 0.5s;
  animation-delay: calc(var(--i, 0s) * 0.1s);
}

해당 단위를 제공하기 위해 calc() 함수를 사용하고 --i 값을 곱할 수 있습니다(이 경우에는 0.1s!). 이렇게 하면 각 항목의 지연 시간이 이전 항목보다 0.1초 길어집니다.

li {
  animation-name: show;
  animation-duration: 0.5s;
  animation-delay: calc(var(--i, 0s) * 0.1s);
  background-color: hsl(calc(var(--i, 0) * 40), 50%, 50%);
}

그리고 다시 배경에 대해 동일한 작업을 수행할 수 있습니다. 이 경우를 제외하고 색조 값이 0에서 360도 사이의 숫자이므로 --i에 40을 곱하면 아래 예와 같이 멋진 무지개 효과가 나타납니다.



모두 끝났습니다! 나는 무지개를 만드는 것보다 더 창의적인 사용 사례를 생각해 낼 수 있다고 확신하지만 적어도 지금은 도구 벨트에 이 기술이 있습니다!

내 구독
사줘coffee
채팅하러 오세요
더 많은 기사를 보려면 나를 따르십시오.

소중한 시간 내주셔서 감사합니다. 멋진 하루 보내세요!