css 소스: :root { } 간단하게 사용해보기

설명

css 에서 :root 사용해서 속성값을 저장해서 사용할 수 있습니다.
1.  css 파일 상단에 :root { } 작성합니다.
2.  { } 안에 속성 속성값 작성합니다.
3.  작성할 때 앞에다가 -- 작성합니다.
4.  앞에다가 -- 작성하고 속성이름 정합니다.
5.  속성이름 정할 때 알아보기 쉽게 정합니다.
6.  이름 작성 후 css 속성값 작성합니다.
7.  사용방법은 css 속성 : var(작성한이름); 이렇게 작성하면 됩니다. 아래의 코드보면 쉽게 알 수 있습니다.

:root {
  --pt10px: 10px;
  --pt20px: 20px;
  --pt30px: 30px;
  --pt40px: 40px;
  --pt50px: 50px;
  --pt60px: 60px;
  --pt70px: 70px;
  --pt80px: 80px;
  --pt90px: 90px;
  --pt100px: 100px;
}

h1 {
  padding-top: var(--pt10px);
}

h1 한테 padding-top: 10px; 주는거랑 똑같습니다.