Lesson #2 CSS 선택자에 대해서 알아봅시다.

 

이 포스팅의 목차

1. 선택자 (selector)

2. 속성 및 값 (properties and values)

3. Lengths

4. Recap

 

---

 

 

CSS 선택자 Selectors

 

속성을 적용할때, 요소를 선택하는 구문을 '선택자'라고 합니다.

 

Type Selector 요소 선택자 : HTML 태그 이름으로 선택합니다.

span {color:#0000ff;}

 

Class selector 클래스 선택자 : HTML 태그에 선언한 class 이름으로 선택합니다.

class 이름은 여러번 재 사용이 가능하여, 일반적으로 사용되는 방법입니다. 

<div class="nameDiv">이름있는 DIV </div>
<span class="nameDiv">이름있는 span </span>

.nameDiv { font-size:200%; }

 

id selector 아이디 선택자 : HTML 태그에 선언한 id 이름으로 선택합니다.

id 이름은 단 한번만 사용할 수 있다는 점에서 class와 차이가 있습니다.

<span class="idName">id로 선택 span </div>

.idName{ font-size:200%; color:#ff0000; }

 

Attribute selector 속성 선택자 : HTML 태그의 속성을 선택합니다. 

HTML안의 모든 속성을 지정하여 사용 할 수 있고, 다양하게 적용 가능 합니다.

input[type=text] {padding:10px; color:#666666; } 

img[title=BIC] {width:80%; margin: 0 auto;}

 

 

Structural Pseudo Selector - 구조적 선택자

Selector	선택되는 요소
E:root	페이지의 최상위 요소 선택 html
E:nth-child(n)	n번째 요소가 E와 같을 때 선택
E:nth-last-child(n)	역순으로 n번째 요소가 E와 같을 때 선택
E:nth-of-type(n)	E와 타입의 요소 중 n번째 요소를 선택함
E:nth-last-of-type(n)	역순으로 E와 타입의 요소 중 n번째 요소를 선택함
E:first-child(n)	첫 번째 요소가 E라면 선택
E:last-child(n)	마지막 요소가 요소가 E라면 선택
E:first-of-type(n)	E와 같은 요소 중 첫번째 타입의 n번째 요소를 선택
E:last-of-type(n)	E와 같은 요소 중 마지막번째 타입의 n번째 요소를 선택
E:only-child	E가 유일한 자식 요소인 경우 선택
E:only-of-type	E타입의 자식 요소가 하나뿐일 때 선택
E:empty	자식 요소를 포함하지 않는 요소를 선택
E:not(S)	S가 아닌 E 요소를 선택함.

Pseudo Selector - 가상 요소 선택

Selector	선택되는 요소
E:link	아직 방문하지 않는 링크 요소
E:visited	이미 방문한 링크 요소
E:hover	마우스 포인터를 올려놓았을 때 링크 요소
E:active	마우스 클릭 또는 엔터로 활성화된 링크 요소
E:focus	포커스를 받은 링크 요소
E:target	내부 앵커의 목적지가 된 요소
E:enabled	사용 가능 상태의 폼 요소
E:disable	사용 불가 상태의 폼 요소
E:checked	체크 상태의 체크박스나 라디오버튼

Attribute Selector - 속성 선택자

Selector	선택되는 요소
E[attr]	[attr] 속성을 갖는 요소
E[attr=value]	[attr] 속성값이 value와 정확히 일치하는 요소
E[attr~=value]	[attr] 속성값이 value를 포함하는 요소
E[attr|=value]	[attr] 속성값이 value와 일치 또는 value로 시작되는 요소
E[attr^=value]	[attr] 속성값이 value로 시작하는 요소
E[attr$=value]	[attr] 속성값이 value로 끝나는 요소
E[attr*=value]	[attr] 속성값이 "value"라는 문자열이 하나 이상 존재할때.