상속성



상속성(Inheritance)이란?

상속하면 제일 먼저 생각나는 단어로 뭐가 있을까요? 저는 누구에게서 유산을 상속 받았다라고 하는 그 "유산"이란 단어가 생각나네요. CSS의 상속성도 일종의 "유산을 상속 받다"란 의미와 맥락을 같이 한다고 보면 될 듯합니다. 부모님께 유산을 상속 받고, 또 자식은 그 자식에게 유산을 상속하는.. 그런 의미로 생각하면 다음의 예제가 좀 더 쉽게 느껴지리라 생각됩니다.

Embedded Style Sheet형식의 경우
< HTML >
< HEAD >
< TITLE >스타일시트의 상속성< /TITLE >
< STYLE type="text/css" >
P{color:blue ; font-size:9pt; font-family:굴림;}
< /STYLE >
< /HEAD >
< BODY >
< P >스타일 시트는 < B >상속성< /B >을 가지고 있습니다.< /P >
< /BODY >
< /HTML >
 ※ 부모, 자식 의관계


< P >.....< /P > ☞ 부모

< B >.....< /B > ☞ 자식




스타일시트의 상속성

스타일 시트는 상속성을 가지고 있습니다.

  • HEAD안에 적용된 Embedded Style Sheet입니다.
  • < P >의 글꼴색은 파랑색, 폰트크기는 9pt, 서체는 굴림체를 적용합니다.
  • < P >에 적용하라고 되어 있는데, < P >안에 또 < B >라는 것이 있습니다.
  • 이럴 경우는 < B >...< /B >안에 있는 "상속성"이라는 글자도 < P >...< /P >의 영향을 받습니다.
  • < B >...< /B >안에 있는 글자는 < P >...< /P >안에 있기 때문에 자식의 개념으로 생각하면 되고, 전체 < P >...< /P >는 부모의 개념이라고 보면 됩니다.
    상속성을 이해하시겠나요?

※ 상속성의 의미를 그림으로 그려 보았어요.^^

① 태그

② 태그

  • 왼쪽 그림과 같이 ②번 태그로 둘러 쌓인 곳은 모두 ②번 태그의 영향을 받게 됩니다.
  • 즉, ①번 태그도 ②번 태그의 영향을 받아 ②번 태그의 기능이 전달됩니다.
  • 하지만, ①번 태그와 ②번 태그의 동일한 기능이 있을 경우에는 ①번 태그의 영향을 더 직접적으로 받게 되므로 상속성이 강합니다.
  • Inline Style Sheet 중에서도 컨텐츠에 더 직접적으로 영향을 주는 스타일시트가 더 우선순위를 가집니다.


Embedded 와 Inline Style Sheet가 함께 있는 형식의 경우
< HTML >
< HEAD >
< STYLE type="text/css" >
P{color:blue ; font-size:9pt; font-family:굴림;}
< /STYLE >
< /HEAD >
< BODY style="background:yellow" >

< P >스타일 시트는 < B style="color:red ; font-size:20pt">상속성< /B >을 가지고 있습니다.< /P >

< /BODY >
< /HTML >
※ 부모, 자식 의관계


< BODY >

↓
 < P >...< /P >

↓
 < B >...< /B >

부모

↓


자식



스타일 시트는 상속성을 가지고 있습니다.

  • 이번에는 Embedded Style Sheet와 Inline Style Sheet 가 함께 들어 있는 형식의 경우입니다.
  • Inline Style Sheet 와 Embedded Style Sheet가 겹쳐 사용할 경우 우선순위는 태그와 함께 사용되어 더 직접적인 영향을 주는 Inline Style Sheet가 우선권을 가집니다.
  • < P >태그에 적용된 것은 글자는 파랑색/굴림/9pt으로 보이고, 그 안에 < B >...< /B >로 된 부분은 빨강색/20pt으로 나타날 것입니다.
  • < Body >태그에 적용된 배경 스타일시트는 Inline Style Sheet로 위의 예제에서 적용된 Inline Style Sheet 중 < P >태그를 포함하고 있습니다. 그래서, 전체 배경은 노랑색으로 나타나고, < P > 태그, < B >태그에도 배경색이 노랑색으로 적용됩니다.
☆ 글자에 가장 직접적인 영향을 미치는 것은 그 글자를 둘러싸고 있는 태그입니다. 그러므로..< B >...< /B >로 둘러싸여 있는 '상속성'이라는 글자는 < B >...< /B >에 상속을 받습니다. < B >...< /B >를 둘러싸고 있는 < P >...< /P >태그는 < B >...< /B >의 부모가 됩니다. 즉, < P >...< /P >안에 있는 < B >...< /B >를 포함한 모든 텍스트는 < P >의 내용을 상속받게 됩니다. 그래서 < B >...< /B >는 자신의 속성인 빨강색/20pt에 < P >...< /P >가 가진 속성까지 상속받아서 서체는 굴림체가 되는 것입니다.

※ 아래 그림은 전체 설명에 대한 이해를 그림으로 표현했습니다.
  • < B >부분으로 < BODY >의 영향을 받아 배경색은 노랑색입니다.
  • < P >태그가 포함하는 전체 부분은 < P >태그의 영항을 받아 글자색이 자동으로 결정되지만, < B >태그 내부에 있는 "상속성"이라는 글자는 < P >태그와 별개로 < B >의 영향을 받아 글자와 글자색이 지정됩니다.
  • 이 부분은 상위태그(부모태그)인 < P >와 < B >의 우선권이 어디에 있는가를 알려주는 예라고 할 수 있는데, 이럴 경우는 "상속성"이라는 글자를 포함하고 있는 < B >태그가 < P >태그보다는 더 가까이에서 직접적인 영향을 미치므로 "CSS우선 적용 법칙"에 따라 글자는 빨강색/20pt로 나타날 것입니다. 하지만.. 부모인 < P >태그의 영향도 받으므로 서체는 굴림체가 되겠습니다.

그러니까.. 요약해보면,, 가장 가까이에 있는 태그의 영향을 더 많이 받되, 부모의 영향도 받는다는 뜻이 되겠네요? 휴~~~ 설명이 참 복잡하죠?

상속성이란 말이 이제 이해가 되시나요?
상속성이란 말은 간단히 상위의 태그(부모태그)에 영향을 받는다는 의미이지만, 조금 더 복잡하게 들어가면 "CSS의 우선 적용법칙"과 관련이 있습니다.

위의 내용들을 정리하면,,
< B >...< /B >의 부모는 < P >...< /P >,
< P >...< /P >의 부모는 < BODY >...< /BODY >라는 결론이 나옵니다. ^^*