Property, Value

요소(Property)와 값(Value) 사용하기

Style 적용순위(Cascade)
선택자 Cascade
!important 사용
값의 종류와 사용
Style과 택 속성의 관계

요소는 선택자에게 사용할 style의 종류를 지정하는 것이고 값은 요소의 값입니다.

H3 { font-size: 12pt; color: red; }

는 <H3> 택에 font-size:12pt, color:red 를 지정하게 합니다. 여기서 font-size, color 가 요소이고 12pt, red가 값입니다. 요소와 값은 colon(:)으로 구분하고 각 요소:값은 semicolon(;)으로 구분합니다. 요소와 colon, 값, semicolon 사이에 공백은 넣어주어도 되고 안넣어주어도 됩니다. 두칸 이상의 공백도 한칸으로 지정됩니다. 그리고 대소문자도 구분하지 않습니다.

h3 { Font-Size:12pt; COLOR:reD; }

로 사용해도 위의 구문과 같은 동작을 합니다. 대소문자는 구분하지 않기 때문입니다. 대소문자 구분에서 예외가 있습니다. 바로 font-family, URL입니다.

font-family는 사용자의 시스템에 있는 특정 글꼴을 사용하는 것입니다. 그 글꼴들 중에는 한 단어도 있고 여러 단어로 이름 지어진 글꼴 이름이 있습니다. "Arial", "Time New Roman" 같은 글꼴을 예로들면 "Arial"은 대문자로 시작하고 "Time New Roman"에는 공백문자가 들어가 있습니다. 이 글꼴 이름은 고유한 것이기 때문에 대소문자를 지켜야하고 공백도 넣어주어야 합니다.

URL은 사이트의 주소나 화일이름일 수 있습니다. 이들은 기본적으로 대소문자를 구분합니다.

Style 적용순위(Cascade)

Style을 지정하는 방법은 4가지가 있습니다.

위의 4가지 방법중에서 하나를 사용할 수 있고 4가지 모두를 사용할 수도 있습니다. <LINK>, @import 는 여러 페이지에 style을 지정하는 용도로 사용하고 <STYLE> 택은 한 페이지 전체에, inline style은 각 택에 지정하는 용도로 사용합니다.

<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="my.css">
<STYLE TYPE="text/css">
<--
H3 { color: green; }
-->
</STYLE>
</HEAD>
<BODY>
<H3> 12pt 크기의 초록색입니다. </H3>
</BODY>
</HTML>

my.css 화일안에 style을 아래와 같이 지정했을 때,

H3 { font-size: 12pt; color: red; }

이 때의 <H3> 택이 가지고 있는 글자는 12pt 크기의 초록색이 됩니다. 즉, <LINK> 택으로 style을 지정하고 다음에 <STYLE> 택으로 같은 style을 지정해서 style이 변경되었기 때문입니다. 같은 선택자게 지정한 style은 같은 요소에는 모든 지정한 style이 지정됩니다. 다만 나중에 선언한 요소가 적용됩니다. 그리고 다른 요소는 그 선택자에게 추가 됩니다. <H3> 택에게 <LINK> 택으로 미리 font-size:12pt 를 지정하여서 글자 크기가 12pt로 나옵니다.

<HTML>
<HEAD>
<STYLE TYPE="text/css">
<--
H3 { color: green; }
-->
</STYLE>
<LINK rel="stylesheet" type="text/css" href="my.css">
</HEAD>
<BODY>
<H3> 12pt 크기의 빨간색입니다. </H3>
</BODY>
</HTML>

로 하면 나중에 선언된 style이 듣기 때문에 <H3> 가 가지고 있는 글자의 색은 빨간색이 됩니다. 보통 <LINK> 택은 여러 페이지에 style을 지정하기 때문에 큰 골격의 style을 지정합니다. 그리고 각 페이지에서 필요한 style을 지정하기 때문에 <LINK> 택을 먼저 지정하고 <STYLE> 택을 지정합니다. 그래서 위의 <LINK> 택을 먼저 지정하고 다음에 <STYLE> 택을 지정하는 첫번째 방법을 주로 사용합니다.

이런 나중에 선언된 style이 듣는것은 inline으로 택에게 직접 지정하는 경우도 마찬가지입니다.

<HTML>
<HEAD>
<STYLE TYPE="text/css">
<--
H3 { font-size: 12pt; color: green; }
-->
</STYLE>
</HEAD>
<BODY>
<H3 style="color:red"> 12pt 크기의 빨간색 글자입니다. </H3>
</BODY>
</HTML>

두번 이상 같은 선택자에 요소와 값을 지정하면 같은 요소는 그 요소의 값을 변경하고 다른 요소는 선택자에 추가됩니다. 간단히 예기하면 html 작성 순서대로 차곡차곡 style을 지정합니다. 그 맨 위에 style 속성으로 택에서 직접 지정한 inline style이 옵니다. 그래서 택안에서 지정한 style이 가장 높은 우선순위를 가집니다.

한 택에 class 속성과 ID 속성을 같이 지정하는 경우는 ID 속성이 높은 우선순위를 가집니다.

전체적인 지정 순위는 아래입니다.

먼저 선언된 선택자 < 나중에 선언된 선택자 < class 속성 < ID 속성 < style 속성

의 순서로 택에서 가까운 STYLE 지정이 듣습니다.

my.css 의 내용 : .order { color: yellow }

<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="my.css">
<STYLE TYPE="text/css">
.order { color: blue }
</STYLE>
</HEAD>
<BODY>
<STYLE TYPE="text/css">
.order { color: red }
</STYLE>
<H3 class=order> 빨간색 글자입니다. </H3>

</BODY>
</HTML>

위의 페이지의 H3 택의 글자는 빨간색이 됩니다. 색깔의 변화는 노랑색에서 파란색 마지막으로 빨강색이 됩니다.

my.css 의 내용 : .order { color: yellow }

<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="my.css">
<STYLE TYPE="text/css">
#gr { color: green }
.order { color: blue }
</STYLE>
</HEAD>
<BODY>
<STYLE TYPE="text/css">
.order { color: red }
</STYLE>
<H3 class=order id=gr> 초록색 글자입니다. </H3>

</BODY>
</HTML>

위의 같은 html에서 빨간색의 내용을 추가하였습니다. class, id 속성을 같이 지정하여 id 속성이 지정되므로 H3 택의 글자는 초록색이 됩니다. 즉, 같은 style을 지정시 id 속성이 class 속성보다 우선순위가 높습니다.

만약 위의 페이지의 H3 택에 style 속성을 같이 지정하였다면 그것이 지정됩니다. inline style은 가장 높은 우선순위이기 때문입니다.

my.css 의 내용 : .order { color: yellow }

<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="my.css">
<STYLE TYPE="text/css">
.order { color: blue }
</STYLE>
</HEAD>
<BODY>
<H3 class=order> ie4에서 빨간색 글자, nn4에서 파란색 글자입니다. </H3>
<STYLE TYPE="text/css">
.order { color: red }
</STYLE>

</BODY>
</HTML>

맨위의 소스에서 빨간색으로 <H3> 택 다음에 <STYLE> 택으로 지정하였습니다. ie4로 보면 빨간색으로 nn4는 파란색이 나옵니다. nn4에서는 지정한 택보다 아래에 있는 style은 듣지 않지만 ie4는 듣습니다. ie4로 어떤 페이지에 가봤을 때, 페이지의 구조가 서서히 변하는 것을 본적이 있나요? 페이지의 출력이 끝나면 원래의 구성을 보여줍니다. 이것과 연관이 있지 않나하는 생각이 드는군요. 즉, ie4는 모든 정보를 다 읽고 페이지의 구조를 보여주고 nn4는 읽은데 까지만 적용하는 것 같습니다.

W3C 문서는 <link>, @import < <style> < inline 의 구조로 적용된다고 합니다. 하지만 ie4, nn4에서는 이 순위가 일정하지 않고 페이지 작성의 순서에 따라서 다른 동작을 보입니다.

선택자 Cascade

많은 style을 지정할 때, 여러가지의 선택자를 사용하고 조합하여 사용합니다. 그리고 이들 선택자들은 각기 우선순위가 정해져 있어 우선순위에 맞게 각 택에 style을 지정합니다. 이것을 "Cascade" 라고 합니다. 그래서, "Cascading Style Sheet"에서 "Cascading"이 이것입니다.

우선순위는

LI            {}  /* a=0 b=0 c=1 -> 순위 =   1 */
UL LI         {}  /* a=0 b=0 c=2 -> 순위 =   2 */
UL OL+LI      {}  /* a=0 b=0 c=3 -> 순위 =   3 */
H1 + *[REL=up]{}  /* a=0 b=1 c=1 -> 순위 =  11 */
UL OL LI.red  {}  /* a=0 b=1 c=3 -> 순위 =  13 */ 
LI.red.level  {}  /* a=0 b=2 c=1 -> 순위 =  21 */
#x34y         {}  /* a=1 b=0 c=0 -> 순위 = 100 */

id가 가장 높고 다음은 class 그 다음이 자손입니다. /* a=1 b=0 c=0 -> specificity = 100 */ 값은 단순히 우선 순위값을 이해하기 위한 것입니다. id가 100 단위이고 class 가 10 단위이고 각 type 은 1입니다. 두개가 있으면 각 단위에서 곱하기 2를 하여 우선순위 여부를 판단할 수 있습니다. 위에서 우선순위가 가장 높은 선택자는 #x34y입니다.

!important 사용

Style 사용에서 작성자만 Style을 사용할 수 있는 것이 아니고 사용자도 자신의 style을 사용할 수 있습니다. ie4에서는 브라우저 설정 중에서 "보기" - "인터넷 옵션" - "일반" - "사용자 서식" - "사용자 스타일 시트" 에서 사용자도 자신의 style 지정이 가능하지만 nn4에서는 사용자 자신의 style을 지정할 수 없습니다.

작성자와 사용자 모두 style을 지정하였다면 작성자의 style이 우선권을 가집니다. 여기서 사용자는 웹 페이지의 작성자가 지정해 놓은 style을 사용하지 않고 자신의 style을 사용하기 위해서 !important 를 사용할 수 있습니다. 이것을 지정한 style 구문은 작성자의 style보다 우선하여 적용됩니다. 그리고 작성자와 사용자 모두 !important 를 지정하였다면 작성자의 !important 가 사용자의 style 보다 우선권을 가집니다.

CSS1에서는 이렇게 동작했습니다. 하지만, CSS2에서는 반대로 사용자 !important가 작성자의 !important보다 우선합니다.

지정 구문은 우선권을 둘려고 하는 요소:값 다음에 공백을 한칸 두고 "!important" 를 지정합니다. 느낌표(!)와 "important" 지정자를 붙여서 사용합니다.

	/* 사용자 style */
P { font-size: 18pt }

       /* 작성자 style */
P { font-size: 15pt !important }

로 하면 웹 페이지의 <P> 택이 가지고 있는 문자들의 크기는 15pt가 됩니다.

	/* 사용자 style */
P { font-size: 18pt !important }

       /* 작성자 style */
P { font-size: 15pt !important }

로 하면 사용자의 !important가 우선하여 18pt가 됩니다.

전체적인 style 우선순위는 아래입니다.

브라우저 < 사용자 < 작성자 < 작성자 !important < 사용자 !important

사용자 !important가 가장 높은 우선 순위를 가집니다. CSS1의 전체 순위는 아래입니다.

브라우저 < 작성자 < 사용자 < 사용자 !important < 작성자 !important

CSS2의 순위와 비교하면 작성자와 사용자의 위치가 서로 바뀌어졌습니다.

!important는 우선순위를 높이는 지정자입니다. 그래서 낮은 순위의 요소를 높은 순위의 요소를 대치하여 사용됩니다. nn4에서는 작동하지 않습니다. 작성자의 style 지정에도 !important가 듣습니다.

H3 { color: red; font-size: 10pt }
H3 { color: blue; font-size: 20pt }

로 지정하면 같은 선택자인 H3에 같은 요소를 지정하여 나중에 지정한 요소가 적용됩니다. 그래서 H3 택의 글자는 20pt의 파란색으로 나옵니다. 여기서 먼저 선언한 요소에게 !important를 지정하면 그 요소는 가장 위의 우선순위를 가집니다.

H3 { color: red !important; font-size: 10pt }
H3 { color: blue; font-size: 20pt }

H3 택의 color 요소에 !important를 지정했습니다. 그래서, color는 빨간색으로 지정됩니다. 위의 글자는 20pt의 빨간색으로 나옵니다.

<LINK> 택으로 외부 화일로 연결한 것과 <STYLE> 택으로 지정한 경우에도 마찬가지입니다.

외부화일의 style 을 
아래로 지정하고 해도 마찬가지입니다. 
H3 { color: red !important; font-size: 10pt }

<LINK REL=STYLESHEET TYPE="text/css" HREF="외부화일.css"> 
<STYLE>
H3 { color: blue; font-size: 20pt }
</STYLE>

H3 택의 글자가 빨간색 20pt로 나옵니다.

Style과 택 속성의 관계

style과 html 택의 속성중에서 서로 중복되는 기능은 style이 적용됩니다.

H1 { font-size: 10pt; }

는 크기를 가장 크게하는 <H1> 택의 글자크기를 10pt로 아주 조그마하게 만듭니다. 글자 크기를 지정하는 font-size가 <H1> 택의 고유기능에 우선하기 때문입니다.

<table width="100%"><tr>
<td align="right" style="text-align: center">
 중앙으로 정열함.
</td>
</tr>
</table>

table의 안의 내용물의 위치를 지정하는 td 택의 align 속성도 같은 기능을 하는 text-align을 같이 지정하면 style의 지정이 듣습니다. 즉, style은 html 고유 기능과 속성에 우선합니다. 반대로 style을 지정해도 style로 같은 기능을 하는 요소를 지정하지 않았다면 택의 고유기능과 속성은 작동합니다. 그러므로 style을 지정시 택의 선택에 주의해야 합니다.

어떤 택에 style을 지정하면 그 택은 지정받은 요소를 사용할 수 있으면 자신의 양식으로 만들고 없으면 무시합니다. 사용여부는 그 택이 inline 택이냐 block 택이냐로 주로 구분됩니다. inline 택은 <b>, <img> 같은 줄넘김을 하지않는 택을 말하고 block 택은 <p>, <div>, <H1> 같은 줄넘김을 하는 택들입니다.

 b { border: outset 2px red }

로 지정하면 nn4는 작동하는데 ie4는 전혀 border가 듣지 않습니다. block 택에 테두리를 입히는 이 요소가 CSS1에서는 block 택에서 작동하고 CSS2에서는 모든 택에서 작동합니다.

이 inline 택으로 작동하느냐 block 택으로 작동하느냐가 ie4, nn4에서 다른 택이 많기 때문에 border 같은 요소를 지정하기 위해서는 두 브라우저가 공통으로 지원하는 block 택에 지정해야 합니다.

div { border: outset 2px red }

로 div 택에 지정하면 듣습니다. <div> 택이 ie4, nn4에서 block 택으로 가장 확실하게 작동합니다. <H1> 같은 글자 크기가 필요하면 'font-size'를 <B> 같은 굵기가 필요하면 'font-weight'를 같이 지정하면 <H1>, <B> 택은 필요가 없습니다.

div { border: outset 2px red; font-size:15pt; font-weight: bold }

--
nn4, ie4의 두 브라우저가 CSS1, CSS2를 왔다갔다 합니다. W3C를 예기할 필요는 없겠지만 브라우저는 자기들 식대로 작동합니다. 많은 버그와 함께요.. 우리에게 중요한 것은 표준이 무었이냐가 아니고 내 페이지가 어떻게 나오느냐 일것입니다. :) 버젼5 대의 브라우저에서는 이런 문제가 정리가 될것으로 생각합니다. 정리가 안된다고 그렇게 실망하지 말기 바랍니다. 이것은 오히려 자신의 능력을 차별화할 수 있는 기회일 수도 있으니까요.

값의 종류와 사용

div { color: red }

div 택의 글자를 빨간색으로 지정합니다. "red"가 값입니다. 요소에 지정하는 값은 지정자(keyword), 수치값, %, 문자열, url(화일주소)등 각 요소의 종류에 따라서 여러가지가 있습니다.

지정자 : 는 CSS를 읽는 브라우저가 미리 지정해 놓은 값입니다. red, green 등의 색 이름같은 것입니다. 이것은 문자열이 아니고 css 구문입니다. 그래서 인용부호(", ')는 필요가 없습니다.

수치값 : 숫자와 단위를 같이 사용합니다. 2em, 10pt, 20px 등이 있습니다. 수치값에 단위를 지정하지 않으면 기본으로 'px'가 지정됩니다.

% : 는 상위의 크기에 따른 상대적인 값입니다. 수치와 % 단위로 사용합니다. width: 50%는 상위의 절반 크기를 지정합니다.

문자열 : 글꼴의 이름이나 content 요소에 사용할 수 있습니다.

각 글꼴의 이름은 지정자로 사용됩니다. 그래서 인용부호는 필요가 없지만 글꼴의 이름중에서 공백이 들어있는 글꼴은 인용부호로 감싸야 하고 대소문자를 지켜야 합니다.

P { font-family: Arial, "Time New Roman" }

으로 공백이 들어있는 "Time New Roman" 글꼴에게 인용부호를 줍니다.

url(화일주소) : 배경 이미지 같은 것을 외부 이미지 화일로 지정시 화일의 주소는 대소문자를 구분합니다. 화일의 경로를 감싸는 인용부호는 지정하지 않아도 됩니다.

div { background-image: url("../images/backImage.gif") }

style="요소:값" : <STYLE> 택으로 지정하지 않고 style 속성으로 지정할 때는 style="요소:값" 의 식으로 "요소:값" 을 인용부호로 감싸주어야 합니다. 그리고 font-family같은 인용부호가 필요한 경우는 style="..." 로 이중 따옴표로 지정하면 따옴표를 지정하고 style='...' 로 따옴표로 지정했으면 이중 따옴표로 글꼴의 이름을 지정해야 합니다.

<P STYLE="font-family: 'Time New Roman'">P 택입니다.</P>

T O P