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 / Tutorial / 유튜브 동영상을 반응형으로 삽입하는 방법
유튜브 영상을 블로그나 홈페이지에 넣을 때 보통 iframe을 사용합니다. 코드는 유튜브 영상 공유에서 를 클릭하여 구할 수 있습니다. 아래와 같은 코드인데, 고정폭입니다. 즉 웹브라우저의 가로폭이 커지든 작아지든 가로폭이 일정합니다. 이를 반응형으로 만들고 싶다면 아래처럼 합니다.
CSS 규칙의 선택자, 속성, 값과 선언을 예제로 설명합니다. 여러 선언과 주석을 쓰는 방법, 문법 오류를 확인하는 순서도 배울 수 있습니다.
CSS / Tutorial / position의 값이 fixed일 때 가운데 정렬하는 방법
position의 fixed를 이용하여 요소의 위치를 고정시킬 수 있습니다. 예를 들어 상단에 고정되는 메뉴바를 만들 때 사용합니다. 그런데, fixed를 하면 요소가 한쪽으로 치우칩니다. 만약 가운데에 위치시키고 싶다면 어떻게 할까요? transform 속성으로 해결할 수 있습니다.
CSS / Tutorial / 세로 가운데 정렬하는 방법
CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다. 요소의 가로 가운데 정렬은 margin 속성을 이용합니다. 세로 정렬을 가운데로 하려면 어떻게 해야 할까요? 네 가지 방법을 소개합니다.
CSS / Tutorial / 마우스 호버 효과 / 이미지 확대하는 방법
이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다.
CSS / Tutorial / CSS를 HTML에 적용시키는 방법
외부 CSS 파일, 문서 안의 style 요소, 인라인 스타일을 HTML에 적용하는 방법을 예제로 비교합니다. 파일 경로와 규칙이 겹칠 때의 확인 방법도 설명합니다.
표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은 다음과 같습니다. 표(table) : 왼쪽 정렬 제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬 내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬 셀 안의 내용 세로 정렬 : 가운데 정렬
CSS의 border 속성으로 삼각형을 만들 수 있습니다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아봅니다.
CSS / Tutorial / 상속(inheritance)
CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다.
CSS / Tutorial / placeholder의 색, 글자 모양 등 꾸미는 방법
placeholder는 HTML5에서 새로 나온 속성으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다.