티스토리 뷰

IT 이야기/프로그래밍

[CSS] 스타일시트 2편 - 스타일의 우선순위와 셀렉터 사용법

하늘과 나b 2010. 8. 24. 09:35

스타일시트 2편 - 스타일의 우선순위와 셀렉터 사용법



   스타일의 우선순위


앞의 스타일 시트(Style Sheet)란? 포스트에서 페이지 내에서 스타일을 적용하는 방법은 다음과 같이 3가지의 방법이 있다고 설명하였습니다.


1. 외부 스타일시트를 불러오는 방법
2. style 요소를 사용해서 HTML 문서 안에 삽입하여 설정하는 방법
3. style 속성을 사용해서 태그에 직접 스타일을 적용하는 방법 


위의 방법대로 할 수 있기 때문에 하나의 문서에 여러가지 스타일이 설정되어 중복으로 사용될 수 있는데 이러한 경우를 위해 스타일에는 기본적으로 우선순위가 설정되어 있습니다.


스타일의 우선 순위는 다음과 같이 설정되어 있습니다.

 
3. style 속성 사용 > 2, style 요소 사용 > 1. 외부 스타일시트


위의 표와 같이 style 속성을 이용해서 태그에 직접 설정한 스타일의 우선순위가 가장 높습니다.

이외에 우선순위를 지정할 수 있는 방법이 있는데 그것을 알아보도록 하겠습니다.



   스타일시트의 우선순위를 바꾸는 방법

 
우선순위를 바꿀 수 있는 다른 방법은 [!important]라는 키워드를 사용하는 것입니다. [!important]키워드는 아래와 같이 사용할 수 있습니다.


- 최우선의 스타일을 설정하는 방법

 
셀렉터 { 속성 : 값 !important }

예) h1 { color: rgb(0, 128, 0) !important }

!important는 우선으로 하고 싶은 스타일의 속성:값에 연속되게 지정합니다.


그러면 이제는 셀렉터의 종류에 대해서 알아보도록 하겠습니다.


   셀렉터의 종류

 셀렉터를 사용하는 방법은 여러가지가 있습니다. 간단하게 살펴보도록 하겠습니다.


1. 태그에 스타일을 설정하는 방법

태그에 스타일을 설정할 때는 해당 태그의 요소명을 셀렉터로 지정합니다.

여러 개의 태그에 대해서 같은 셀렉터를 지정할 경우에는 요소명을 각각 ,(콤마)로 구분하여 지정합니다.

 
     셀렉터 { 속성 : 값 }
     셀렉터, 셀렉터, ... { 속성 : 값 }

그러면 예제를 한번 보고 넘어가도록 하겠습니다.


     <style type="text/css">
         h1 { background-color: #cfc ;
         h1, h2 { rgb(0,128,0) }
     </style> 



2. 임의의 범위에 스타일 설정

 
     요소명.클래스명 { 속성 : 값 }   -    <요소명 class="클래스명"> ~ </요소명>
     요소명#ID명 { 속성 : 값 }        -    <요소명 id="ID명"> ~ </요소명>
     .클래스명 { 속성 : 값 }           -    <요소명 class="클래스명"> ~ </요소명>
     #ID명 { 속성 : 값 }                -    <요소명 id="ID명"> ~ </요소명>

예제를 보도록 하겠습니다.
 
    <style type="text/css">
        span.sample1 { color : blue }
        strong#sample2 { color : white }
        .sample3 { font-weight : bold }
        #sample4 { color : blue }
    </style>

    <body>
        <span class="sample1">sample1<strong id="sample2">sample2</strong></span>
        <strong class="sample3">sample3</strong>
        <span id="sample4">sample4</span>
    </body>



3. 태그의 상관관계로 스타일을 설정

 
    상위요소 하위요소 { 속성 : 값 }

예제 
     p strong { color : white }


 

저작자표시

'IT 이야기 > 프로그래밍' 카테고리의 다른 글

[VBA] 비주얼베이직 편집기에서 컨트롤 도구상자의 컨트롤이 없어졌어요  (0) 2011.01.19
[VBA] 폼(Form)의 개념  (0) 2011.01.19
[VBA] 시트 이름 받아서 해당 시트 활성화하기  (2) 2011.01.18
[VBA] Property(속성)과 Method(메서드)  (0) 2011.01.18
[C언어 이야기] C언어의 기본  (0) 2010.12.08
[CSS] 스타일시트 1편 - 스타일 시트(Style Sheet)란?  (0) 2010.08.23
HTML의 시작  (0) 2010.08.16
AJAX #1. AJAX 소개(AJAX Introduction)  (0) 2010.08.16
AJAX 예제(AJAX Example)  (0) 2010.08.16
HTML 그 두번째 이야기  (0) 2010.08.15
공유하기 링크
댓글