종속과 상속

공헌자 숫자: 2명

중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/14)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.

CSS 시작하기 안내서의 4번쨰 섹션; stylesheets가 종속적으로 동작하는 것과 element가 부모로 부터 style을 상속 받는 것에 대해 서술해 본다. 단순하게 document의 많은 Style중 어떤 Style을 사용할 것인지 한단계 상속만으로 하나의 Style을 stylesheet에 추가 할 수 있다.

정보: 종속과 상속

element의 최종 style은 다양한 상호작용을 통해 여러 장소에서 선언된 것을 사용할 수 있다. 이런 다양한 상호작용을 통해 CSS는 강력해 질 수 있으며, 반대로 디버그 하기에는 복잡하고 어려워 진다.

종속의 세가지 주요 원천은 아래와 같다.

  • 마크업 언어를 위한 브라우저의 기본 style들
  • document를 읽는 사용자가 정의하는 syltes
  • 만든이에 의해 Style은 Document와 연결된다. 다음 3곳에서 그 내용을 명시할 수 있다.These can be specified in three places:
    • 외부 파일: 이 안내서에서 주로 취급하는 Style에 대한 정의하는 법.
    • Document의 시작 부분에 정의하는 법: 선언한 Style은 선언된 Document의 페이지에서만 사용된다.
    • Document body의 특정 element에: 유지 보수가 가장 불편한 방법이며, 주로 테스트 용도로 쓴다.

사용자 Style은 브라우저의 기본 Style을 변경 할수 있다. document 만든이의 style 에서 더 수정 변경 될 수도 있다. 이 안내서에서는, 예제 Document에서 만든 자신만의 stylesheets를 만들 수 있다.

예제

이 문서를 브라우저로 보면, 일부 style은 브라우저의 기본 값을 사용한다.

일부는 브라우저 셋팅에서 수정한 style이 저장된 파일에서 가져온다. 파이어 폭스 브라우저에서 "설정" 메뉴나, 브라우저 폴더에 있는 userContent.css 직접 수정하여 변경 가능하다.

일부 style은 wiki server에 의해 Stylesheet에 정의된 값을 사용한다.

예제 Document를 브라우저에서 열면, <strong> elements로 지정된 문자는 다른 문자들 보다 두껍다. 이 Style은 기본 Style로 설정된 값에서 나온다.

<strong> elements의 색상은 red이다. 이 값은 예제 stylesheet에서 값을 가져 온다.

<strong> elements는 <p> element의 자식 style이므로 대부분의 <p> element의 style을 상속한다. 같은 방식으로, <p> element는 <body> element의 대부분의 style을 상속한다.

종속적인 면에서 style은, 제작자(author)의 stylesheets가 사용자(reader) stylesheet보다도 브라우저의 기본 값보다도 우선 순위가 높다.

상속적인 면에서는, 자식 노드의 자체 Style이 부모의 Style보다 우선 순위가 높다.

우선 순위만 적용되는 것은 아니다. 페이지 아래부분에 좀더 자세히 설명 하도록 하자.

좀더 자세히

CSS는 !important 키워드를 써서 사용자(reader)가 document 제작자(author)의 style을 덮어 쓰는 방법도 제공힌다.

이는 Document 제작자에게 사용자가 항상 제작자가 만든 내용을 그대로 본다는 것을 보장 하지 않는 다는 것을 의미한다.

종속과 상속에 대해 자세히 알고 싶다면, CSS의 상세 사양서 중 속성 값 할당, 종속 및 상속 부분을 보라.

액션: 상속 사용하기

  1. CSS 예제 파일을 편집해 보자.
  2. 아래 라인을 추가 하라. 이미 문서 내에 존재하는 다른 내용이 있더라도 문서의 어디에 추가하든 상관 없다. 그러나, 맨 위에 추가 할수록 Document에 있는<p> element가 <strong> element의 부모가 되므로 지역적으로 영향을 미친다.
    p {color: blue; text-decoration: underline;}
    
  3. 이제 브라우저를 갱신하여 적용된 사항을 보라. 첫글자를 포함한 모든 문자들에 밑출이 그어져 있다. <strong> elements는 부모<p> element의 밑줄 속성을 상속 받았다.

    그러나 <strong> elements는 여전히 붉은색이다. 붉은색 속성은 자체 속성이므로 부모인 <p> element의 파란색 속성보다 우선한다.

Before
Cascading Style Sheets
After
Cascading Style Sheets
도전
Stylesheet를 변경하여 아래와 같이 붉은 글자만 밑줄 속성을 가지도록 수정 해 보라.
Cascading Style Sheets
Possible solution

Move the declaration for underlining from the rule for <p> to the one for <strong>. The resulting file looks like this:

p {color: blue; }
strong {color: orange; text-decoration: underline;}

 

Hide solution
정답 확인

다음에는?

예제 Stylesheet의 <p><strong> 태그를 원하는 style로 임으로 바꾸어 보라. 다음 장에는 설렉터를 사용하는 법에 대해 알아보자.

문서 태그 및 공헌자

Contributors to this page: teoli, SpikeYou
최종 변경: teoli,