[CSS 기본 개념] CSS 선택자

1.1  선택자

ID선택자(#)	CLASS선택자(.)	TYPE선택자
id 속성은 전체 문서에서 하나의 태그를 식별하기 위해서만 사용됨 우선순위가 가장 높음 css 선택자에서는 #을 사용해서 id임을 표시	class 속성은 일련의 태그를 그룹핑해서 하나처럼 제어하기 위해서 사용 class 속성에는 공백으로 구분된 여러개의 class가 표시될 수 있음 css선택자에서는 '.'을 사용해서 class임을 표시	특정 태그명을 가진 엘리먼트 전체를 제어하기 위해서 사용 css선택자에서는 태그의 이름을 사용함 p, div, span, table, td, form...등과 같은 HTML 태그를 선택하는 것

* 클래스와 아이디의 차이점은 클래스는 여러 개를 사용할 수 있지만 아이디는 고유성을 가지므로 한 문서에 한번만 사용할 수 있다는 것이다.

 

1.2  선택자의 조합

1) 하위 선택자

-특정 엘리먼트의 하위에 나오는 엘리먼트를 선택하는데 사용

-부모가 먼저 나오고 자식이 나중에 나옴

-공백을 통해서 부모와 자식을 구분

#navigation li{ color:blue;}

 

2) 하나의 CSS 선언을 여러 개의 선택자에 적용하기

-하나의 css선언을 여러 엘리먼트 셀렉터에 적용하고 싶을 때 사용

-선택자와 선택자를 ',(콤마)'로 구분

h1, #link{        color:red;}

 

3) 자식선택자

- 특정 엘리먼트의 직접적인 하위 엘리먼트에 대해서만 선택할 때 사용(하위 선택자와 다름)

#navigation > li{         border:1px solid red; }