2024.07.24 기록

:root 가상클래스 - 변수

같은 하늘 아래 같은 컬러는 없다..

css 통일성을 위해 공용컬러나 사이즈를 미리 가상클래스 변수로 선언 후 사용하면 유지보수에 용이하다.

- 변수 선언

:root{
  --width: 300px;
  --height: 100px;
  --color_black: #333;
  --color_green: #13362d;
  --color_gray: #c8c8c8;
  --font_weight: bold;
  --font_size: 18px;
  --base_space: 8px;
}

- 변수 사용

.btn {
  width: var(--width);
  height: var(--height);
  background-color:  var(color_gray);
  color: var(--color_black);
  font-weight: var(--font_weight);
  font-size: var(--font_size);
  padding: var(--base_space);
}

- 변수 활용

.btn-large {
  width: calc(var(--width) * 2);
  height: calc(var(--height) / 2);
  padding: calc(var(--base_space) / 1.5);
}

참고사이트 https://me-in-journey.com/entry/HTMLCSS-root%EB%A5%BC-%ED%86%B5%ED%95%B4-CSS%EC%97%90%EC%84%9C-%EB%B3%80%EC%88%98%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4-%EB%B3%B4%EC%9E%90-%EA%B0%80%EC%83%81-%ED%81%B4%EB%9E%98%EC%8A%A4%EC%9D%98-%ED%99%9C%EC%9A%A9