css의 선택자의 사용

선택자에 대해서.. <selector>

css 효과가 적용되는 태그를 지정합니다.

selector                           declaration                        declaration    h1        {color:blue;font-size:12px;}                                           property        value              property                  value

1. id 선택자에 대해

  1) 우선 순위가 가장 높습니다.

  2) css 선택자에서는 #을 상요하여 id라는 것을 표시합니다.

  3) id속성은 전체의 문서에서 하나의 태그를 식별하기 위해서만 사용됩니다.

  4) 아래의 예제는 id값이 dung인 태그의 컨텐츠를 파란색으로 표시하도록 합니다.

 

 

<style type="text/css">

# memo{

     color:blue;

}

</style>

  <div id="dung">

     blue

</div>

2. class 선택자에 대해

  1)css선택자에서는 ','을 사용하여 class 입을 표시합니다.

  2)class 속성에서는 공백으로 구분되는 여러개의 class가 표시될 수 있습니다.

  3)class 속성은 일련의 태그를 grouping하여서 하나처럼 제어하기 위하여 사용합니다.

<style type="text/css">

.blue{

      color:blue;

}

</style>

<div class="blue">blue</div>

<p class="blue intro">HI DUNGX2</p>      <----하나의 class에 두개의 class 이름이 정의가 됩니다.\

3. type 선택자에 대해

  1)css 선택자에서는 태그의 이름을 사용합니다.

  2)특정한 태그명을 가지고 있는 엘리먼트 전체를 제어하기 위하여 사용합니다.

<style type="text/css">

h1{

  color:blue;

  font-size:37px;

}

</style>

<h1>HI DUNGX2 </h1>