CSS - selector - type, class, id Selector 및 참조하는 방법

Type Selector

html의 tag를 지칭하는 선택자

p {
	color: red;
}

h1 {
	color: blue;
}

 

Class Selector

tag 괄호 안에 class 라는 속성을 선언하고 속성의 값에 임의의 클래스 이름을 넣어준 선택자 . 이렇게 선언한 클래스를 CSS에서는 '.'을 사용하여 참조한다.

// html에서의 class 선언
<p class="story"> bla bla </P>



// css에서 class를 참조하는 법
.story {

}

아래와 같이 여러 개의 클래스를 부여할 수도 있다.

<div class="test1 test2 test3></div>


//css에서 위의 클래스를 참조하는 정확한 방법
.test1.tset2.test3{

}

 

ID Selector

단 한개만 존재해야한다.

// html에서의 id 선언
<p id="naomi"> bla bla </P>



// css에서 id 참조하는 법
#naomi{

}

 

참조하는 방법들

myTitle 클래스 안에 있는 dl의 안에 있는 dt를 참조함.

.myTitle dl dt {
	color: white;
}

 

myStyle1 클래스와 myStyle2 클래스 모두를 갖고 있는 html 요소를 참조함.

.myStyle1.myStyle2 {
	color: white;
}