<CSS3> 4강 선택자 selector.

 

 

 

결합자 combinator

두개 이상의 셀럭터들의 관계를 타겟팅하기 쉽게 하기 위한 기호 이다.

 

[ > ] child selector - 자식요소 결합자 >  직계 자손 

[ + ] adjacent sibiling selector -  인접 형제 요소 결합자, 뒤에오는 형제 중 첫번째 

[ ~ ] general sibling selector - 형제 요소 결합자, 뒤에오는 형제 모두를 포함한다

_(띄어쓰기) descenant selector - 후손식별자, ex) div p {}

 

 

selector (선택자) 기호

- css selector은 특정한 HTML 태그를 선택하여 다중으로 CSS효과를 부여하는 역할을 한다.

- 전체를 선택하는 * 선태자와 class="클래스명" , -id="아이디명"  선택자가 있다.

 ex) <div class="ex">
 ex) <div id="ex">

- <style> 사용시 class는 기호[ . ] id기호는 [#]을 사용한다.

 ex) <style> .클래스이름{font-size:20pt; color : red} </style>
 ex) <style> #아이디이름{font-size:20pt; color : red} </style>

[ * ]

- asterisk 라고한다.

- 모든 요소를 선택하며 전체 스타일에 모든 요소를 적용할때 사용한다

 ex) *{margin: 0; padding: 0}

[ . ] = class  

- 다른태그에 동일한 class 값을 줄 수 있다.

- 한태그에 다중 클래스명 사용할 수 있다 (태그명 class="클래스명1 클래스명2 ..."

[ # ] = id 

- 다른태그에 동일한 id 값을 줄 수 없다.

- 점프메뉴(한페이안에서의 이동)를 사용할때 목적지 역할을 한다.

 

* 하나의 태그에 class와 id를 모두 네이밍할 수 있다

* 선택자 동일 사용시 우선순위는 태그명 < class < id .

   해당 태그를 더 자세히 불러주면 줄수록 우선순위는 높다 

 

class 와 id 사용의 구분

- 학교를 비유하면 class는 3학년 1반을 지칭하며 id는 3학년1반의 누구를 지칭한다.

- 자주 사용되는 스타일에 class를 적용한다.

- 고유의 값을 가질때, 가져야할 때 id값을 를 사용한다.