🙋🏻‍♀️ 목표: 면접을 준비하기 이전에 알았던 내용들에 대한 개념을 정리해 보자.

1. CSS 변수를 만드는 이유?

🙌CSS도 프로젝트 규모가 커짐에 따라서 유지 보수하기 쉽게끔 기본적으로 만들어줘야 하는 것이 있다.

상수 변수 라는 것인데 MDN에서도 이를 적극 권장하는 페이지가 따로 구별되어져 있다.

이를 통해서 우리가 작성한 코드가 하드 코딩 되는 것을 막도록 하자.

• 출처

  mdn: Custom properties (--*): CSS variables

2. CSS 변수 만드는 법

🙌작성법은 굉장히 쉽다. var() 와 -- 기호를 이용하면 끝이다.

키워드💡: var() calc()

*선언
:root {
<!-- Font size -->
--font-large : 32px;
--font-medium: 16px;
--font-small: 12px;
--font-micro: 8px;
<!-- Background color -->
--background-color: pink;
<!-- Spacing -->
--base-space: 8px;
<!-- Text color -->
--text-color: white;
}

*할당
.card__title {
font-size: var(--font-large, 32px); // 선언된 변수가 없다면 32px을 주세요.
background-color: var(--background-color);
margin-left: calc(var(--base-space) * 2);
}

*media screen and (max-width: 768px) {
:root {
--background-color: red;
--text-color: black;
--base-space: 4px;
}