프로그래밍/스크립트
2. 스타일 시트 개요
라제폰
2009. 2. 6. 17:02
. 스타일 시트 개요
이 장에서는 넷스케이프 커뮤니케이터의 스타일 시트 사용에 대해 살펴본다.
이 장에는 스타일을 정의할 때 사용하는 두 가지 서로 다른 유형의 구문에
대한 개요와, 스타일 시트의 사용례, 그리고 스타일 상속에 대해 살펴본다.
2.1 커뮤니케이터에서의 스타일 시트
HTML 문서에 대한 스타일 시트가 소개되기 전에는 웹 페이지 제작자가 웹
페이지의 프리젠테이션을 제어하는데 한계가 있었다. 예를 들어, 특정
텍스트를 항상 제목으로 디스플레이할 수는 있지만, 페이지의 여백을설정한다거나 텍스트의 줄 간격이나 테두리 장식 등은 지정할 수 없었다.
스타일 시트의 도입으로 웹 문서의 프리젠테이션을 좀더 세밀하게 제어할
수 있게 되었다. 스타일 시트를 사용하면, 텍스트 색상이나 여백,
페이지 요소들의 정렬, 폰트 스타일, 폰트 크기, 폰트 굵기 등과 같은
웹 페이지의 스타일 관련 속성들을 지정할 수 있다.
넷스케이프 커뮤니케이터는 두 가지 유형의 스타일 시트 구문을 지원한다.
커뮤니케이터는 캐스캐이딩 스타일 시트(CSS, cascading style sheet)
구문으로 작성된 스타일 시트도 지원하고, 도큐먼트 개체 모델(document
object model)을 사용하는 자바스크립트로 작성된 스타일 시트도 지원한다.
도큐먼트 개체 모델에서 도큐먼트는 프로퍼티(properties)가 있는
개체이다. 각 프로퍼티는 자신이 개체가 되어 또다른 프로퍼티를 가질
수 있다.
스타일 시트를 정의할 때는 "text/CSS"나 "text/JavaScirtp" 중 한가지
구문을 선언해야 한다. 앞으로 이 매뉴얼에서는 "text/CSS" 유형의
스타일 시트에 대한 구문은 CSS 구문이라는 용어를, "text/JavaScript"
유형의 스타일 시트에 대한 구문은 JavaScript 구문이라는 용어를
사용하기로 하겠다.
2.2 캐스캐이딩 스타일 시트 사용하기
넷스케이프 커뮤니케이터는 캐스캐이팅 스타일 시트를 완벽하게 지원한다.
캐스캐이딩 스타일 시트를 사용하는 웹 페이지는 일부를 제외하고
넷스케이프 커뮤니케이터에서 적절하게 디스플레이해 준다.
이 문서에는 넷스케이프 네비게이터 4.0에서 구현되는 기능에 대해
설명하지만, World Wide Web Consortium에서 작성한 스타일 시트에 대한
원래의 스펙(specifications)에 대해 살펴보고 싶다면 다음의 주소로
찾아가기 바란다:
http://www.w3.org/pub/WWW/TR/REC-CSS1
스타일 시트는 하나 이상의 스타일 정의로 구성되어 있다. CSS 구문에서는
해당 스타일에 대한 선택 범주 다음에 프로퍼티 이름과 스타일 값이 괄호로
묶여 있다.
선택 범주에는 어떤 요소가 스타일에 적용되는지, 혹은 어떤 요소를
스타일에 적용할 수 있는지를 나열한다. 선택 범주가 HTML 요소라면 해당
요소의 모든 인스턴스를 스타일에 적용하게 된다. 선택범주는 클래스나 ID,혹은 정황 설명이 될 수도 있다. 이들 종류의 선택 범주에대해서는
이후에 설명한다.
스타일 정의에 있는 각 프로퍼티 뒤에는 콜론(:)이 붙고, 그 뒤에 해당
프로퍼티의 값이 온다. 각 프로퍼티 이름/값으로 이루어진 쌍은
세미콜론(;)으로 다음 쌍과 구분한다.
예를 들어, 다음의 캐스캐이딩 스타일 시트는 두 가지 스타일을 정의한다.
한가지 스타일 정의는 모든 <P> 요소의 폰트 크기를 18로, 그리고 모든
<P> 요소의 왼쪽 여백을 20으로 지정하는 것이고, 또다른 스타일 정의는
모든 <H1> 요소의 색상을 blue로 지정하는 것이다.
<STYLE TYPE = "text/css">
<!--
P {font-size:18pt; margin-left:20pt;}
H1 {color:blue;}
-->
</STYLE>
브라우저가 <STYLE> 요소를 인식할 때 주석(<!-- ... ->)은 무시하므로,
주석 내에 스타일 시트에 관한 내용을 입력할 수도 있다.
주의: 캐스캐이딩 스타일 시트 프로퍼티에 대한 값을 지정할 때,
겹따옴표(")를 포함시키면 안된다.
캐스캐이딩 스타일 시트는 구문이 정확해야 한다. 이름/값 쌍 사이의
세미콜론은 절대 생략할 수 없다. 세미콜론이 하나 빠지면, 해당 스타일
정의는 무시된다. 마찬가지로, 스타일 정의 내의 어딘가에 불필요한 글자가
하나라도 있으면, 역시 해당 스타일 정의는 무시된다.
2.3 자바스크립트와 도큐먼트 개체 모델 사용하기
자바스크립트를 사용하면 도큐먼트 개체 모델을 사용하는 스타일 시트를
정의할 수 있다. 이 모델에서는 웹 페이지 같은 문서를 프로퍼티가 있는
개체로 생각할 수 있다. 각 프로퍼티 역시 개체가 되어 또다른 프로퍼티를
가질 수 있다. 예를 들어, 아래의 코드는 document의 tags 프로퍼티에 있는
개체의 H1 프로퍼티의 color 프로퍼티를 설정하는 것이다.
document.tags.H1.color = "red"
현재 문서의 document 개체에 항상 tags 프로퍼티가 적용되므로,
document.tags에서 document를 생략할 수도 있다.
아래의 예는 자바스크립트와 문서 개체 모델을 사용하여 두 가지 스타일
정의가 있는 스타일 시트를 정의한 것이다. 한가지 스타일 정의는 모든 <P> 요소(ta
gs)의 폰트 크기를 18로, 그리고 모든 <P> 요소의 왼쪽 여백을
20으로 지정하는 것이고, 또다른 스타일 정의는 모든 <H1> 요소의 색상을
blue로 지정하는 것이다.
<STYLE TYPE = "text/javascript">
tags.P.fontsize = "18pt";
tags.P.marginleft = "20pt";
tags.H1.color = "blue";
</STYLE>
자바스크립트 구문을 사용하는 스타일 시트에서는 주석(<!-- ... -->)내에
스타일 시트에 대한 설명을 입력하지 않는다.
with (tags.element) 구문을 사용하면 여러 가지 스타일 설정값이 있는
요소들에 대한 스타일 정의를 간단하게 할 수 있다. 아래의 예는 모든 <P>
요소가 푸른 색상(green)과, 굵은체(bold), 이탤릭체(italic), Helvetica폰트로 디스플레이되도록 지정하는 것이다.
with(tags.P) {
color="green";
font-weight="bold";
font-style="italic";
font-family="helvetica";
}
2.4 예제
스타일 시트를 사용하면 웹 페이지의 여러 가지 스타일 관련 속성을 지정할
수 있다. 폰트와 텍스트에 대해 설정할 수 있는 스타일 관련 속성으로는
텍스트 정렬, 텍스트 색상, (Garamond 같은) 폰트 군(群), (이탤릭체 같은)
폰트 스타일, (굵은체 같은) 폰트 굵기, 줄 간격, (밑줄 같은) 텍스트 장식,
텍스트의 수평 정렬 및 수직 정렬, (문단을 들여쓰거나 내어쓸 수 있는)
텍스트 들여쓰기 등이 있다. 요소들의 배경색과 이미지도 지정할 수 있고,
목록의 뷸렛이나 번호에 대해서도 사용할 색상과 스타일을 지정할 수 있다.
블록 요소에서는 여백 뿐만 아니라 테두리까지 지정할 수 있다. 테두리가
있는 요소에서는 요소의 컨텐트와 테두리 사이의 간격을 나타내는 안여백도
설정할 수 있다.
아래 코드는 CSS 구문과 자바스크립트 구문을사용한 간단한 스타일
시트이다. 이 스타일 시트는 모든 <P> 요소에 왼쪽 여백과 오른쪽 여백이
있고, 텍스트는 양쪽 여백 사이의 가운데에 위치해 있도록 지정하는 것이다.
모든 <H4> 요소는 푸른색(green)이고, 밑줄로 표시되며, 모든 <H5> 요소는
대문자로 표시되도록 지정한다. 네 점이 진한 붉은 색 테두리도 있는데,
그 테두리는 3차원 스타일로 겉처리되고, 텍스트와 테두리 간의 여백은
4포인트이다. 텍스트 색상은 붉은 색이며 배경색은 노란색이다.
모든 <BLOCKQUOTE> 요소는 파란색의 이탤릭체이고, 줄 간격은 폰트 크기에
비해 150%가 된다. 첫 번재 줄은 요소 폭의 10% 들여쓴다.
=========
CSS 구문
=========
<STYLE TYPE = "text/CSS">
P {
textAligh:Center; margin-left:20%; margin-right:20%;}
H4 {
text-decoration:underline; color:green;}
H5 {
text-transfor:uppercase; colr:red;
border-width:4pt; border-style:outset;
background-color:yellow; padding:4pt
border-color:red;}
BLOCKQUOTE {
color:blue; font-style:italic;
line-height:1.5; text-indent:10% }
</STYLE>
================
자바스크립트 구문
================
<STYLE TYPE = "text/javascript">
with (tags.B) { textAlign = "center"; marginLeft="20%", margin-right="20%";}
with (tags.H4) {
textDecoration = "underline"; color = "green";
textTransform = "uppercase"; }
with (tags.H5) {
color = "red";
borderWidths="4pt"; borderStyle = "outset";
backgroundColor = "yellow"; paddings("4pt");
borderColor = "red"; }
with (tags.BLOCKQUOTE) {
color = "blue"; fontStyle = "italic"; lineHeight = 1.5; textIndent = "20pt"; }
</STYLE>
==================
스타일 시트 사용 예
==================
<H4>Underlined Heading 4</H4>
<BLOCKQUOTE>
This is a blockquote. It is usual for blockquotes to be indented, but
the first line of this blockquote has an extra indent. Also the lineheight in this blockquote is bigger than you usually see in blockquotes.
<H5>uppercase heading 5 with a border </H5>
</BLOCKQUOTE>
<P>This paragraph has a text alighnmetn value of center. It also has
large margeins, so each line is not only centeredbut is also inset on
both sides from the element that contains it, which in this case is the
document.</P>
사용례 :(이 결과는 "http://developer.netscape.com/one/dynhtml/index.html"
에서 "chatpter2/Introductory Example"를 클릭하면 확인할 수 있다.
단, 넷스케이프 네비게이터 4.0 이상의 버전에서만 볼 수 있다)
2.5 스타일 상속
다른 요소를 포함하고 있는 HTML 요소는 포함하고 있는 요소의
부모(parent) 요소로 간주하고, 포함된 요소는 자식(child) 요소로
간주한다.
예를 들어, 아래의 HTML 요소에는 <BODY> 요소가 <H1> 요소의 부모 요소이고,
<H1> 요소는 <EM> 요소의 부모 요소이다.
<BODY>
<H1> The headline <EM> is </EM> important! </H1>
</BODY>
대부분의 경우, 자식 요소는 부모 요소의 스타일을 가져오거나 상속받는다.
예를 들어, 스타일이 아래와 같이 <H1> 요소에 할당되었다고 가정해 보자.
<STYLE TYPE = "text/css">
H1 {color:blue; }
</STYLE>
<BODY>
<H1>The headline <EM>is</EM> important!</H1>
이 경우, 자식 <EM> 요소는 그 부모, <H1> 요소의 스타일을 사용하므로,
is 라는 단어는 파란색으로 디스플레이된다. 그러나, 먼저 <EM> 요소가
붉은 색으로 디스플레이되도록 지정하는 스타일을 앞서 설정했다고 가정해
보자. 이 경우, 자식에서 설정된 프로퍼티가 부모에게서 상속한 프로퍼티를
덮게 되므로, is라는 단어는 붉은 색으로 표시될 것이다.
상속은 최상위 단계의 요소에서 시작하는데, HTML에서는 <HTML> 요소를
사용하고, 그 뒤에 <BODY> 요소가 온다.
문서 내의 모든 요소에 대해 기본 스타일 프로퍼티를 설정하기 위해,
<BODY> 요소에 대한 스타일을 지정할 수 있다. 예를 들어, 아래 코드는
기본 텍스트 색상을 푸른색으로 설정한 것이다.
========
CSS 구문
========
<STYLE TYPE = "text/css">
BODY {color:green;}
</STYLE>
=================
자바스크립트 구문
=================
<STYLE TYPE = "text/javascript">
tags.BODY.color = "green";
</STYLE>
일부 프로퍼티들은 부모 요소에서 상속되지 않지만, 대개의 경우,
프로퍼티가 상속되었을 경우와 똑같은 결과가 나타난다.
예를 들어, 상속되지 않는, 색상 프로퍼티의 배경색을 고려해 보자.
자식 요소가 자체 배경 색상을 지정하지 않을 경우,
부모 요소의 배경 색상이 자식 요소 전반에 걸쳐 나타날 것이다.
이것은 자식 요소가 부모 요소의 배경색과 똑같은 색상을 가지고 있을
때와 마찬가지 결과이다.
** 다음에는 스타일 시트를 만들고 스타일을 할당하는 방법에 대해
살펴볼 것입니다.
이 장에서는 넷스케이프 커뮤니케이터의 스타일 시트 사용에 대해 살펴본다.
이 장에는 스타일을 정의할 때 사용하는 두 가지 서로 다른 유형의 구문에
대한 개요와, 스타일 시트의 사용례, 그리고 스타일 상속에 대해 살펴본다.
2.1 커뮤니케이터에서의 스타일 시트
HTML 문서에 대한 스타일 시트가 소개되기 전에는 웹 페이지 제작자가 웹
페이지의 프리젠테이션을 제어하는데 한계가 있었다. 예를 들어, 특정
텍스트를 항상 제목으로 디스플레이할 수는 있지만, 페이지의 여백을설정한다거나 텍스트의 줄 간격이나 테두리 장식 등은 지정할 수 없었다.
스타일 시트의 도입으로 웹 문서의 프리젠테이션을 좀더 세밀하게 제어할
수 있게 되었다. 스타일 시트를 사용하면, 텍스트 색상이나 여백,
페이지 요소들의 정렬, 폰트 스타일, 폰트 크기, 폰트 굵기 등과 같은
웹 페이지의 스타일 관련 속성들을 지정할 수 있다.
넷스케이프 커뮤니케이터는 두 가지 유형의 스타일 시트 구문을 지원한다.
커뮤니케이터는 캐스캐이딩 스타일 시트(CSS, cascading style sheet)
구문으로 작성된 스타일 시트도 지원하고, 도큐먼트 개체 모델(document
object model)을 사용하는 자바스크립트로 작성된 스타일 시트도 지원한다.
도큐먼트 개체 모델에서 도큐먼트는 프로퍼티(properties)가 있는
개체이다. 각 프로퍼티는 자신이 개체가 되어 또다른 프로퍼티를 가질
수 있다.
스타일 시트를 정의할 때는 "text/CSS"나 "text/JavaScirtp" 중 한가지
구문을 선언해야 한다. 앞으로 이 매뉴얼에서는 "text/CSS" 유형의
스타일 시트에 대한 구문은 CSS 구문이라는 용어를, "text/JavaScript"
유형의 스타일 시트에 대한 구문은 JavaScript 구문이라는 용어를
사용하기로 하겠다.
2.2 캐스캐이딩 스타일 시트 사용하기
넷스케이프 커뮤니케이터는 캐스캐이팅 스타일 시트를 완벽하게 지원한다.
캐스캐이딩 스타일 시트를 사용하는 웹 페이지는 일부를 제외하고
넷스케이프 커뮤니케이터에서 적절하게 디스플레이해 준다.
이 문서에는 넷스케이프 네비게이터 4.0에서 구현되는 기능에 대해
설명하지만, World Wide Web Consortium에서 작성한 스타일 시트에 대한
원래의 스펙(specifications)에 대해 살펴보고 싶다면 다음의 주소로
찾아가기 바란다:
http://www.w3.org/pub/WWW/TR/REC-CSS1
스타일 시트는 하나 이상의 스타일 정의로 구성되어 있다. CSS 구문에서는
해당 스타일에 대한 선택 범주 다음에 프로퍼티 이름과 스타일 값이 괄호로
묶여 있다.
선택 범주에는 어떤 요소가 스타일에 적용되는지, 혹은 어떤 요소를
스타일에 적용할 수 있는지를 나열한다. 선택 범주가 HTML 요소라면 해당
요소의 모든 인스턴스를 스타일에 적용하게 된다. 선택범주는 클래스나 ID,혹은 정황 설명이 될 수도 있다. 이들 종류의 선택 범주에대해서는
이후에 설명한다.
스타일 정의에 있는 각 프로퍼티 뒤에는 콜론(:)이 붙고, 그 뒤에 해당
프로퍼티의 값이 온다. 각 프로퍼티 이름/값으로 이루어진 쌍은
세미콜론(;)으로 다음 쌍과 구분한다.
예를 들어, 다음의 캐스캐이딩 스타일 시트는 두 가지 스타일을 정의한다.
한가지 스타일 정의는 모든 <P> 요소의 폰트 크기를 18로, 그리고 모든
<P> 요소의 왼쪽 여백을 20으로 지정하는 것이고, 또다른 스타일 정의는
모든 <H1> 요소의 색상을 blue로 지정하는 것이다.
<STYLE TYPE = "text/css">
<!--
P {font-size:18pt; margin-left:20pt;}
H1 {color:blue;}
-->
</STYLE>
브라우저가 <STYLE> 요소를 인식할 때 주석(<!-- ... ->)은 무시하므로,
주석 내에 스타일 시트에 관한 내용을 입력할 수도 있다.
주의: 캐스캐이딩 스타일 시트 프로퍼티에 대한 값을 지정할 때,
겹따옴표(")를 포함시키면 안된다.
캐스캐이딩 스타일 시트는 구문이 정확해야 한다. 이름/값 쌍 사이의
세미콜론은 절대 생략할 수 없다. 세미콜론이 하나 빠지면, 해당 스타일
정의는 무시된다. 마찬가지로, 스타일 정의 내의 어딘가에 불필요한 글자가
하나라도 있으면, 역시 해당 스타일 정의는 무시된다.
2.3 자바스크립트와 도큐먼트 개체 모델 사용하기
자바스크립트를 사용하면 도큐먼트 개체 모델을 사용하는 스타일 시트를
정의할 수 있다. 이 모델에서는 웹 페이지 같은 문서를 프로퍼티가 있는
개체로 생각할 수 있다. 각 프로퍼티 역시 개체가 되어 또다른 프로퍼티를
가질 수 있다. 예를 들어, 아래의 코드는 document의 tags 프로퍼티에 있는
개체의 H1 프로퍼티의 color 프로퍼티를 설정하는 것이다.
document.tags.H1.color = "red"
현재 문서의 document 개체에 항상 tags 프로퍼티가 적용되므로,
document.tags에서 document를 생략할 수도 있다.
아래의 예는 자바스크립트와 문서 개체 모델을 사용하여 두 가지 스타일
정의가 있는 스타일 시트를 정의한 것이다. 한가지 스타일 정의는 모든 <P> 요소(ta
gs)의 폰트 크기를 18로, 그리고 모든 <P> 요소의 왼쪽 여백을
20으로 지정하는 것이고, 또다른 스타일 정의는 모든 <H1> 요소의 색상을
blue로 지정하는 것이다.
<STYLE TYPE = "text/javascript">
tags.P.fontsize = "18pt";
tags.P.marginleft = "20pt";
tags.H1.color = "blue";
</STYLE>
자바스크립트 구문을 사용하는 스타일 시트에서는 주석(<!-- ... -->)내에
스타일 시트에 대한 설명을 입력하지 않는다.
with (tags.element) 구문을 사용하면 여러 가지 스타일 설정값이 있는
요소들에 대한 스타일 정의를 간단하게 할 수 있다. 아래의 예는 모든 <P>
요소가 푸른 색상(green)과, 굵은체(bold), 이탤릭체(italic), Helvetica폰트로 디스플레이되도록 지정하는 것이다.
with(tags.P) {
color="green";
font-weight="bold";
font-style="italic";
font-family="helvetica";
}
2.4 예제
스타일 시트를 사용하면 웹 페이지의 여러 가지 스타일 관련 속성을 지정할
수 있다. 폰트와 텍스트에 대해 설정할 수 있는 스타일 관련 속성으로는
텍스트 정렬, 텍스트 색상, (Garamond 같은) 폰트 군(群), (이탤릭체 같은)
폰트 스타일, (굵은체 같은) 폰트 굵기, 줄 간격, (밑줄 같은) 텍스트 장식,
텍스트의 수평 정렬 및 수직 정렬, (문단을 들여쓰거나 내어쓸 수 있는)
텍스트 들여쓰기 등이 있다. 요소들의 배경색과 이미지도 지정할 수 있고,
목록의 뷸렛이나 번호에 대해서도 사용할 색상과 스타일을 지정할 수 있다.
블록 요소에서는 여백 뿐만 아니라 테두리까지 지정할 수 있다. 테두리가
있는 요소에서는 요소의 컨텐트와 테두리 사이의 간격을 나타내는 안여백도
설정할 수 있다.
아래 코드는 CSS 구문과 자바스크립트 구문을사용한 간단한 스타일
시트이다. 이 스타일 시트는 모든 <P> 요소에 왼쪽 여백과 오른쪽 여백이
있고, 텍스트는 양쪽 여백 사이의 가운데에 위치해 있도록 지정하는 것이다.
모든 <H4> 요소는 푸른색(green)이고, 밑줄로 표시되며, 모든 <H5> 요소는
대문자로 표시되도록 지정한다. 네 점이 진한 붉은 색 테두리도 있는데,
그 테두리는 3차원 스타일로 겉처리되고, 텍스트와 테두리 간의 여백은
4포인트이다. 텍스트 색상은 붉은 색이며 배경색은 노란색이다.
모든 <BLOCKQUOTE> 요소는 파란색의 이탤릭체이고, 줄 간격은 폰트 크기에
비해 150%가 된다. 첫 번재 줄은 요소 폭의 10% 들여쓴다.
=========
CSS 구문
=========
<STYLE TYPE = "text/CSS">
P {
textAligh:Center; margin-left:20%; margin-right:20%;}
H4 {
text-decoration:underline; color:green;}
H5 {
text-transfor:uppercase; colr:red;
border-width:4pt; border-style:outset;
background-color:yellow; padding:4pt
border-color:red;}
BLOCKQUOTE {
color:blue; font-style:italic;
line-height:1.5; text-indent:10% }
</STYLE>
================
자바스크립트 구문
================
<STYLE TYPE = "text/javascript">
with (tags.B) { textAlign = "center"; marginLeft="20%", margin-right="20%";}
with (tags.H4) {
textDecoration = "underline"; color = "green";
textTransform = "uppercase"; }
with (tags.H5) {
color = "red";
borderWidths="4pt"; borderStyle = "outset";
backgroundColor = "yellow"; paddings("4pt");
borderColor = "red"; }
with (tags.BLOCKQUOTE) {
color = "blue"; fontStyle = "italic"; lineHeight = 1.5; textIndent = "20pt"; }
</STYLE>
==================
스타일 시트 사용 예
==================
<H4>Underlined Heading 4</H4>
<BLOCKQUOTE>
This is a blockquote. It is usual for blockquotes to be indented, but
the first line of this blockquote has an extra indent. Also the lineheight in this blockquote is bigger than you usually see in blockquotes.
<H5>uppercase heading 5 with a border </H5>
</BLOCKQUOTE>
<P>This paragraph has a text alighnmetn value of center. It also has
large margeins, so each line is not only centeredbut is also inset on
both sides from the element that contains it, which in this case is the
document.</P>
사용례 :(이 결과는 "http://developer.netscape.com/one/dynhtml/index.html"
에서 "chatpter2/Introductory Example"를 클릭하면 확인할 수 있다.
단, 넷스케이프 네비게이터 4.0 이상의 버전에서만 볼 수 있다)
2.5 스타일 상속
다른 요소를 포함하고 있는 HTML 요소는 포함하고 있는 요소의
부모(parent) 요소로 간주하고, 포함된 요소는 자식(child) 요소로
간주한다.
예를 들어, 아래의 HTML 요소에는 <BODY> 요소가 <H1> 요소의 부모 요소이고,
<H1> 요소는 <EM> 요소의 부모 요소이다.
<BODY>
<H1> The headline <EM> is </EM> important! </H1>
</BODY>
대부분의 경우, 자식 요소는 부모 요소의 스타일을 가져오거나 상속받는다.
예를 들어, 스타일이 아래와 같이 <H1> 요소에 할당되었다고 가정해 보자.
<STYLE TYPE = "text/css">
H1 {color:blue; }
</STYLE>
<BODY>
<H1>The headline <EM>is</EM> important!</H1>
이 경우, 자식 <EM> 요소는 그 부모, <H1> 요소의 스타일을 사용하므로,
is 라는 단어는 파란색으로 디스플레이된다. 그러나, 먼저 <EM> 요소가
붉은 색으로 디스플레이되도록 지정하는 스타일을 앞서 설정했다고 가정해
보자. 이 경우, 자식에서 설정된 프로퍼티가 부모에게서 상속한 프로퍼티를
덮게 되므로, is라는 단어는 붉은 색으로 표시될 것이다.
상속은 최상위 단계의 요소에서 시작하는데, HTML에서는 <HTML> 요소를
사용하고, 그 뒤에 <BODY> 요소가 온다.
문서 내의 모든 요소에 대해 기본 스타일 프로퍼티를 설정하기 위해,
<BODY> 요소에 대한 스타일을 지정할 수 있다. 예를 들어, 아래 코드는
기본 텍스트 색상을 푸른색으로 설정한 것이다.
========
CSS 구문
========
<STYLE TYPE = "text/css">
BODY {color:green;}
</STYLE>
=================
자바스크립트 구문
=================
<STYLE TYPE = "text/javascript">
tags.BODY.color = "green";
</STYLE>
일부 프로퍼티들은 부모 요소에서 상속되지 않지만, 대개의 경우,
프로퍼티가 상속되었을 경우와 똑같은 결과가 나타난다.
예를 들어, 상속되지 않는, 색상 프로퍼티의 배경색을 고려해 보자.
자식 요소가 자체 배경 색상을 지정하지 않을 경우,
부모 요소의 배경 색상이 자식 요소 전반에 걸쳐 나타날 것이다.
이것은 자식 요소가 부모 요소의 배경색과 똑같은 색상을 가지고 있을
때와 마찬가지 결과이다.
** 다음에는 스타일 시트를 만들고 스타일을 할당하는 방법에 대해
살펴볼 것입니다.