[css] CSS 변수 글꼴 관리

22 Dec 2023

웹 개발을 하다 보면 글꼴을 일괄적으로 관리하는 일이 중요합니다. 각 요소마다 글꼴을 지정하는 것이 아니라 한 곳에서 통합적으로 관리하고 싶을 때 CSS 변수를 사용할 수 있습니다.

CSS 변수란?

CSS 변수는 -- 접두어를 사용하여 정의되며, 해당 변수를 사용하고 싶을 때는 var() 함수를 사용해 값을 참조합니다.

예를 들어, 다음과 같이 글꼴 변수를 정의하고 사용할 수 있습니다.

:root {
  --main-font: 'Noto Sans', sans-serif;
}

body {
  font-family: var(--main-font);
}

이렇게 하면 코드의 유지보수와 가독성이 개선되며, 글꼴을 한 곳에서 일괄적으로 변경할 수 있습니다.

웹 사이트 전체의 글꼴을 일괄적으로 변경하고 싶을 때, CSS 변수를 사용하여 글꼴을 한 곳에서 쉽게 관리할 수 있습니다.

다음은 웹 사이트 전체의 글꼴을 통일하는 예시입니다.

:root {
  --main-font: 'Noto Sans', sans-serif;
}

body, h1, h2, p {
  font-family: var(--main-font);
}

이렇게 하면 모든 요소에서 동일한 글꼴이 적용되며, 글꼴을 변경하고 싶을 때 --main-font 변수만 수정하면 됩니다.

CSS 변수를 사용하여 글꼴을 효과적으로 관리하면 유지보수가 용이해지고 일관된 디자인을 유지할 수 있습니다.

CSS 변수를 사용하여 웹 사이트에서 글꼴을 일괄적으로 관리할 수 있습니다. 이를 통해 코드의 유지보수성을 높이고 일관된 디자인을 유지할 수 있습니다.

CSS 변수를 활용하여 글꼴을 관리하는 방법을 익혀두면 웹 개발 과정에서 효율적으로 디자인을 적용할 수 있을 것입니다.