CSS의 상속

1. CSS 속성의 상속

많은 CSS 참고서적에는 CSS의 상속이 앞에 나와있다. Cascading Style Sheet라는 이름처럼 CSS의 속성은 상위 속성에 영향을 받는다. 그래서 제대로 속성을 적용한 것 같은데 반영이 되지 않거나, 아무런 속성도 적용하지 않았는데 특정 스타일이 적용되기도 한다. CSS의 상속은 제대로 이해하지 못하면 심각한 편집 오류가 발생할 수 있어 CSS를 이해하지 못한 상태에서 CSS의 상속을 이해하기는 아주 어렵다. 이 내용을 보기 전에 CSS에 대해 먼저 공부하기를 권한다. 

1.1 CSS의 상속이란?

만약 스타일이 아래처럼 적용되어 있다면 결과가 어떻게 나올까?

blockquote {

 color : yellow;

}

<blockquote>

<p>이 문장은 <strong>무슨 색으로</strong>보일까요?</p>

</blockquote>

부모인 blockquote 태그에 빨간색이 지정되어 있으니 자식인 p와 손주에 해당하는 strong 태그에도 빨간색 속성이 적용된다. CSS 상속이란 부모의 스타일이 자식에게 그대로 전달된다는 의미다. blockquote에 글자 모양이나 크기 등 다른 스타일이 적용되더라도 그 스타일은 blockquote의 아래에 있는 p 태그나 strong 태그에 그대로 적용된다. 

cascading은 폭포에서 물이 위에서 아래로 떨어져 제일 아래의 물이 바닥에 닿듯이 상위 스타일이 하위 영역에도이 적용된다는 의미다. 여기까지는 아주 간단하다. 하지만 다음의 경우에는 조금 더 복잡해 질 수 있다.

아래 예제는 어떤 결과가 나올까?

blockquote {

 color : yellow;

}

p {

  color : red;

}

.blue {

 color : blue;

}

strong {

 color : grey;

}

<blockquote>

<p>이 문장은 <span class="blue">무슨 색으로 <strong>보일까요?</strong></span></p>

</blockquote>

아주 간단한 스타일이 적용됐지만 CSS를 제대로 이해하지 못했다면 글자 색이 무슨 색일지 정확히 알기 어렵다. 스타일이 상속이 되기 때문에 blockquote의 노란색이 p태그에 적용되야 하는데 p태그에는 다시 빨간색으로 스타일이 적용돼 있다. 상속된 속성이 적용될지, 자신의 속성이 적용될지는 CSS를 적용해본 사람이라면 쉽게 알 수 있다. blockquote의 노란색 아래에 p의 빨간색이 들어있을 경우 p의 빨간색이 표현된다.

스타일은 부모에게서 자식으로 상속되지만, 자식이 고유 스타일을 갖는다면 부모 스타일보다 자식 스타일이 우선적으로 적용된다. 자식 스타일에 없는 것은 부모 스타일을 따르기 때문에 부모 스타일 + 자식스타일이  합쳐진 것이 최종 결과가 된다. 

그런데 편집을 하다 보면 아래 예제처럼 부모 스타일을 자식에게 그대로 전달하고 싶은 경우가 생긴다. 

p {

 color : blue; /*본문 전체는 파란색 글자로 표현*/

}

blockquote {

 color : red; /*인용구는 빨간색 글자로 표현*/

}

p {

 color : blue; /*본문 전체는 파란색 글자로 표현*/

}

blockquote {

 color : red; /*인용구는 빨간색 글자로 표현*/

}

본문에 적용된 스타일과 인용구나 추가적인 설명에 사용될 스타일이 달라야 하는데 문단을 구분하는 태그는 p 태그밖에 없기 때문에 p 태그 안에 여러 스타일을 적용할 수 없어 문제가 생긴다. 

위 예제 코드는 인용구와 본문 모두 파란색으로 표현된다. 그러다보니 대부분의 편집자들은 필요할 때마다 클래스를 추가해서 책 한권 편집하는데 수십개의 클래스를 사용하기도 한다. 

p {

 color : blue;

}

.red {

 color : red;

}

<p> 본문 기본 스타일은 파란색입니다.</p>

<blockquote>

<p class="red">인용구는 빨간색입니다.</p>

<p class="red">인용구는 빨간색입니다.</p>

<p class="red">인용구는 빨간색입니다.</p>

<p class="red">인용구는 빨간색입니다.</p>

</blockquote>

가장 많이 사용하는 상속 문제 해결 방법이다. 간단한 해결방법이지만 이렇게 하면 인용구 문단에 항상 class를 추가해야하기 때문에 편집이 어려워진다. 인용구가 많아진다면 편집 시간이 길어질 수 밖에 없다.

CSS  상속을 제대로 이해하면 이런 문제를 쉽게 해결할 수 있도록 도와준다. 다음장에서 다양한 CSS  상속 방법을 설명할 것이다. CSS상속은 아주 복잡하다. 여기에서는 책 편집에 유용하게 사용할 수 있는 상속을 설명하려고 하니 자세한 CSS상속에 대해 알고싶다면 CSS 관련 서적을 참고하기 바란다.

1.2 공통 스타일 적용

CSS 스타일은 계속해서 상속된다. 같은 p태그라도 서로 다른 스타일이 적용돼 있다면 중복되지 않는 부분은 모두 상속된다.

p.style01 {

 text-indent : 1em;

}

p.style01 {

 margin : 0;

}

p.style01 {

 padding : 0;

}

p.style01 {

 font-family : "굴림"

}

p.style01 {

 font-size : 1em;

}

p.style02 {

 text-indent : 1em;

 margin : 0;

 padding : 0;

 font-family : "굴림"

 font-size : 1em;

}

위 예를 보면 p.style01과 p.style02는 완전히 동일한 스타일이다. p.style02를 여러번 나눠 각각 다른 스타일을 지정하더라도 스타일이 상속되기 때문에 한번에 지정한 것과 동일한 효과가 적용된다.

이런 상속을 통해 아래처럼 여러 선택자에 공통으로 적용되야 하는 스타일을 한번에 지정할 수 있다. 

p {

 text-indent : 1em;

 margin : 0;

 padding : 0;

 font-family : "굴림"

 font-size : 1em;

}

h1 {

 text-indent : 1em;

 margin : 0;

 padding : 0;

 font-family : "굴림"

 font-size : 2em;

}

h2 {

 text-indent : 1em;

 margin : 0;

 padding : 0;

 font-family : "굴림"

 font-size : 1.5em;

}

위 스타일은 폰트 크기만 제외하면 모두 동일한 스타일을 갖고 있다. 이런 스타일을 아래처럼 정리하면 보다 간결해진다. 

p, h1 {

 text-indent : 1em;

 margin : 0;

 padding : 0;

 font-family : "굴림"

}

p {

 font-size : 1em;

}

h1 {

 font-size : 2em;

}

h2 {

 font-size : 1.5em;

}

예제에서는 동일 스타일이 적용된 태그가 3개 뿐이지만, 이런 태그가 여러개라면 동일한 스타일을 반복할 필요 없이 다른 속성만 적용하면 된다.

스타일을 통합적용할 때에는 주의를 해야한다. 통합적용된 스타일은 모든 태그에 다 적용되기 때문에 태그별로 스타일 조정이 어려워진다. 

1.3 부모, 자손, 자녀, 형제 관계

CSS의 상속을 이해하기 위해서는 자손, 자녀, 형제 관계를 먼저 이해할 필요가 있다. 이 부분이 어렵다면 그냥 지나쳐도 된다. 하지만 상속 관계를 잘 이해하면 편집 시간을 줄이고, 보다 다양한 표현을 할 수 있게 된다. 

부모, 자식, 형제 같은 용어를 쓰는 이유는 영어권에서 Parents, Descendant, Child, Sibling이라는 단어를 사용하고, 가족간에 재산을 상속하듯 스타일을 상속하기 때문이다.

CSS의 속성은 폭포가 위에서 아래로 떨어지듯 부모 속성이 자식에게 전달되는 것을 원칙으로 한다. 그래서 특정 태그에 속성을 지정하면 그 속성은 모두 자식에게도 영향을 준다. 

하지만 자식 이기는 부모 없다는 속담이 CSS에서도 적용된다.부모에게서 물려받은 속성 대신 자식이 고유의 속성을 갖는다면 부모 보다 자식 속성이 강하다. 

div {

  color : red;

}

p {

 color : blue;

}

<div>

div는 p에 대해 부모 속성을 갖는다.

<p>p는 부모인 div에 대해 자식이 된다.</p>

</div>

위 예를 실행해 보면 div 속성이 적용된 [div는 p에 대해 부모 속성을 갖는다]는 문장은 빨간색으로 보인다. div 태그 안에 있는 p 태그는 div의 자식이다. 그리고 div는 p 태그의 부모라고 한다. 자식 속성이 강하다고 한 건 p 태그로 묶인 [p는 부모인 div에 대해 자식이 된다]는 부분은 부모인 div에 적용된 빨간색에 영향을 받지 않고 파란색으로 표시되기 때문이다. 

div는 p에 대해 부모 속성을 갖는다.

p는 부모인 div에 대해 자식이 된다.

자식은 다시 자손과 자녀로 구분된다. 자손은 부모의 자녀 뿐 아니라 자녀의 자녀, 즉 손자나 손녀까지 포함된다. 자녀는 부모와 1촌 관계만을 의미하고, 자손은 2촌 이상이라는 의미다.

아래 예를 먼저 살펴보자. 

div {

  color : yellow

}

p {

 color : blue;

}

strong {

 color : red;

}

<div>

div는 p에 대해 부모이다.

    <p>p는 부모인 div에 대해 자녀가 된다.

         <strong>strong은 div의 자손이며 p의 자녀이다.</strong>

   </p>

</div>

div는 p에 대해 부모이다.

p는 부모인 div에 대해 자녀가 된다.

strong은 div의 자손이며 p의 자녀이다.

부모, 자손, 자녀의 관계를 이해했다면 위 예제의 결과를 이해할 수 있다. div에 영향을 받는 문장은 노란색, p에 영향을 받는 문장은 파란색, strong에 영향을 받는 문장은 빨간색이 된다. 

형제는 포함관계가 아닌 동급의 관계를 의미한다. 형제 관계는 다시 인접 형제와 일반 형제 관계로 구분할 수 있다.

<div>

    <p id="p3">p는 부모인 div에 대해 자녀가 된다. </p>

</div>

<p id="p1">이 p1은 div 태그의 인접 형제이다.</p>

<p id="p2"> 이 p2는 p1의 힌접형제이면서 div의 일반 형제이다.</p>

위 예제를 보면 div와 id가 p1, p2, p3인 3개의 p태그가 있다. div 태그와 p1은 서로 붙어 있는 인접 형제가 된다. p2는 div와 한단계 떨어져 있지만 부모 자식 관계가 아니기 때문에 div와 일반 형제가 된다. p3는 div의 자식이기 때문에 p1이나 p2의 형제가 될 수 없다.

형제간에는 서로 영향을 주지 않는다. 하지만 다음에 설명 할 결합 속성(Combinator)을 통해 서로 영향을 줄 수 있다.

1.4 자손 상속(Descendant Selector)

자손 상속은 [blockquote   p]처럼 띄어쓰기로 지정할 수 있다. 

자손은 내 아이(자녀) 뿐 아니라 아이의 아이(손주)까지 포함하는 개념이다. 

부모와 자식으 같은 속성에 다른 값을 갖는다면 자식 속성이 반영된다. 부모의 글자 색이 빨간색이고, 자식의 글자 색이 파란색이라면 최종 결과는 파란색이 된다. 하지만 특정 부모 태그 안에 들어가 있는 자식 태그에  부모가 지정한 스타일을 적용하고 싶을 때가 있다.  

본문에 사용하는 p 태그에는 들여쓰기에 글자 크기를 1em으로 스타일을 적용했지만, 인용구에 사용하는 p태그는 들여쓰기 없이 0.8em의 글자 크기를 적용하고 싶다면 자손 상속을 사용할 수 있다. 

p {

 color : red;

}

blockquote p {

 color : blue

}

<p> 본문은 빨간색이 적용된다.</p>

<blockquote>

   <p> blockquote 안의 p태그는 파란색이 적용된다.</p>

   <div><p>2촌 이상이어도 파란색이 적용된다.</p></div>

</blockquote>

본문은 빨간색이 적용된다.

blockquote 안의 p태그는 파란색이 적용된다.

2촌 이상이어도 파란색이 적용된다. 

위 예에서 처럼 자손 상속을 하게 되면 기본 스타일이 정해져 있다고 해도 부모 태그 아래에서는 영향을 받지 않을 수 있다. 그리고 자손 상속은 2촌 이상, 다시 말해 부모 태그 안에 div 같은 다른 태그가 사용된 후 p태그가 나와도 자손 상속 스타일이 적용된다.

4.2.6.5 자녀 상속(Child Selector)

저녀 상속은 [blockquote > p]처럼 꺽쇠로 지정할 수 있다. 

자녀는 내 아이만 해당한다. 손주에게는 영향을 주지 않는다. 

자녀상속은 자손상속보다 약한 개념이다. 자녀상속은 1촌 관계에서만 영향을 받는다. 2촌이 되면 자녀 상속 받은 스타일이 아니라 기본 스타일을 따르게 된다.

p {

 color : red;

}

blockquote > p {

 color : blue;

}

<p>기본 스타일인 빨간색이 적용된다.</p>

<blockquote>

<p>자녀 속성인 파란색이 적용된다.</p>

<div><p>2촌 이상은 기본 스타일인 빨간색이 적용된다.</p></div>

</blockquote>

기본 스타일인 빨간색이 적용된다.

자녀속성인 파란색이 적용된다.

2촌 이상은 기본 스타일인 빨간색이 적용된다. 

1.6 형제 상속

형제상속은 인접(img + p) 형제와 일반(img ~ p) 형제로 나뉜다. 형제끼리는 서로 스타일에 영향을 주지 않지만 형제 상속을 하게 되면 영향을 받게 된다. 예를 들어 논문처럼 모든 이미지 아래에 설명을 붙여야 한다면 형제상속을 이용할 수 있다.

인접 형제간 스타일을 적용하려면 [img + p] 처럼 더하기(+)를 이용한다. 인접 형제는 특정 태그 바로 다음에 나오는 경우에만 영향을 주는 스타일이다. 

p {

 color : red;

}

img + p {

 color : blue;

}

<p>기본 스타일인 빨간색이 적용된다.</p>

<img src="sample_image.jpg">

<p>img 태그 바로 다음에 나오는(인접한) p 태그는 파란색이 적용된다.</p>

<p>img 태그와 한단계라도 떨어지면 기본 스타일인 빨간색이 적용된다.</p>

기본 스타일인 빨간색이 적용된다.

[이미지]

img 태그 바로 다음에 나오는(인접한) p 태그는 파란색이 적용된다.

img 태그와 한단계라도 떨어지면 기본 스타일인 빨간색이 적용된다.

일반 형제는 [img ~ p]처럼 물결무늬(~)로 지정하며, 특정 태그 다음에 나오는 모든 특정 태그에 영향을 준다. 

p {

 color : red;

}

img ~ p {

 color : blue;

}

<p>기본 스타일인 빨간색이 적용된다.</p>

<img src="sample_image.jpg">

<p>img 태그 다음에 나오는 모든 p 태그는 파란색이 적용된다.</p>

<p>img 태그 다음에 나오는 모든 p 태그는 파란색이 적용된다.</p>

기본 스타일인 빨간색이 적용된다.

[이미지]

img 태그 다음에 나오는 모든 p태그는 파란색이 적용된다.

img 태그 다음에 나오는 모든 p태그는 파란색이 적용된다.

* 단, 형제일때만 해당한다. 만약 형제의 자식이거나 부모인 경우 img 뒤에 나오더라도 빨간색이 된다.

스타일의 상속은 주의해서 사용해야 한다. 정확히 이해하고 사용하면 편집 시간을 절약하고 다양한 스타일을 표현할 수 있지만 잘못 사용하면 의도하지 않은 결과가 나올 수 있기 때문이다. 

이 외에도 공통(모든 자식 관계에서 적용) 관계나 손자 관계 등 보다 다양한 적용 방식이 있으니 필요한 경우 관련 서적을 참고하기를 바란다.