css- 선택자

선택자
- 구문 : 선택자{style 속성 : style 속성값; style 속성 : style 속성값;}
- css를 적용 시킬 대상을 선택한다

선택자 종류
- 태그명 : 태그명 {}
 -> 선택자에 기입된 태그명과 일치하는 모든 html 요소 선택
 
- 아이디 : #아이디값 {}
 -> id 속성의 값이 일치하는 html의 모든 요소를 선택
 -> 모든 html 요소는 id 속성을 가질 수 있다
 -> id 속성의 값은 유일값을 가져야 한다.

 

<h3>id 선택자 예제</h3>
<style>
	#myDiv {color : maroon;}
</style>
<div id = "myDiv"> 안녕하세요 </div>

 
- 클래스 : .클래스값 {}
 -> 모든 html 요소는 클래스 속성을 가질 수 있다.
 -> class 속성의 값은 여러 html 요소에서 중복으로 가질 수 있다
   (그룹핑을 한다)
 -> class 속성에는 여러개의 값이 적용이 된다
   (class = "my-class user-class")
 -> class 속성의 값과 일치하는 html의 모든 요소를 선택

 

<h3>class 선택자 예제</h3>
<style>
	.li01{color : olive;}
	.my-li{font-size: 25px;}
	.m-l{font-style: italic;}
</style>
<ul>
	<li class = "li01 my-li">공지사항입니다.</li>
	<li class = "li01 m-l">공지사항입니다.</li>
	<li class = "li01 m-l">공지사항입니다.</li>
	<li class = "li01 my-li">공지사항입니다.</li>
</ul>

 
-속성 : [속성명] 
 -> 모든 html 요소 중 []에 기입된 속성을 가진 모든 요소를 선택
([colspan])
-속성과 속성값 : [속성명 = "속성값"]
 -> 모든 html 요소 중 []에 기입된 속성을 가진 모든 요소를 선택 
  ([type="text"] [type="radio"])