CSS 선택자

선택자(selector): CSS 언어가 HTML 특정 요소 선택하는 방법.

type, class, id 3개가지가 있다. 각각 type은 태그, class는 태그에 대한 별명, id는 태그명.

 

type 선택자 : h1 태그에 스타일을 적용했다. 

//<h1>안녕하세요</h1>

<style>
	h1{color: red;}
</style>

 

 

 

class 선택자: 클래스 이름으로 특정 위치에 스타일을 적용

//<h1 class="aing">안녕하세요</h1>

<style>
	.aing{color: red;}
</style>

 

 

id 선택자 : id를 이용하여 스타일을 적용

//<h1 id="aing">안녕하세요</h1>

<style>
	#aing{color: red;}
</style>

 

부모자식 관계1

<!--html문서-->
<header>
	<h1>header h1</h1>
    <p>header p</p>
</header>

//css 문서

header{color: green;}
h1{color: orange;}
p{color: skyblue;}

<header>와 <h1><p>:부모 자식 관계

<h1>과 <p>: 형제 관계

 

 

부모자식 관계2

<!--html문서-->
<header>
	<h1>header h1</h1>
    <p>header p</p>
</header>

<footer>
	<h1>header h1</h1>
    <p>header p</p>
</footer>

//css 문서
header{color: green;}
header h1{color: orange;}
headter p{color: skyblue;}

원하는 지역에만 css 속성을 적용하기 위해 부모를 구체적으로 표기해야한다.