CSS - HTML 태그 속성을 CSS에서 사용 / CSS 변수 선언 및 사용, 수정, 가져오기

 

HTML 요소의 어트리뷰트 값을 받아와서 CSS에서 사용할 수 있다.

 

 

HTML

CSS에서 사용할 어트리뷰트 값을 태그에 지정한다.

 

어트리뷰트 이름은 아무렇게나 지어도 되지만, 보통은 data-* 형태로 명명하는 것이 국룰이다.

왜냐하면 DOM을 생성할 때 data-* 이름 형태의 어트리뷰트를 모아 dataset이라는 이름의 맵으로 만들어 주고, 이를 자바스크립트에서 사용할 수 있기 때문이다. (대충 효율적이라는 뜻)

...
<div class="donut" data-percent="12"> </div>
...

 

CSS

어트리뷰트 값을 CSS 내부 속성에서 사용하고자 할 때는 attr()로 감싸서 사용할 수 있다.

...
.donut-chart > .donut::after { 
   color: #fff;
   width: 70%;
   padding: calc(35% - .76vw) 0;
   background: #222629;
   border-radius: 50%;
   position: absolute;
   left: 15%;
   top: 15%;
   display: block;
   content: attr(data-content);
   transform: skew(-0.03deg);
   margin: auto;
   font-size: 1.4vw;
}
...

 

그럼 어트리뷰트 값과 문자열을 함께 사용하고자 할 때는 어떻게 할까?

예를 들어 어트리뷰트 변수로 퍼센트 값을 가지고 오고, 뒤에 %를 붙여주고 싶으면 따옴표를 이용하여 그냥 붙여주면 된다.

...
   content: attr(data-content)'%';
...

 

어트리뷰트 값을 CSS 내부 속성이 아닌 CSS 태그를 지정할 때 사용하고 싶다면, 그냥 어트리뷰트 이름으로 사용하면 된다.

...
.donut[data-content='12'] {
   color: #111;
}
...

 

 

비슷한 예시로 CSS 파일 내에서 변수를 선언하여 사용하는 방법도 있다.

 

변수 선언은 최상위 의사 클래스인 :root에서 선언한다.

 

변수명 앞에는 --를 붙여야 하고, var()로 감싸서 CSS 내에서 변수를 사용할 수 있다.

 

:root {
   --y: 200px;
   --bg-light-gray: #e5e5e5;
}

body {
   width: var(--y);
   background-color: var(--bg-light-gray);
}

 

자바스크립트를 이용하여 CSS 변수 값을 가져오거나 수정할 수 있다.

 

수정은 document.documentElement.style.setProperty를 사용하면 된다.

document.documentElement.style.setProperty('변수명', 값)
// 예시
// document.documentElement.style.setProperty('--half-radius-val', (halfGraph.dataset.percent * 9 / 5 - 90) + 'deg')

 

값을 가져오는 방법도 비슷한데, document.documentElement.style.getPropertyValue를 사용하면 된다.

document.documentElement.style.getPropertyValue('변수명')
// 예시
// document.documentElement.style.getPropertyValue('--avg-day')