변수 사용하는 방법

CSS 강좌

CSS의 사용자 지정 속성(custom property)은 --이름: 값 형식으로 선언하고 var(--이름)으로 사용합니다. 흔히 CSS 변수라고 부르며, 반복되는 색과 간격을 한 곳에서 관리할 때 유용합니다. 값은 선언된 요소와 자손에 영향을 주고, 자손에서 다시 정의해 범위를 좁힐 수 있습니다.

공통 값 선언하고 사용하기

문서 전역에서 공유할 값은 :root에 선언할 수 있습니다. 이렇게 선언했다고 모든 요소에 자동으로 색이 입혀지는 것은 아니며, 실제 CSS 속성에서 var()로 참조해야 합니다.

:root {
  --color-accent: #1d5f91;
  --space-card: 1.25rem;
}

.card {
  padding: var(--space-card);
  border: 2px solid var(--color-accent);
}

값을 바꾸면 이를 참조하는 선언의 계산 결과가 함께 바뀝니다. 그렇지만 무조건 모든 수치를 변수로 만들면 읽기 어려워질 수 있으므로 여러 곳에서 재사용하거나 의미 있는 디자인 값부터 묶으세요.

구성 요소 안에서 값 덮어쓰기

사용자 지정 속성은 기본적으로 상속됩니다. .card에 선언한 값은 그 안의 자손에서 사용할 수 있지만 관계없는 형제 카드까지 전달되지는 않습니다. 자손이나 다른 카드에서 같은 이름을 다시 선언하면 해당 범위에서 새 값을 사용합니다.

.card { --color-accent: #1d5f91; }
.card.warning { --color-accent: #a63e32; }
.card h2 { color: var(--color-accent); }

.card.warning은 두 클래스를 모두 가진 카드에만 일치합니다. HTML의 클래스 순서가 아니라 CSS 선택자의 일치와 캐스케이드가 최종 값을 결정합니다.

값이 없을 때와 잘못된 값일 때

참조한 사용자 지정 속성이 정의되지 않았다면 var(--color, blue)처럼 두 번째 인수로 대체값을 줄 수 있습니다. 그러나 속성이 이미 정의돼 있어도 그 값이 사용하려는 CSS 속성에 맞지 않는다면 대체값이 자동으로 선택되는 것은 아닙니다.

.notice { color: var(--notice-color, #184d77); }
.broken { --notice-color: 20px; color: var(--notice-color, #184d77); }

.broken에서는 --notice-color가 정의돼 있으므로 var()의 대체값이 사용되지 않습니다. 하지만 20px은 color에 적합한 값이 아니므로 해당 선언은 계산 시 유효하지 않게 됩니다. 값이 보이지 않으면 변수가 존재하는지만 보지 말고 실제 참조 속성에 맞는 값인지 개발자 도구에서 확인하세요.

전체 예제로 범위 확인하기

다음 파일을 열면 기본 카드와 경고 카드가 서로 다른 강조색을 사용합니다. :root의 여백을 바꾸면 두 카드에 함께 반영되고, 경고 카드의 색은 그 카드에만 적용됩니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS 사용자 지정 속성</title>
  <style>
    :root { --space-card: 1.25rem; }
    body { font-family: sans-serif; margin: 2rem; }
    .card { --color-accent: #1d5f91; max-width: 22rem; margin-block: 1rem; padding: var(--space-card); border: 2px solid var(--color-accent); }
    .card.warning { --color-accent: #a63e32; }
    .card h2 { color: var(--color-accent); }
  </style>
</head>
<body>
  <article class="card"><h2>기본 카드</h2><p>파란 강조색</p></article>
  <article class="card warning"><h2>경고 카드</h2><p>붉은 강조색</p></article>
</body>
</html>

더 자세한 상속과 대체값 규칙은 MDN의 사용자 지정 속성 사용 안내를 참고하세요.

CSS 강좌

CSS / Tutorial / 표 꾸미기 / 배경색

배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다.

CSS / Tutorial / 인용문(Blockquote) 꾸미는 방법

blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다. 그대로 사용하기보다는 여러 가지 모양으로 꾸미는 것이 일반적입니다. 다음은 아래와 같은 인용문을 꾸미는 몇 가지 예제입니다.

CSS / Tutorial / 세로 가운데 정렬하는 방법

CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다. 요소의 가로 가운데 정렬은 margin 속성을 이용합니다. 세로 정렬을 가운데로 하려면 어떻게 해야 할까요? 네 가지 방법을 소개합니다.

CSS / Tutorial / 마우스 호버 효과 / 이미지 확대하는 방법

이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다.

CSS / Tutorial / 양쪽 배분(균등 분할) 정렬 방법

문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다.

CSS Tutorial / !important

CSS에서 !important는 특정 스타일 규칙이 다른 모든 스타일 규칙보다 우선 적용되도록 강제하는 데 사용됩니다. 이 키워드는 일반적인 스타일 우선 순위를 무시하고, 해당 스타일이 다른 어떤 스타일보다도 높은 우선순위를 가지도록 합니다.

CSS / Tutorial / 마름모 만드는 방법

CSS로 삼각형을 만들 수 있다면 마름모는 쉽게 만들 수 있습니다. 삼각형을 두 개 붙이면 마름모가 되기 때문입니다. 마름모는 네 변의 길이가 같은 사각형이므로, 이등변삼각형 두 개를 붙이며 됩니다.

CSS / Tutorial / 문자열 자르는 방법

웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다.

CSS / Tutorial / 마우스 호버 효과 / 서서히 길어지는 선 만드는 방법

마우스를 올리면 선이 그려지는 효과를 만들어봅니다. 다음과 같이 사각형을 만듭니다. :before를 이용하여 선이 시작하는 위치를 정합니다. position 속성으로 선 위에 선을 그릴 수 있도록 설정합니다.

CSS / Tutorial / 링크 꾸미는 방법

CSS로 링크의 기본·방문·마우스·활성 상태를 구분하고, 키보드 초점까지 보이게 만드는 방법을 설명합니다. 밑줄과 색 대비를 유지하면서 직접 확인할 수 있는 예제를 제공합니다.