CSS / Tutorial / 변수 사용하는 방법
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 / ul, ol 가운데 정렬하는 방법
목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. 만약 요소의 내용에 맞게 자동으로 크기가 정해지게 하고 싶으면 display 속성을 사용합니다.
CSS 사용자 지정 속성을 :root와 특정 구성 요소에 선언하고 var()로 색과 간격을 재사용하는 방법을 설명합니다. 상속 범위, 값이 없을 때의 대체값, 유효하지 않은 값의 처리도 예제로 확인합니다.
CSS / Tutorial / 선택자(Selector)
CSS의 요소·클래스·ID·속성 선택자가 어떤 HTML 요소를 고르는지 예제로 설명합니다. 여러 클래스를 가진 요소, 선택자가 일치하지 않을 때, ID와 클래스의 사용 기준도 다룹니다.
CSS / Tutorial / CSS를 HTML에 적용시키는 방법
외부 CSS 파일, 문서 안의 style 요소, 인라인 스타일을 HTML에 적용하는 방법을 예제로 비교합니다. 파일 경로와 규칙이 겹칠 때의 확인 방법도 설명합니다.
CSS의 border 속성으로 삼각형을 만들 수 있습니다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아봅니다.
CSS / Tutorial / 마우스 호버 효과 / 서서히 길어지는 선 만드는 방법
마우스를 올리면 선이 그려지는 효과를 만들어봅니다. 다음과 같이 사각형을 만듭니다. :before를 이용하여 선이 시작하는 위치를 정합니다. position 속성으로 선 위에 선을 그릴 수 있도록 설정합니다.
CSS에서 !important는 특정 스타일 규칙이 다른 모든 스타일 규칙보다 우선 적용되도록 강제하는 데 사용됩니다. 이 키워드는 일반적인 스타일 우선 순위를 무시하고, 해당 스타일이 다른 어떤 스타일보다도 높은 우선순위를 가지도록 합니다.
CSS / Tutorial / 마우스 호버 효과 / 텍스트 나오게 하는 방법
CSS로 특정 요소에 마우스를 올렸을 때 보이지 않던 특정 요소가 보이게 할 수 있습니다. 아래는 문단에 마우스를 올렸을 때 div 요소가 나오게 하는 예제입니다. div 요소 안에 텍스트가 있지만, 텍스트가 아닌 이미지 등 다른 것도 가능합니다.
CSS / Tutorial / 양쪽 배분(균등 분할) 정렬 방법
문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다.