~~Title:CSS 선택자에 대해서~~

{{section>language:jquery:jquery_문서_목록#jQuery_문서_목록&nofooter&noeditbtn}}

======CSS 선택자에 대해서======

====== 주석 ======

<code css>
/* 한줄 주석 */

/*
  여러줄 주석
*/
</code>

====== 기본문법 ======

  선택자 { 선언부 }

선언부에는, 속성명과 값을 써서 CSS를 설정한다.

  선택자 { 속성명: 속성의값; 속성명: 속성의값; }

  * 속성명 : Property
  * 속성의 값 : Value

====== 선택자 ======

<code html>
<div>hello</div>
<p>hello2</p>
</code>

<code css>
* { color: blue; }
</code>

선택자를 '' * ''로 해두면 모든 요소를 선택하는 것이 된다.

===== 태그 요소 선택자 =====

<code html>
<div>hello</div>
<h2>hello2</h2>
<p>hello3</p>
</code>

<code css>h2 { color: red; }</code>

선택자 '' h2 ''를 사용한 부분만 선택된다.

===== 아아디 선택자 =====

  * ''#'' ← 아이디 선택자 in CSS 

<code html>
<div>hello</div>
<h2>hello2</h2>
<p id="hello">hello3</p>
</code>

<code css>#hello { color: red; }</code>

html 태그에 '' id ''를 사용해서 값을 설정하고 css 에서는 아이디 선택자 '' # ''를 사용해서 요소를 선택한다.
  * ?? : '' id ''는 여러개 쓰게 되면 어떤게 선택되는걸까?

===== 클래스 선택자 =====

  * ''.'' ← 클래스 선택자 in CSS  

<code html>
<div class="first">1번 그룹</div>
<div class="first">2번 그룹</div>
<div class="second">3번 그룹</div>
<div class="second">4번 그룹</div>
</code>

html에서 ''class''를 사용해서 속성 값을 부여한다. CSS 에서는 ''.'' 기호를 붙여 해당 클래스를 사용하는 요소를 선택한다.

<code css>
.first { color:red; }
.second { background-color: green; }
</code>

===== 다중선택자 =====

  * 선택자를 '' , ''를 사용해서 여러개를 선택자에 같은 스타일을 지정할 수 있다.

<code css>
h1,
#hello,
.first {
  color: red; 
}
</code>

===== 결합선택자 =====

html 문서에서 계층 관계에 따른 부모,자식 요소를 선택하기 위한 선택자

<code html>
<div>
  <p>1번 자식 요소</p>
</div>
<div class="parent">
  <p>2번 자식 요소</p>
</div>
</code>

<code css>div p { color:blue; }</code>

  * ''<div>'' 태그 하위에 있는 모든 ''<p>'' 태그를 선택한다.

<code css>.parent > p { color: green; }</code>

  * ''.parent > p'' 는 ''parent'' 클래스를 가진 요소에서 모든 ''<p>'' 태그만을 선택한다.

두개의 차이가 미묘..