[CSS] #, . / id와 class

css

[CSS] #, . / id와 class

css를 작성하다보면 #과 .을 붙여 코드를 작성을 하게 된다.

예전에 코드를 처음 배울때 #과 .의 차이가 뭔지 몰랐고

개발을 하다 보니 #과 .의 차이를 알게 되었다.

 

<h1 id="title" class="title">
	id와 class의 차이점
</h1>
<p id="contents" class="contents">
	id와 class의 차이점이라 말할만 한것은....
</p>
<p id="contents" class="contents">
	id와 class의 차이점이라 말할만 한것은....
</p>

# ID

#은 html에서 설정한 id에 css코드를 적용할 때 사용한다.

#은 css말고도 javascript에서도 사용한다.

#[이름]은 id[이름]와 같다.

 

#title{
	font-size : 30px;
}
#contents{
	color : red;
}

 

. Class

.은 html에서 설정한 class값에 css코드를 적용할 때 사용한다.

class는 id와 달리 여러 요소에게 적용할 수 있다.

 

.title{
	font-size : 20px;
}
.contents{
	color : pink;
}

 

ID와 class의 차이

바로 위에서 언급했듯이 ID는 하나에만 적용이 되고 (id는 하나만 가질 수 있다.)

class는 해당class를 가진 모든 요소에 적용이 된다. (class는 여러 개를 적용시킬 수 있다.)

 

id와 class가 모두 있을 때 id가 먼저 적용된다.

 

적용 순서 id > class > 요소(p, h1, a등등)

 

결과물

 

See the Pen css #&. by 윤재현 (@jh91) on CodePen.