index.html

CSS 변수 사용하기

[CODE/WEB]

CSS 에서 같은 색을 여러번 사용하실때 같은 값을 계속 붙여넣기 해서 사용하시나요?

이럴땐 다른 프로그래밍 언어처럼 변수를 사용할수 있어요!


그럼 변수를 어떻게 선언하는 지 볼까요?

:root {
  --main-color: #ABCDE
}

이렇게 :root 안에 --변수명: 색상 형식으로 선언하시면 돼요

그럼 위 예시는 main-color 라는 변수에 #ABCDE 라는 색을 저장한게 되겠죠?


그럼 사용은 어떻게 할까요?

div {
  background: var(--main-color)
}

이렇게 var 괄호안에 변수명을 넣어주시면 돼요!


지금까지 CSS 변수 선언하는 법에 대해 알아봤는데요

이렇게 CSS 를 짜면, 나중에 색을 한번에 바꿀수 있겠죠?


유용하셨으면 공감버튼 부탁드려요!

1 2 3 4 5 6 ··· 8