CSS 속성을 변수로 사용하기

Variable (custom properties )(사용자지정 속성)

: color,border등 스타일 속성을 변수로 지정해서 여러운데 사용할 수 있음.
: 수 백 곳의 서로 다른 위치에서 같은 색상을 사용한다면, 그 색을 바꿔야 할 상황이 왔을 때 대규모 전역 검색 바꾸기를 피할 수 없습니다. 사용자 지정 속성을 사용하면 한 영역에 값을 저장해놓고 다른 여러 곳에서 참조해갈 수 있습니다.

:root

• :root 의사 클래스는 문서 트리의 루트 요소를 선택함 (dom트리의 젤 첫 부분인 루트노드)
• :root는 CSS 변수 선언를 전역에 선언하여 유용하게 사용할 수 있음.

/*변수를 전역에 선언함*/
:root {
	--main-color: rgb(233, 233, 102);
}

:root {
	--main-border: 2px solid black;
}

:root {
	--main-pont: '궁서체';
}

/*변수를 사용함*/
p {
  background-color: var(--main-color);
  border: var(--main-border);
  font-family: var(--main-pont);
}

    <p>
      네가 좋아서 그래 나 차가운 척 표정 짓고 있지만 내 마음은 그게 아닌데
      거짓말인데 바보 같은 네가 난 답답해 너무 좋아서 그래 나 시무룩한 얼굴하고
      있지만 또 기다리다 고민만 하다 흘러가는 하루 끝에서 하는 말 내가 널 사랑해
    </p>