물려받기

물려받기(inheritance — 자료에 따라 상속)는 요소에 닿는 선언이 없을 때 부모 요소의 값을 그대로 쓰는 것입니다. body에 글자색 · 글자 크기를 한 번 주면 페이지 안의 글이 모두 그 값을 쓰는 까닭입니다.

그런데 body에 준 테두리는 안쪽 문단에 그려지지 않고, 링크와 단추는 body의 글자색을 따르지 않습니다. 4단원 글자 꾸미기에서 body에 준 글꼴을 안쪽이 받는 것을 봤습니다. 이 레슨은 어떤 속성을 물려받는지, 어디에서 막히는지, 막힌 곳을 어떻게 뚫는지 봅니다.

그림 준비 중

1닿는 선언이 없으면 부모의 값

명시도와 나중에 쓴 규칙은 선언이 여럿 닿을 때였습니다. 하나도 닿지 않을 때의 문장으로 이 규칙을 마칩니다.

브라우저 규칙 5. 닿는 선언이 없으면 글자 · 색처럼 물려받는 속성은 부모의 값을, 나머지는 처음 값을 씁니다.

<div class="recipe-card">
  <p>잘 익은 김치를 씁니다.</p>
</div>

.recipe-card {
  color: #6e6e73;
  border: 2px solid #d2d2d7;
}

• p에 닿는 color 선언은 없습니다. color는 물려받는 속성이라 부모 .recipe-card의 회색을 씁니다.
• 테두리(border)는 물려받지 않는 속성입니다. 테두리는 카드 둘레에만 그려지고 p는 처음 값인 '선 없음'(none)입니다. 테두리는 10단원 '박스 모델'에서 자세히 봅니다.

처음 값(initial value — 자료에 따라 초깃값)은 닿는 선언도, 물려받을 길도 없을 때 그 속성이 처음부터 가진 값입니다. 물려받은 값과 처음 값 모두 그 요소에 직접 닿은 선언이 하나도 없을 때만 쓰입니다.

2물려받는 속성 · 물려받지 않는 속성

• 물려받는 속성(글자 · 색): color · font-family · font-size · font-weight · line-height · text-align
• 물려받지 않는 속성(상자 · 배경): border · margin · padding · background · width

글에 관한 속성은 안쪽 글이 모두 같은 모양이길 바라는 일이 많아 물려받습니다. 상자에 관한 속성은 요소마다 따로라 물려받지 않습니다 — 카드에 준 테두리가 안의 문단마다 또 그려지면 곤란합니다.

3링크와 단추는 기본 스타일이 막는다

<p>잘 익은 김치를 씁니다.</p>
<a href="kimchi.html">자세히</a>
<button>저장</button>

body {
  color: #6e6e73;
  font-size: 18px;
}

링크는 파랗고, 단추는 검정에 본문보다 작은 글자입니다. 기본 스타일에 링크의 글자색, 단추 · 입력 칸의 글자색과 글꼴을 정한 선언이 있기 때문입니다(크롬 기준). 닿는 선언이 있으니 물려받기까지 가지 않습니다.

막힌 곳은 inherit으로 뚫습니다. inherit은 '부모의 값을 쓰라'는 값입니다.

<p>잘 익은 김치를 씁니다.</p>
<a href="kimchi.html">자세히</a>
<button>저장</button>

body {
  color: #6e6e73;
  font-size: 18px;
}

a,
button {
  color: inherit;
  font: inherit;
}

a, button 규칙은 우리 CSS라 기본 스타일을 이기고(브라우저 규칙 5), 그 값이 '부모의 값'입니다. font는 글꼴 · 글자 크기 · 굵기를 한 줄로 정하는 짧게 적기입니다 — 한 줄이 속성 여럿을 정합니다(10단원 여백 짧게 적기에서 자세히).

예제

검색 칸과 단추만 글자가 작다

레시피 노트 검색 줄입니다. body의 글자 크기를 18px로 줬는데, 입력 칸과 단추의 글자만 본문보다 작습니다.

<label for="q">요리 찾기</label>
<input id="q" />
<button>찾기</button>

body {
  font-size: 18px;
}

찾는 차례대로 봅니다.

1. 파일이 닿았나: 라벨이 18px이니 CSS는 닿았습니다.
2. 요소가 나무에 있나: 입력 칸과 단추가 있습니다.
3. 규칙이 닿았나: 단추를 고르면 Styles 창에서 단추에 직접 닿은 규칙은 기본 스타일(user agent stylesheet)⁠뿐이고, 거기에 font 선언이 있습니다(크롬 기준). 그 아래 'Inherited from body' 절에 우리 body 규칙의 18px이 보이지만, 이것은 물려받을 값이라 단추에 직접 닿은 기본 스타일 선언에 집니다.

3번에서 찾았습니다. 입력 칸과 단추에 font: inherit을 줍니다.

<label for="q">요리 찾기</label>
<input id="q" />
<button>찾기</button>

body {
  font-size: 18px;
}

input,
button {
  font: inherit;
}

자주 틀리는 곳

틀린 생각: 부모에 준 속성은 모두 물려받는다 — 또는 아무것도 물려받지 않는다.

<div class="a">
  <p>가</p>
</div>

.a {
  background: #f5f5f7;
}

문단도 회색 바탕이라 배경을 물려받은 것처럼 보입니다. 그런데 p의 배경색은 처음 값인 투명이고, 부모의 칠이 비쳐 보일 뿐입니다. 거꾸로 1절의 글자색처럼 물려받는 속성도 있습니다.

맞는 규칙: 글자 · 색 속성은 물려받고, 상자 · 배경 속성은 물려받지 않습니다(브라우저 규칙 5).

틀린 생각: 부모에게 ID 규칙으로 준 값은 안쪽에서도 이긴다.

<div id="box">
  <p>가</p>
</div>

#box {
  color: #d70015;
}

p {
  color: #1d1d1f;
}

#box는 1-0-0이지만 p에 닿은 규칙이 아닙니다. p에는 0-0-1인 p 규칙이 직접 닿아 그 선언이 쓰이고, 물려받기는 일어나지 않습니다.

맞는 규칙: 물려받은 값은 그 요소에 직접 닿은 선언이 하나도 없을 때만 씁니다. 명시도는 그 요소에 닿은 선언끼리만 견줍니다.

틀린 생각: 링크 색이 안 바뀌면 !important를 붙인다.

부모에 !important를 붙여도 링크의 색은 그대로입니다. 링크에는 기본 스타일 선언이 직접 닿아 물려받기까지 가지 않기 때문입니다.

맞는 규칙: 부모를 따르게 하려면 링크에 color: inherit을 줍니다.

확인 문제

1. 아래 CSS 6번 줄 color: #1d1d1f;를 지우면 바닥글 문장의 글자색은 무엇이 될까요? 코드에 적힌 꼴로 쓰세요.

<footer class="site-footer">
  <p>
    내가 만든 요리를 기록하는 곳
  </p>
</footer>

.site-footer {
  color: #6e6e73;
}

p {
  color: #1d1d1f;
}

<footer class="site-footer">
  <p>
    내가 만든 요리를 기록하는 곳
  </p>
</footer>

.site-footer {
  color: #6e6e73;
}

p {
}

<footer class="site-footer">
  <p>
    내가 만든 요리를 기록하는 곳
  </p>
</footer>

.site-footer {
  color: #6e6e73;
}

p {
  
}

2. 여행 일정의 둘째 날 문단(p)을 손 점수판으로 씁니다. ㉠ · ㉡ 자리에 쓰세요.

<section class="day">
  <h2>둘째 날</h2>
  <p>오전에 바다를 봅니다.</p>
</section>

.day {
  color: #005bb5;
  border: 2px solid #9ac7ff;
}

3. 플로우 카페의 안내 상자입니다. 상자 안 글을 모두 빨갛게 하려 했는데 '약도' 링크만 파랗습니다. 링크도 상자의 색을 따르게 하려면 CSS에 어떤 규칙을 더해야 할까요? 규칙 하나를 쓰세요.

<div class="info">
  <p>매일 9시에 엽니다.</p>
  <a href="map.html">약도</a>
</div>

.info {
  color: #d70015;
}

<div class="info">
  <p>매일 9시에 엽니다.</p>
  <a href="map.html">약도</a>
</div>

.info {
  color: #d70015;
}

.info a {
  color: inherit;
}

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 3절 둘째 예제를 index.html과 style.css로 저장하고 link로 이어 엽니다(문서 뼈대의 body 안에 예제 HTML을 넣습니다). 링크와 단추가 본문처럼 회색인 것을 본 뒤, style.css에서 color: inherit; 줄을 지우면 무엇이 바뀔지 먼저 적고, 저장한 뒤 새로고침합니다.