CSS를 사용하다보면 자주 사용하게 되는 스타일(메인 컬러, border 스타일 등) 이 존재하는데,
이렇게 반복되는 스타일을 변수로 처리하게 되면 여러가지 이점이 있다. 그 중에서도 내가 생각하는 가장 좋은 점은 아래 두 가지 !
1. 같은 코드를 반복해서 입력하지 않아도 된다. 즉 코드 작성이 편해진다.
2. 추후 메인 컬러나 스타일이 변경되더라도 변수만 변경하면 되기 때문에 유지보수가 편해진다.
변수 생성하기
변수를 생성하기 위해서는 :root 선택자를 사용하고, 속성을 --변수명:변수내용; 과 같이 입력한다.
작성한 내용은 CSS 파일 (html에 직접 CSS를 작성하는 경우에는 style 태그 내) 최상단에 넣으면 된다.
<style>
:root {
--brand-main-color: #EAEAEA;
--brand-sub-color: rgb(0,100,120);
}
</style>변수 사용하기
변수를 사용하는 방법은 아주 간단하다. var(변수명) 으로 사용하면 끝!
main a {
background-color: var(--brand-main-color);
}위와 같이 코드를 작성하면 main태그의 child a 태그들은 배경색으로 변수 --brand-main-color 에서 정한 #EAEAEA 색을 사용한다.
변수는 또 다른 변수를 만들 때도 사용할 수 있다.
메인 컬러 변수를 만든 후에, 해당 색을 테두리 색으로 이용하는 다른 변수를 만들고자 한다면 아래와 같이 사용할 수도 있다.
<style>
:root {
--brand-main-color: #EAEAEA;
--brand-sub-color: rgb(0,100,120);
--default-border: 1px solid var(--brand-main-color);
}
</style>실습
아래와 같이 css 파일의 가장 상단에 --main-color 변수를 생성하였다.
:root {
--main-color: rgb(19,160,133);
}
메인 컬러가 들어가는 곳곳마다 var(--main-color)로 색을 표시하였다.
.intro-word {
background-color: var(--main-color);
}
.header-logo a {
background-color: var(--main-color);
}
.intro-contact i{
border: 0.7px solid var(--main-color);
}
메인 컬러 변수를 넣어 색을 표시한 곳에 변수에서 설정한 rgb(19,160,133) 색이 나타난다.
변수를 사용하는 위력을 경험해보기 위해 변수로 설정한 색을 하늘색으로 바꾸어보도록 한다.
:root {
--main-color:rgba(0,202,249,0.8);
}
변수를 활용하지 않았다면, 색을 바꿔야 하는 모든 선택자를 찾아서 하나씩 색을 바꿔줘야 했을 것이다. 이처럼 자주 활용하는 색을 변수로 설정하면 유지보수의 효율이 기가 막히게 높아진다 ! 적절하게 변수를 활용해서 더욱 즐거운 코딩을 해보도록 하자 !
댓글