Selector | Using Style in HTML Document

Home > Document > CSS > Introduction > CSS selector

Style 사용법 4 가지

selector
Selector 와 스타일 사용법

Selector 란 CSS Property 1개 또는 그 이상의 Property들을 Property block ({})속에 넣어 놓은 것을 말합니다. Using Style 은 스타일을 HTML 문서에서 어떻게 사용하느냐, 예를 들자면 Inline 으로 사용할 건지 아니면 링크를 할 건지에 대한 문제가 되겠습니다. 이번 페이지에서는 Selector 의 종류와 우선 순위(Cascading order), HTML 문서에서의 Style 사용법 4 가지와 Style 적용의 우선 순위(Cascading order)에 대해서 알아 보도록 하겠습니다.
Style 사용법

1. Inline Style

Inline Style 은 HTML Tag 속에 style 속성을 사용하여 직접 지정합니다. HTML Menu 부분의 Division Marker 부분도 다시 한 번 참조하시져.

예제 
<HTML>
    <HEAD>
        <TITLE>Inline style sheet</TITLE>
    </HEAD>
    <BODY>
        <P style="color:red;">Red text</P>
        <P style="color:green;">Green text</P>
        <P style="color:blue;">Blue text</P>
    </BODY>
</HTML>
출력결과

Red text

Green text

Blue text
2. Embedded style sheet 와 Style block

Embedded style sheet 란 Selector를 사용하여 Style block 속에 Property를 지정하므로 해서 그 문서 전체에 CSS Property를 일괄적으로 지정하는 방법인데, 여기서 부터가 진짜 CSS를 사용하는 맛을 느낄 수 있는 부분입니다. 이제 부터 아주 손쉽게 문서를 수정할 수 있게 되었군요. 그러자면 우선 Style block이 먼지 부터 알아 봐야 되겠군요. Style block 은 아래의 갈색 글씨 부분입니다.

예제 
<HTML>
    <HEAD>
        <TITLE>Embedded style sheet 와 Style block</TITLE>

        <STYLE type="text/css">
        <!-- 
        h1 {color:red; font-style:italic;}
        .maintext {margin-left:5%}        
        -->
        </STYLE>

    </HEAD>
    <BODY>
        <H1>Linked style sheet</H1>
        <P class="maintext">이젠 모든게 내 맘대로!</P>    
    </BODY>
</HTML>

위와 같이 Style block 은 주로 <HEAD> ~ </HEAD> 사이에 위치하게 되며, 그 속에는 이 페이지 뒷 부분에 나오는 Selector 들이 들어 갑니다. Style block 사이의 HTML 주석문(<!-- -->)은 Style 을 지원하지 않는 브라우저에서 Code가 그 대로 출력되는 것을 방지하기 위해서 넣어 주는데, 요즘도 그런 브라우저가 있다는 소리는 못 들어 본 듯... 이 방식에 대해서는 뒷 부분에서 자세히 설명 됩니다.
3. Linked style sheet

이 방식은 <HEAD> ~ </HEAD> 사이에 Link Element 를 사용하여 CSS file(확장자가 .css 인 파일)을 연결 시켜서 사용하는 방식입니다. 우리가 일반적으로 웹 페이지를 하나 Design 하게 되면 가족 홈페이지라고 해도 2 ~ 30개 대형 사이트 같은면 수백에서 수천개의 파일도 생길 수 있습니다. 물론 HTML 이나 ASP 문서처럼 직접 눈에 보이는 문서 만이 아니라, 눈에 보이지 않게 지원하는 파일까지 합쳐서 말이죠. 그럴 경우, 바로 이 방식을 사용합니다. 이런 방식의 파일에는 주로 문서 전체의 윤곽에 대한 Property 들이 들어가게 됩니다. 이 방식을 사용하면 같은 CSS file 을 사용하는 모든 문서는 CSS file 만을 수정 하므로서 동시에 수정이 가능합니다. 하나의 웹 사이트는 물론이고, Intranet 상의 문서들, 뿐만 아니라 인터넷에 연결된 모든 컴퓨터들은 CSS file 의 uri 만 안다면 모두 Link 시켜서 사용할 수 있습니다. 아래는 CSS file 의 형식과 HTML file 내의 Link Element 의 위치를 예로 들었습니다.

mysite.css 
h1 {color:red; font-style:italic;}
.maintext {margin-left:5%}
index.html 
<HTML>
    <HEAD>
        <TITLE>Linked style sheet</TITLE>
   <LINK rel="stylesheet" type="text/css" href="mysite.css">
    </HEAD>
    <BODY>
        <H1>Linked style sheet</H1>
        <P class="maintext">내 맘대로 되는게 또 있네!</P>    
    </BODY>
</HTML>

위의 Embedded style sheet 과 CSS file 을 비교해 보면 Embedded style sheet 은 Style block 속에 내용이 들어가지만 CSS file 의 경우는 Style block 속에 넣지 않고 Selector 들만 열씨미 나열하면 되겠습니다.
4. Imported style sheet

이 방식은 결과적으로 3번의 Linked style sheet와 같고 위치는 2번의 Embedded 방식과 마찬 가지로 Style block 속에 들어 갑니다.

mysite.css 
h1 {color:red; font-style:italic;}
.maintext {margin-left:5%}
예제 
<HTML>
    <HEAD>
        <TITLE>Imported style sheet</TITLE>
        <STYLE type="text/css">
        <!-- 
        @import url("mysite.css");       
        -->
        </STYLE>
    </HEAD>
    <BODY>
        <H1>Linked style sheet</H1>
        <P>이젠 모든게 내 맘대로!</P>    
    </BODY>
</HTML>

위와 같이 Style block 속에 @import url("경로/filename")과 같이 지정하면 되겠습니다.
5. 사용 방식에 따른 Style 적용의 우선 순위(Cascading order)

하나의 사이트를 Design을 하다 보면 엄청 많은 수의 Style property를 사용하게 됩니다. 몇 갠지 일일이 세어 가면서 작업 하는게 아니기 때문에 몇 개를 사용했는지 당연히 모를 수 밖에요... 그리고 알 필요도 없죠.

하지만 Style 적용의 우선 순의는 좀 중요합니다. 왜냐하면 예를 들어 Inline 방식과 Embedded 방식을 동시에 사용하고 같은 Tag에 같은 Style property를 적용하고 값(value)를 다르게 주었을 경우를 말합니다. 아래의 예를 봅시다.

예제 
<HTML>
    <HEAD>
        <TITLE>Cascading order</TITLE>
        <STYLE type="text/css">
        <!-- 
        H1 {color:red;}      
        -->
        </STYLE>
    </HEAD>
    <BODY>
        <H1 style="color:green;">Linked style sheet</H1>
        <P>이젠 모든게 내 맘대로!</P>    
    </BODY>
</HTML>

이렇게 위와 같이 지정하였다면 'Linked style sheet' 라는 글자는 green 이 적용됩니다. 즉, 전체 4 가지 방식의 우선 순위는 아래와 같습니다. Inline 방식이 최우선이고 Imported 방식이 최 하위가 됩니다. 이 Cascading order에 대해서는 여기를 참조 하시져...

  1. Inline style sheet
  2. Embedded style sheet
  3. Linked style sheet
  4. Imported style sheet
Selector


1. Universal Selector

Universal selector 는 HTML 의 모든 Element 에 같은 CSS Property 를 사용하도록 지정하는 Selector 입니다. 사용법은 Asterisk( * ) 뒤에 Style block 이 오면 됩니다. 예를 들어서 문서의 모든 글자 크기를 12px로 사용하려면

입력 
<STYLE type="text/css">
<!-- 
* {font-size : 12px} 
-->
</STYLE>

이런 식으로 지정하게 되면 문서의 모든 글자가 12px 크기가 됩니다
2. Type Selector

Type Selector 는 HTML Element 에 직접 CSS Property 를 지정하는 방법입니다. 이렇게 지정된 HTML Element 는 별도의 CSS Property 를 지정하지 않아도 지정된 Property Value가 적용됩니다. 예를 들어 문서에 사용된 모든<H1> Element의 글자색을 green 으로 지정하고 싶으면

입력 
<HTML>
    <HEAD>
        <TITLE>Type Selector</TITLE>
    <STYLE type="text/css">
    <!-- 
    H1 {color:green; text-align:center;} 
    -->
    </STYLE>
    </HEAD>
    <BODY>
    <H1>Green and bold text</H1>
    </BODY>
</HTML>
출력결과

Green and bold text

위와 같이 지정하면 <H1> Tag에 Inline style sheet를 지정하지 않았더라도 문서에서 사용된 모든 <H1> 의 글자색은 Green이 됩니다.
3. Descendant selector(Contextual Selector)

이 Selector 는 Type selector와 같은 Level의 Selector 로써, 일명 contextual selector 라고도 부릅니다. HTML Element 2개 이상을 원하는 순서대로 나열하여 뒤에 표기한 selector에 해당되는 element를 앞에 표기한 selector에 해당되는 element 속에서 사용했을 때만 유효합니다. 또한 child element(한 단계 직속 하위 element) 뿐만 아니라 decendant element(2 단계 이상의 하위 element) 에도 똑 같이 작용 합니다. 따라서 아래 code 중에 2 번째 h2 element 속의 i element와 같이, 중간에 div element가 끼어들어 h2의 직속 하위 element가 아닌 경우도 마찬 가지로 적용 됩니다.

입력 
<html>
    <head>
        <title>Contextual Selector</title>
    <style type="text/css">
    <!-- 
    h2 i {color:green; text-align:center;}
    -->
    </style>
    </head>
    <body>
    <h2><I>Green and bold text</I></h2>
    <!-- 아래와 같이 i 가 h2의 직속 하위(child)가 아니어도 된다. -->
    <h2><div><i>Green and bold text</i></div></h2>
    <h1><i>Green and bold text</i></h1>
    </body>
</html>
출력결과

Green and bold text

Green and bold text

Green and bold text

위와 같이 h2 Element 속에 들어간 i Element 들에 만 CSS 가 적용됩니다.
4. Class Selector

Class Selector 는 지정하고 싶은 HTML Element 에만 선택적으로 CSS Property를 지정하는 방법 입니다. 그러므로 Type selector 처럼 지정한 모든 Element 에 일괄 지정하는게 아닌 'Class' 라는 HTML Attribute 를 사용하여 원하는 Tag에 선택적으로 지정합니다. 가장 많이 사용되는 Selector입니다. 사용 방법은 Period ( . : 點)를 찍고 공백없이 영문자 대소문자 A ~ Z, 숫자 0-9, Hyphen( - ), Underscore( _ ) 를 사용해서 이름을 지어 줍니다. 이 때 이름은 기호나 숫자로 시작해서는 않됩니다.

참고사항
W3C의 메뉴얼에서는 이름 짓는 것에 대해 위와 같이 설명하지만 Internet Explorer 6.0 에서는 숫자나 기호로 시작해도 작동 됩니다.


입력 
<HTML>
    <HEAD>
        <TITLE>Class selector</TITLE>
    <STYLE type="text/css">
    <!-- 
    .title {font-size:18px; color:red; text-align:center; font-weight:bold;} 
    -->
    </STYLE>
    </HEAD>
    <BODY>
    <P class="title">Class selector</P>
    </BODY>
</HTML>
출력결과

Class selector

위와 같이 P Element에 class="title" 처럼 class 속성을 사용하여 title 이라는 class를 지정 하였습니다. 결과 title class에 지정된 CSS property인 font-size:18px; color:red; text-align:center; font-weight:bold; 가 P Element에 일괄 적용 되었습니다.
5. 특정 Element 에만 적용되는 Class Selector

특정 Element 에만 적용되는 Class란 즉, 특정 Element로 지정한 Element 이외의 다른 Element에는 Class를 지정하더라도 Property value가 적용이 안된다는 뜻입니다. 이러한 Class를 사용하는 이유는 Type selector로 어떤 Element에 CSS 를 지정하고 Type selector로 지정한 Element 중 몇 개만 다른 Property value 를 지정하고 싶을 때 주로 사용합니다. 사용 방법은 Element.Class selector 와 같이 HTML Element와 Class selector 사이를 Period (점)으로 구분해 줍니다.

입력 
<HTML>
    <HEAD>
        <TITLE>특정 Element 에만 적용되는 Class</TITLE>
    <STYLE type="text/css">
    <!-- 
    p {color:red; font-weight:bold;}
    span {color:red; font-weight:bold;}
    p.normal {color:black; font-weight:normal;}
    -->
    </STYLE>
    </HEAD>
    <BODY>
        <P>Red & bold text 1</P>
        <P>Red & bold text 2</P>
        <P class="normal">Normal text</P>
        <SPAN class="normal">Normal text</SPAN>
    </BODY>
</HTML>
출력결과

Red & bold text 1

Red & bold text 2

Normal text

Normal text

위의 결과와 같이 Span Element에 class="normal" 과 같이 지정해도 normal 이라는 class가 적용되지 않습니다. 즉 위와 같은 지정 'p.normal 은 P Element 에만 normal 이라는 class를 적용하라' 는 뜻 입니다.
6. ID Selector

ID Selector 는 DHTML 이나 JavaScript 등 동적인 웹 페이지를 만들거나, 데이터를 다루는데 있어서 매우 중요한 역할을 하는 Selector 입니다. 사용 방법은 앞에 Hash(#)를 붙히고, 이름 주는 방법은 Class selector 와 동일합니다.

입력 
<HTML>
    <HEAD>
        <TITLE>특정 Element 에만 적용되는 Class</TITLE>
    <STYLE type="text/css">
    <!-- 
    #myId1 {text-align:center; color:green;}
    #myId2 {text-align:right; color:royalblue;}
    -->
    </STYLE>
    </HEAD>
    <BODY>
        <P id="myId1">ID Selector 1</P>
        <P id="myId2">ID Selector 2</P>
    </BODY>
</HTML>
출력결과

ID Selector 1

ID Selector 2
7. Grouping

Grouping 이란 같은 Property 와 같은 Value를 사용하는 Selector 가 여러개일 경우 Selector 마다 일일이 지정하지 않고 Group 을 만드는 방법입니다. 사용법은 Selector 들을 comma ( , )로 구분하여 나열 합니다. 예를 들어

입력
<STYLE type="text/css">
<!--
H1 {color:green;}
H2 {color:green;}
H3 {color:green;}
-->
</STYLE> 는

<STYLE type="text/css">
<!--
H1, H2, H3 {color:green;}
-->
</STYLE> 과 동일 합니다. 또


<STYLE type="text/css">
<!--
H1 {color:red;}
H1 {background-color:silver;}
H1 {font-family:Tahoma;}
H1 {font-size:24px;}
H1 {border:1px solid gray;}
H1 {text-decoration:underline}
 -->
</STYLE> 는

<STYLE type="text/css">
<!--
H1 {
color:red;
background-color:silver;
font-family:Tahoma;
font-size:24px;
border:1px solid gray;
text-decoration:underline;
}
 -->
</STYLE> 과 약효는 또~옥 같습니다.




8. Selector 의 Cascading order

Selector 에도 우선 적용 순위가 있습니다. 또 당연히 그래야 되구요. 이 것은 CSS 에서 매우 중요한 부분입니다. CSS Parser 가 문서의 Selector 들을 분석하여 계산하는 우선 순위는 다음과 같습니다.

  1. ID Selector 의 갯수를 세어서 개당 100 으로 계산합니다. (=a)
  2. Class Selector 의 갯수를 세어서 개당 10 으로 계산합니다. (=b)
  3. Type Selector 의 갯수를 세어서 개당 1 로 계산합니다. (=c) 예를 들어...
입력
LI.red.level {...} /* a=0 b=2 c=1 -> specificity(명세서) = 21 */

즉, ID Selector는 없고 .red 과 .level 이라는 Class Selector 가 2개 이므로 20을 부여하고, LI 라는 Type Selector 가 1개 이므로 1을 부여하여 20 + 1 = 21 이라는 명세서가 나오게 되는거져... 참고로 Universal Selector 는 값이 '0' 입니다.

또 한가지 고려해 봐야 될 것은 Tag 속에 사용한 Inline style sheet 에 대한 것인데, Inline style sheet 의 경우 일단은 CSS Parser 가 ID Selector 로 분석합니다. 하지만 같은 Tag 에서 ID Selector와 Inline style sheet 가 같이 사용되었을 경우에는 무조건 Inline style sheet 로 지정한 값이 우선입니다. 예를 들어...

입력 
<HTML>
    <HEAD>
        <TITLE>Selector 의 Cascading order</TITLE>
    <STYLE type="text/css">
    <!-- 
    #green {color:green;}
    -->
    </STYLE>
    </HEAD>
    <BODY>
        <P id="green" style="color:red">무슨 색이 될까?</P>
    </BODY>
</HTML>
출력결과

무슨 색이 될까?

출력 결과와 같이 Inline style sheet 은 모든 Selector 에 우선하게 됩니다.

예제 
<HTML>
    <HEAD>
        <TITLE>id selector vs class selector</TITLE>
    <STYLE type="text/css">
    <!-- 
    #green {color:green;}
    .myclass {color:red; font-weight:bold;}
    -->
    </STYLE>
    </HEAD>
    <BODY>
        <P id="green" class="myclass">
            ID 와 Class 에 같은 Property를 쓰고 값이 다를 경우는?
        </P>
    </BODY>
</HTML>
출력결과

ID 와 Class 에 같은 Property를 쓰고 값이 다를 경우는?

위와 같이 #green 과 .myclass 에 동시에 사용된 color Property 는 #green 에 지정된 값이 적용되고, ID Selector인 '#green' 에 없는 Property 인 font-weight Property 는 적용이 되어 굵은 글씨체(font-weight:bold)가 됩니다.





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색