CSS 기초 (2) - 선택자

CSS에는 세 개의 선택자가 있다.

• Type
• Class
• Id

- Type은 특정 태그에 스타일을 적용하는 것이다. 

p { color: red; } /* 여기서 p 태그가 type이라고 보면 됨 */

 

- Class는 태그에 클래스를 부여하여 스타일을 적용하는 것이다.

<p class="css1"> Hi </p> /* 여기서 p태그의 클래스 이름을 css1로 지정 */
<h1 class="css1"> Bye </h2> /* 마찬가지 */
<style>
	.css1 { color: yellow; } /* 태그 대신 클래스 이름을 사용 */
</style>

Class를 사용할 땐 클래스 이름 앞에 . (콤마)를 반드시 붙여야 한다.

Class는 일반적으로 여러개의 태그에 같은 속성을 적용시키고 싶을 때 사용한다.

 

- Id는 태그에 Id를 부여하여 스타일을 적용하는 것이다. 

<p id="id1"> ID hi </p> /* p태그에 아이디 부여 */
<style>
	#id1 { color: pink; } /* 아이디 사용하여 속성 적용 */
</style>

Id를 사용할 땐 Id 앞에 #를 반드시 붙여야 한다.

id는 일반적으로 한 개의 태그만 유일하게 속성을 적용시킬 때 사용한다.

그렇지만 여러 개의 태그에 id를 부여해도 오류는 없다.

 

style > id > class > type 순으로 우선순위다.

여기서 style이란 html파일의 태그 내에 작성된 것이다.

<h2 style="color: white"> color </h2> /* 제일 우선 */