HTML/CSS 4.4 · 4부. 반응형과 움직임

사용자 정의 속성

값에 이름을 붙여 한 곳만 고치면 되게 합니다.

예상 학습 시간 15분 예제를 고치면 화면이 그대로 다시 그려집니다 난이도 초급

개념 설명

값에 이름을 붙이기

같은 색을 여러 규칙에 적다 보면 그 색을 바꿀 때 모든 자리를 찾아 고쳐야 합니다. 하나라도 빠뜨리면 그 자리만 옛 색으로 남습니다.

값에 이름을 붙여 두면 한 곳만 고치면 됩니다. CSS 가 그 기능을 가지고 있습니다.

최소 예제 · 편집 가능

정하고 가져다 쓰기

이름은 -- 로 시작합니다. 가져다 쓸 때는 var() 로 감쌉니다.

<p><button class="btn">신청하기</button></p>
<p><span class="tag">필독</span> 공지사항입니다</p>
<div class="card">테두리도 같은 색입니다</div>

/* :root 는 문서 전체를 가리킵니다. 여기에 두면 어디서나 씁니다. */
:root {
  --brand: #6e56cf;
  --radius: 8px;
  --gap: 12px;
}

/* --brand 한 줄만 고치면 아래 셋이 모두 바뀝니다 */
.btn {
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: 8px 16px;
}

.tag  { color: var(--brand); font-weight: 700; }
.card {
  border: 2px solid var(--brand);
  border-radius: var(--radius);
  padding: var(--gap);
  margin-top: var(--gap);
}

--brand 값을 #0b7285 로 바꾸고 다시 그려 보십시오. 세 곳이 함께 바뀝니다.

상세 사용법

물려받고 덮어쓰기

이름은 선언한 요소와 그 안쪽에서 통합니다. 안쪽에서 다시 정하면 그 자리부터 새 값이 됩니다.

<div class="note">보통 안내입니다</div>
<div class="note danger">주의가 필요한 안내입니다</div>
<div class="note ok">끝난 일입니다</div>

:root { --tone: #6e56cf; }

/* 규칙은 하나뿐입니다 */
.note {
  border-left: 4px solid var(--tone);
  background: #f8f7fd;
  padding: 10px 14px;
  margin-bottom: 8px;
}

/* 이름만 덮어쓰면 됩니다 */
.danger { --tone: #d9480f; }
.ok     { --tone: #0b7285; }

규칙을 세 벌 적는 대신 이름 하나만 덮어썼습니다. 변형이 늘어도 한 줄씩만 더하면 됩니다.

상세 사용법

값이 없을 때

style.css

/* 둘째 인자는 이름이 없을 때 쓸 값입니다 */
padding: var(--gap, 12px);

/* 이름이 없고 기본값도 없으면 그 선언이 무시됩니다 */
padding: var(--typo);   /* 오타가 나면 조용히 사라집니다 */

이름을 잘못 적어도 오류가 나지 않습니다. 그 선언만 조용히 무시되므로, 한 자리만 스타일이 빠졌다면 이름의 철자부터 확인하십시오.

상세 사용법

어디에 무엇을 담는가

담을 것	보기
색	`--brand`·`--ink`·`--line`
간격	`--gap`·`--pad`
모서리·그림자	`--radius`·`--shadow`

이름은 쓰임으로 짓습니다. --purple 이라고 지으면 색을 바꿀 때 이름이 거짓말이 됩니다. --brand 가 낫습니다. 1.8 에서 클래스 이름에 대해 말한 것과 같습니다.

흔한 실수

세 가지

var() 를 빠뜨립니다. color: --brand 는 듣지 않습니다. 반드시 var(--brand) 입니다.
이름의 철자를 틀립니다. 오류가 나지 않고 그 선언만 사라집니다.
좁은 자리에 선언하고 넓은 자리에서 씁니다. 이름은 선언한 요소의 안쪽에서만 통합니다. 어디서나 쓸 것은 :root 에 두십시오.

실습 문제

직접 해보기

1. 반복되는 값에 이름 붙이기 난이도 중

아래에서 되풀이되는 값을 이름으로 빼내십시오.

고칠 코드

.btn   { background: #6e56cf; border-radius: 8px; }
.card  { border: 1px solid #6e56cf; border-radius: 8px; }
.badge { background: #6e56cf; border-radius: 8px; }

되풀이되는 것은 색과 모서리 값 둘입니다. :root 에 두십시오.

:root { --brand: #6e56cf; --radius: 8px; } .btn { background: var(--brand); border-radius: var(--radius); } .card { border: 1px solid var(--brand); border-radius: var(--radius); } .badge { background: var(--brand); border-radius: var(--radius); }

요약

정리

이름은 -- 로 시작하고 var() 로 가져다 씁니다.
어디서나 쓸 것은 :root 에 둡니다.
안쪽에서 다시 정하면 그 자리부터 새 값이 됩니다.
이름을 틀려도 오류가 나지 않고 그 선언만 사라집니다.