[CSS] Chapter 03. CSS Selector (선택자)

1. 개요

html은 html5의 표준에 따라 데이터를 마크업하는 프로그래밍 언어이다.

html이 발전하면서 브라우저의 연산을 빠르게하고, 프로그래머나 회사 사이의 기법 발전을 통일하기 위해 표준을 정하는 움직임이 발생했다.

웹 표준은 이제 더이상 무시할 수 있는 항목이 아니다. 때문에 프로그래머는 이 표준에 따라 데이터의 값이나 형식을 지정하고, 지정한 형식에 따라 구조를 구성하여 프로그래밍을 진행한다. 

 

웹 표준은 생산성이 증가한다는 장점을 가지지만 개인의 창의성을 저하하는 결과를 가져온다.

마크업은 결국 데이터의 포함관계를 규정하는 것인데, 이러한 규정에 따라 동일한 태그가 다수 사용된다면, 특별히 지정하고 싶은 개발자의 규칙 형성이 불가능하다.

이러한 특성에 따라 특정 태그나 데이터를 골라서 ‘추출할 필요’가 있다.  만약 이 과정이 진행되지 않으면 다른 태그가 지정되거나 원하지 않는 태그에서 데이터를 추출해올 수도 있다.  

 

이러한 특성에 따라 개발자는 반드시 ‘원하는 요소를 특정’해야 한다. 

html에서 원하는 요소를 특정하거나 선택하는 기능을 ‘선택자’라고 한다. 웹페이지는 설정한 디자인에 따라 화면을 구현하고 데이터를 표시한다.

때문에 선택자에 따라 구현하는 데이터의 범위가 변화하여 선택자를 반드시 정확하게 알 필요가 있다. 

 

2. 기본 형태 

 

선택자를 이해하기 위해서는 CSS에서 사용하는 선택자와 선언에 따른 속성, 값을 알아야한다.

위의 예시에서 선택자는 body 라는 항목으로 정의할 수 있으며, 해당 body 태그가 가지는 속성과 속성값은 중괄호 { } 안에 표시된다.

CSS의 모양 구성은 기본적으로 선택자 { } 로 표시되며, 중괄호 안에서 각 속성과 속성값을 구분하기 위해 ; 으로 행을 구분한다. 

 

3. 선택자의 종류 

3.1. 전체 선택자: *{}

해당 *{} 선택자는 style 안에서 지정할 경우, body와 body에 포함된 모든 tag에 설정한 효과를 구현한다.

표, 목록에 관계없이 적용되기 때문에 전체적으로 지정하고 싶은 color나 폰트를 지정할 때 용이하다. (추후 등장하는 Box 모델의 개념을 이해하면 tag의 기본 모양을 초기화하는 것도 가능하다.)

 

[CSS]
*{color: red;}

[HTML]
<p> 태그 선택자 예문 입니다. </p>

 

3.2. 태그 선택자: 태그이름 {}

태그 선택자는 태그명을 기준으로 선택하는 기법이다.

개발자가 선택한 태그 모두가 선택된다.

때문에 태그가 다수 존재한다면 모든 태그에 효과가 적용된다. 

 

[CSS]
p{ background-color: black; color: white;}

[HTML]
<p> 태그 선택자 예문 입니다. </p>

 

3.3. 아이디 선택자: #

style을 통해 특정 태그에 속성을 부여하면 동일 태그에 모두 동일한 효과가 적용된다.

특정 태그 혹은 영역에 속성을 부여하고 싶다면 inline 방식을 사용할 수도 있지만, 고유 객체 번호를 지정하여 속성을 부여할 수도 있다.

이러한 기능을 id라고 하는데, 자신이 지정한 특정 id 코드를 통해 원하는 태그에 속성을 부여하는 방법을 말한다. 

 

사용방법은 <style></style>에 #ID(개발자 지정) 으로 부여한다. 태그에 속성을 부여하듯이 속성을 지정할 수 있다.

다만, id는 태그당 1개만 적용해야 한다. 다수에 태그에 다양한 id를 부여하면 복잡한 기능을 구현할 수 있다. 

 

[CSS]
#special{background-color:red; color:blue;}

[HTML]
<h1 id="special">이것은 h1입니다.</h1>
/* #banner1 , #headline 등 프로젝트 그룹의 규격대로 다양하게 지정할 수 있다.*/

 

3.4. 클래스 선택자: . 

id는 1개의 태그에 1개만 사용할 수 있는 [1 on 1] 구조이다.

id는 다수의 태그가 공유하여 사용할 수 없는데, 이는 웹 페이지 구현 단계에서 복잡하게 사용된 코드들이 충돌하여 구동하지 않을 가능성이 있기 때문이다.

 

때문에 다수의 태그에 동일한 속성을 부여하고 싶다면 반드시 class 선택자를 이용하여야 한다.

사용 방법은  <style></style>에 .클래스(개발자 지정) 으로 부여한다. 

 

[CSS]
.special{ background-color: indianred; color:burlywood; }
.name{  text-align: center; }

[HTML]
<h1>클래스 없음</h1>
<p class="special">클래스 special</p>
<ul>
  <li>클래스 없음</li>
  <li class="special name">클래스 special</li>
  /* 이 태그는 클래스가 2개이다.*/
  <li>클래스 없음</li>
</ul>
<p>클래스 없음</p>
<h2 class="special">클래스 special</h2>

 

또한, class는 한 태그가 여러 class를 가져도 된다.

형식은 <div class=”inner on”></div> 와 같으며 “ “ 안에 띄어쓰기로 복수의 클래스 이름을 기입하면 해당 태그는 각각의 클래스 속성을 가지게 된다.

위의 형식에 따르면 inner 클래스와 on 클래스의 속성을 가진 태그라는 것이다. 

 

3.5. 복합 선택자

복합 선택자는 두 개 이상의 선택자 요소가 모인 선택자를 말한다.

이는 꼭 태그 선택자 간의 결합을 이야기하는 것은 아니며 태그 아이디, 태그 클래스등 다양한 조합이 가능하다. 

대표적으로 하위 선택자와 자식 선택자, 인접 형제 선택자와 일반 형제 선택자가 있다. 

 

 

1) 하위 선택자

형태: A B

내용: A 요소의 자손인 B 요소를 선택한다.

 

2) 자식 선택자

형태: A>B

내용: A요소의 자식인 B요소를 선택한다.

 

[CSS]

section ul { border: 1px solid black;}
section>ul { border: 1px solid black;}

 

3) 인접 형제 선택자

형태: A+B

내용: A 요소를 뒤따르는  B요소를 선택한다. 

(A와 B 사이에 다른 요소가 존재하면 선택하지 않는다.)

 

4) 일반 형제 선택자

형태: A~B

내용: A 요소가 앞에 존재하면 B를 선택한다.

(A가 B보다 먼저 등장하지 않으면 선택하지 않는다.)

 

[CSS]

h1+ul { border: 1px solid black;} /*인접 형제 선택자*/
h1~ul { border: 1px solid black;} /*일반 형제 선택자*/

 

3.6. 속성 선택자

속성선택자는 태그나 클래스, ID를 지정하여 해당 태그에 포함된 속성을 지정하는 선택자이다.

속성 및 속성 값을 지정하는 방식으로 선택자를 선택하고 해당 태그의 속성을 변경하는데 사용한다. 

 

A[B]	‘B’ 속성이 포함된 요소 A를 선택한다.
A[B=”val”]	‘B’ 속성의 값이 정확하게 ‘val’과 일치하는 요소 A를 선택한다.
A[B~=”val”]	‘B’ 속성의 값에 ‘val’이 포함되는 요소를 선택한다. (공백으로 분리된 값이 일치해야 한다.)
A[B^=”val”]	‘B’ 속성의 값이 ‘val’으로 시작하는 요소를 선택한다.
A[B$=”val”]	‘B’ 속성의 값이 ‘val’으로 끝나는 요소를 선택한다.
A[B*=”val”]	‘B’ 속성의 값에 ‘val’이 포함되는 요소를 선택한다.
A[B|=”val”]	‘B’ 속성의 값이 정확하게 ‘val’이거나 ‘val-’으로 시작하는 요소  A를 선택한다.

 

[CSS]
a[href] { border: 1px solid black;} /*A[B] 형식*/
input[type=”text”] { width: 100px; border: 1px solid black;} /*A[B=”val”] 형식*/
input[href$=”.xls”] { background-color: red;} /*A[B$=”val”] 형식*/


[HTML]
<a href=”one.html”>A[B] 형식</a>
<input type=”text” name=”name”>
<a href=”one.xls”>A[B$=”val”]형식</a>

 

3.7. 가상 클래스 선택자 

가상 클래스는 웹 문서의 소스에서 실제로는 존재하지 않지만 필요에 의해 임의로 ‘가상의 선택자’를 지정하여 사용하는 것이다. 

 

1) 링크 선택자와 동적 선택자 

A::link	방문하지 않은 링크 A를 선택한다.
A::visited	방문한 링크 A를 선택한다.
A::active	A 요소에 마우스 클릭 또는 키보드 엔터가 눌린 동안 A를 선택한다.
A::hover	A 요소에 마우스가 올라가 있는 동안 A를 선택한다.
A::focus	A 요소에 포커스가 머물러 있는 동안 A를 선택한다.

 

:link와 :visited는 문서 안의 링크와 관련된 선택자이다.

나머지 세가지 선택자는 링크 요소뿐만 아니라 다른 요소에도 적용할 수 있다. 

~동안은 ‘상태’라고 해석해도 무리가 없으며, 특정 상태일때의 요소를 선택하는 선택자이다.

focus의 초점이 맞춰져 있다는 해당 텍스트 필드 안에 마우스 커서가 깜빡거리는 상태를 말한다. 

 

사용자의 동작에 따라 현재는 존재하지 않지만 가상의 클래스를 부여해서 디자인을 반영한다.

특정 상태일 때 변경할 내용은 { } 안에 작성한다. 

 

2) 구조적 가상 클래스 선택자 

A::root	문서의 최상위 요소(html)를 선택한다.
A::nth-child(n)	앞으로부터 지정된 순서와 일치하는 요소가 A라면 선택한다.  (A가 아닌 요소의 순서가 계산에 포함)
A::nth-last-child(n)	뒤로부터 지정된 순서와 일치하는 요소가 A라면 선택한다.  (A가 아닌 요소의 순서가 계산에 포함)
A::nth-of-type(n)	A 요소 중 앞으로부터 순서가 일치하는 A요소를 선택한다. (A요소의 순서만 계산에 포함)
A::nth-last-type(n)	A 요소 중 끝으로부터 순서가 일치하는 A요소를 선택한다. (A요소의 순서만 계산에 포함)
A::first-child	첫 번째 등장하는 요소가 A라면 선택한다.  (A가 아닌 요소의 순서가 계산에 포함)
A::last-child	마지막에 등장하는 요소가 A라면 선택한다. (A가 아닌 요소의 순서가 계산에 포함)
A::first-of-type	A 요소 중 첫 번째 A를 선택한다.  (A요소의 순서만 계산에 포함)
A::last-of-type	A 요소 중 마지막 A를 선택한다.  (A요소의 순서만 계산에 포함)
A::only-child	A요소가 유일한 자식이면 선택한다.  (A가 아닌 요소가 하나라도 포함되면 선택하지 않는다.)
A::only-of-type	A요소가 유일한 타입이면 선택한다.  (A가 아닌 요소가 포함되어도 A타입이 유일하면 선택한다.)
A::empty	텍스트 및 공백을 포함하여 자식 요소가 없는 A를 선택한다.

 

3.8. 그외의 선택자

기본적으로 태그나 스타일 지정은 개별적으로 지정되지만, 태그를 연달아 적거나 , 적는 것에 따라 상관관계가 변화한다. 

 

1) 언어 선택자 

A::lang(ko)

HTML lang 속성 값이 ‘ko’로 지정된 요소를 선택한다.

 

2) 부정 선택자

A::not(C)

C가 아닌 A요소를 선택한다.

 

3) 목적 선택자

A::target

A의 URI가 요청되면 선택한다.  (따라서 A는 ID가 지정되어 있어야 한다.)

 

4) UI 요소 상태 선택자 

A::enabled	사용 가능한 폼 컨트롤(input, textarea, select, button) A를 선택한다.
A::disabled	사용 불가능한 폼 컨트롤(input, textarea, select, button) A를 선택한다.
A::checked	선택된 폼 컨트롤(input checked-”checked”)을 선택한다.

 

5) 가상 엘리먼트 선택자

A::first-line	A요소의 첫 번째 라인을 선택한다.
A::first-letter	A요소의 첫 번째 문자를 선택한다.
A::before	A요소의 시작 지점에 생성된 요소를 선택한다.
A::after	A요소의 마지막 지점에 생성된 요소를 선택한다.

 

4. 선택자의 우선순위 

(1) 속성값 뒤에 !important (실무에서 쓰는 경우 유지 보수가 힘들다)

(2) 선택자가 #id

(3) 선택자가 .class 및 pseudo 클래스(:hover 등)

(4) 선택자가 tag 이름인 경우 

(5) 선택자가 * (전체 선택자)

 

 스타일 우선 순위는 각 항목당 점수를 합산하여 적용하는 방식으로 적용된다. 실질적으로 하위 우선 순위가 상위 우선 순위를 제치려면 다수의 선택자로 선택되어 스타일이 적용되어야 한다. 실질적으로 상위를 못이긴다고 생각하자. 또한 마지막에 지정된 스타일이 우선 적용된다. 

 

5. 선택자의 지정 용어 

1) 일반 요소 선택자들 

선택자 형태	해석	예시
A, B	A 그리고 B	ol li, p {}
A B	A 안에 B	ol li p {}
#A	id가 A인 태그	.love
.A	class가 A인 태그	.panda
.A B	class가 A와 B인 태그	<p class=”test two”>
A.B	A 중 class가 B인 태그	p.test
:A	태그 내부에 A의 속성이 있는 태그를 선택	:checked
A>B	부모요소 A 내부에 있는 모든 내부요소 B를 특정	form > h3
A+B	이전 요소 A 다음에 나오는 다음 요소 B를 선택	h3+span
A[B]	태그 A중 속성B 속성이 있는 요소를 선택
[A|=”문자”]	문자 B 가 들어간 A 속성을 선택
[A=”아이디1”]	A 속성이 B인 태그를 선택	[id=go]
[id$=”B”]	“B”로 끝나는 속성을 선택	[id$=1]
[A|=”B”]	-로 구별된 속성 A를 “B”로 검색	[id|=wrap]
[A^=”B”]	특정 문자 B로 시작하는 아이디 A를 선택	[id^=li]
[id*=”B”]	특정 문자 B가 들어가는 아이디를 선택	[id*=type]
[class~= “B”]	클래스값 중에 속성 B가 포함된 속성 요소를 선택	[class ~= button]
<a href=선택자></a>	선택자 위치로 이동 가능

 

2) 링크 및 동적 클래스 선택자 

선택자 형태	해석
A::link	방문하지 않은 링크 A를 선택한다.
A::visited	방문한 링크 A를 선택한다.
A::active	A 요소에 마우스 클릭 또는 키보드 엔터가 눌린 동안 A를 선택한다.
A::hover	A 요소에 마우스가 올라가 있는 동안 A를 선택한다.
A::focus	A 요소에 포커스가 머물러 있는 동안 A를 선택한다.

 

3) 구조적 가상 클래스 선택자

선택자 형태	해석
A::root	문서의 최상위 요소(html)를 선택한다.
A::nth-child(n)	앞으로부터 지정된 순서와 일치하는 요소가 A라면 선택한다.  (A가 아닌 요소의 순서가 계산에 포함)
A::nth-last-child(n)	뒤로부터 지정된 순서와 일치하는 요소가 A라면 선택한다.  (A가 아닌 요소의 순서가 계산에 포함)
A::nth-of-type(n)	A 요소 중 앞으로부터 순서가 일치하는 A요소를 선택한다. (A요소의 순서만 계산에 포함)
A::nth-last-type(n)	A 요소 중 끝으로부터 순서가 일치하는 A요소를 선택한다. (A요소의 순서만 계산에 포함)
A::first-child	첫 번째 등장하는 요소가 A라면 선택한다.  (A가 아닌 요소의 순서가 계산에 포함)
A::last-child	마지막에 등장하는 요소가 A라면 선택한다. (A가 아닌 요소의 순서가 계산에 포함)
A::first-of-type	A 요소 중 첫 번째 A를 선택한다.  (A요소의 순서만 계산에 포함)
A::last-of-type	A 요소 중 마지막 A를 선택한다.  (A요소의 순서만 계산에 포함)
A::only-child	A요소가 유일한 자식이면 선택한다.  (A가 아닌 요소가 하나라도 포함되면 선택하지 않는다.)
A::only-of-type	A요소가 유일한 타입이면 선택한다.  (A가 아닌 요소가 포함되어도 A타입이 유일하면 선택한다.)
A::empty	텍스트 및 공백을 포함하여 자식 요소가 없는 A를 선택한다.

 

4) 언어 선택자 

선택자 형태	해석
A::lang(ko)	HTML lang 속성 값이 ‘ko’로 지정된 요소를 선택한다.

 

5) 부정 선택자

선택자 형태	해석
A::not(C)	C가 아닌 A요소를 선택한다.

 

6) 목적 선택자

선택자 형태	해석
A::target	A의 URI가 요청되면 선택한다.  (따라서 A는 ID가 지정되어 있어야 한다.)

 

7) UI 요소 상태 선택자 

선택자 형태	해석
A::enabled	사용 가능한 폼 컨트롤(input, textarea, select, button) A를 선택한다.
A::disabled	사용 불가능한 폼 컨트롤(input, textarea, select, button) A를 선택한다.
A::checked	선택된 폼 컨트롤(input checked-”checked”)을 선택한다.

 

8) 가상 엘리먼트 선택자

선택자 형태	해석
A::first-line	A요소의 첫 번째 라인을 선택한다.
A::first-letter	A요소의 첫 번째 문자를 선택한다.
A::before	A요소의 시작 지점에 생성된 요소를 선택한다.
A::after	A요소의 마지막 지점에 생성된 요소를 선택한다.