[CSS] 기본 선택자 사용하기

전체 선택자( * )

HTML에서 사용할 수 있는 모든 요소를 한번에 선택자로 지정하는 방법

*{ /*css 코드 */ }

<style>
	*{
    	color:red;
     }
</style>
(중략)
<h1> 전체 선택자 </h1>
<p> 전체 선택자는 모든 요소를 한번에 선택할 수 있다.</p>

위 경우 h1,p 태그를 비롯해 html,head,title,style,body 등 모든 요소가 선택되었음을 주의!

---

태그 선택자

HTML 태그 명으로 선택자를 지정하는 방법

<style>
	p{
    	color:blue;
     }
</style>
(중략)
<h1> 태그 선택자 </h1>
<p> 태그 선택자는 태그명과 일치하는 태그를 모두 선택</p>
<p> 따라서 모든 p 태그의 텍스트 색상은 파란색이 됩니다</p>

---

아이디 선택자

아이디 선택자는 HTML 태그에서 사용할 수 있는 id 속성값을 이용해 선택자 지정

#id속성값{/* CSS 코드 */}

<style>
	#title{
    	color:green;
    }
</style>

(중략)

<h1 id="title"> 아이디 선택자 </h1>
<p> 아이디 선택자는 id 속성값을 이용해 선택자를 지정하는 방법 .</p>

id 값은 한 HTML 문서 안에서 고유한 값이여야 함
-> 다른 문서 안에서는 같은 id 가능

---

클래스 선택자( . )

HTML 태그에서 사용할 수 있는 class 속성값을 이용해 선택자를 지정하는 방법
-> 속성 값 앞에 . 기호를 붙임

.class속성값{/* CSS 코드 */}

실무에서 가장 많이 사용하는 선택자 지정 방법
-> id 속성과 다르게 속성값을 중복해서 사용 가능

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

<h1 class = "red"> 클래스 선택자</h1>
<p class = "blue"> class 속성값으로 선택자를 지정</p>
<p class = "blue"> 중복 사용 가능 </p>

---

기본 속성 선택자

HTML 태그에서 사용할 수 있는 속성과 값을 사용해 선택자를 지정하는 방법

[속성]{ css 코드 }
[속성=값] { css 코드 }

<style>
	a[href]{
    	color:red;
        display:block;
    }
</style>

<!-- 위 경우 a 태그에 href 속성이 있는 요소에 적용 , 밑 둘다 적용-->

<a href = "#"> 기본 a 태그</a>
<a href = "#" target = "_blank"> 새 창으로 열리는 a 태그</a>

<style>
	a[target = "_blank"]{
    	color : red;
        display : block;
    }
</style>

<a href="#dd"> 기본 a 태그</a>
<a href="#" target = "_blank"> 새 창으로 열리는 a 태그</a>

[class = "red"]{}
[id = "title"]{}

id 속성, class 속성으로 선택자를 지정하는 방법을 위처럼 표현 가능

class 속성값이 red 인 요소 선택, id 속성값이 title인 요소 선택

속성 선택자는 다른 선택자와 함께 사용 가능

a[href]{} 

여기서 a는 태그 선택자, href는 속성 선택자

#title[href]{}
.title[href]{}
[href]{} 

id 또는 클래스 속성값이 title이면서 href 속성이 있는 요소 선택

---

문자열 선택자

태그가 가진 속성값이 특정한 문자열과 일치하는 요소를 선택자로 지정

잘 사용되지는 않음