CSS 변수(CSS 커스텀 프로퍼티) 사용

● HTML

<style>
  :root {
    --main-color: #ff0000;
    --font-size: 16px;
  }
</style>
<link rel="stylesheet" href="regist.css">

 

 

● regist.css

.element {
   color: var(--main-color);
   font-size: var(--font-size);
}

 

 

● 자바스크립트를 이용한 CSS 커스텀 프로퍼티 설정

<script>
   document.documentElement.style.setProperty('--main-color', '#ff0000');
   document.documentElement.style.setProperty('--font-size', '16px');
</script>
<link rel="stylesheet" href="regist.css">

 

 

● URL 매개변수를 활용 

<link rel="stylesheet" href="./regist.php?flag=2&size=16">

 

① 확장자를 보면 프로그래밍 파일(php) 이용

② 해당 파일 안에 동일하게 CSS 내용 기술

③ PHP 파일 안에서는 PHP 문법으로 필요한 영역 제한 가능