목록CSS (1)

웹개발왕

[CSS] :root 가상 클래스로 변수 지정하기

안녕하세요. 오늘은 CSS에서 :root를 사용해서 변수 지정하는 방법을 알아보겠습니다. 혹시 밑에 사진처럼 CSS로 색상 지정 할 때 똑같은 값을 여러개 지정한적 있으신가요? 이런식으로 지정하면 값을 수정 할 때 일일이 수정 해야하기 때문에 너무 번거롭습니다.변수를 선언해서 값을 지정하면 변수값만 수정하면 되기 때문에 훨씬 간단하게 수정이 가능합니다.   :root 변수 선언하기  변수 선언하는 방법은 간단합니다.하이픈(--) 2개를 쓴 다음 변수 이름과 변수 값을 적으면 되는데요.:root { /* Color */ --test-color: #ff0000; /* Size */ --test-size: 10px; } 위 코드처럼 색상뿐만 아니라 사이즈 값도 선언 할 수 있습니다.    :root 변수 ..
HTML & CSS 2024. 9. 19. 20:54
이전 Prev 1 Next 다음