1. 글꼴 크기 조정

뷰포트 body기준

• vw: 뷰포트 너비의 %
• vh: 뷰포트 높이의 %
• vu: 루트 요소의 인라인 축방향으로 뷰포트 크기의 1%
• vb: 루트 요소의 블록 축방향으로 뷰포트 크기의 1%
• vmin: vw 또는 보다 작은 vh%
• vmax: 더 큰 또는 vw 또는 vh%

p{font-size: 4vw;}

min, max이용

p{font-size: min(변화값, 최소 고정값)}
span{font-size: max(최대 고정값, 변화값)}

2. 사용자 지정 속성

기본 사용법

• 전용 표기법을 사용해 정의
• var() 함수를 사용해 접근
• :root 에 선언해 HTML 문서 어디에서나 접근 가능
• CSS

element {
  --main-bg-color: brown;
}
:root {
  --main-bg-color: brown;
}
element {
  background-color: var(--main-bg-color);
}

• Javascript

// 인라인 스타일에서 변수 얻기
element.style.getPropertyValue("--my-var");
// 어느 곳에서나 변수 얻기
getComputedStyle(element).getPropertyValue("--my-var");
// 인라인 스타일에 변수 설정하기
element.style.setProperty("--my-var", jsVar + 4);