[CSS] 5장: CSS 선택자 다루기

개요

이번 글에서는 CSS 선택자에 대해 다룰 예정이다. 선택자는 HTML 요소에 스타일을 적용할 때 어떤 요소를 선택할지 지정하는 기능이다. 이 장에서는 기본 선택자부터 시작해 조합 선택자, 가상 요소 선택자, 가상 클래스 선택자, 그리고 다양한 선택자를 조합해 사용하는 방법까지 배우게 된다. 이를 통해 보다 정교하고 효율적으로 스타일을 적용하는 방법을 익힐 수 있을 것이다. 

기본 선택자 사용하기

전체 선택자

*{ /* CSS 코드 */ }

HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법.
* 기호를 통해 사용된다.

h1, p 태그를 비롯해 html, head, title, style, body 태그 등 모든 요소가 선택된다.

태그 선택자

tagName{ /* CSS 코드 */ }

HTML태그 명으로 선택자를 지정하는 방법.
특정 태그를 가지는 모든 요소를 한 번에 선택한다.

아이디 선택자

#idName{ /* CSS 코드 */ }

id 속성값을 이용해 선택자를 지정하는 방법.
속성값 앞에 # 기호를 붙여 구분한다.

이때, id 속성값은 하나의 HTML문서 내에서 고유해야 한다.

클래스 선택자

.className{ /* CSS 코드 */ }

class 속성값을 이용해 선택자를 지정하는 방법.
속성값 앞에 . 기호를 붙여 구분한다.

가장 많이 사용하는 선택자 지정 방법이며, 중복해서 사용할 수 있다.

기본 속성 선택자

[attribute=value]{ /* CSS 코드 */ }

HTML 태그에 사용할 수 있는 속성과 값을 사용해 선택자를 지정하는 방법.
이때 =value 부분이 없다면 해당 속성의 모든 요소가, 아니라면 속성이 value인 요소만 적용된다.

또한, 속성 선택자는 다른 선택자와 함께 사용될 수 있다.

 

문자열 속성 선택자

태그가 가진 속성값이 특정 문자열과 일치하는 요소를 선택자로 지정한다.

많이 사용되는 편은 아니다.

형식	설명
[속성~=문자열]	속성값에 문자열이 포함되어 있으면 선택한다.(단어 기준)
[속성|=문자열]	속성값이 문자열과 같거나 문자열로 시작하면 선택한다.
[속성^=문자열]	속성값이 문자열로 시작하면 선택한다.
[속성$=문자열]	속성값이 문자열로 끝나면 선택한다.
[속성*=문자열]	속성값에 문자열이 포함되면 선택한다.

조합 선택자 사용하기

기본 선택자와 함께 사용했을 때 선택자의 의미를 더 풍부하게 해준다. 

그룹 선택자

tag, #id, .class{ /* CSS 코드 */ }

여러 기본 선택자가 같은 스타일을 공유할 때 , 로 구분하여 한번에 선택자를 지정할 수 있다.

자식 선택자

.class > p{ /* CSS 코드 */ }

부모 요소의 하위에 있는 자식 요소에 스타일을 적용할 때 사용한다. 2개 이상의 선택자가 사용되며 > 기호로 구분한다.

위와 같이 사용한다면 특정 클래스 아래의 p 태그에만 스타일이 적용되는 것이다.

하위 선택자

div p{ /* CSS 코드 */ }

선택자의 범위를 특정 부모 요소의 하위 요소로 한정하는 방법이다. 공백으로 구분하여 사용한다.

자식 선택자와의 차이는, 자식 선택자는 직계 자식만 스타일이 적용되는 반면 하위 선택자는 모든 자손에게 스타일이 적용된다.

인접 형제 선택자

h1 + h2{ /* CSS 코드 */ }

전자 선택자(h1)와 인접한 형제 관계인 후자 선택자(h2)에 적용된다.

일반 형제 선택자

h1 ~ h2{ /* CSS 코드 */ }

전위 요소와 형제관계에 있는 모든 후위 요소를 선택자로 지정한다.

가상 요소 선택자 사용하기

p::before {
  content: "Start: ";
  color: green;
}

p::after {
  content: " :End";
  color: blue;
}

HTML 문서에 명시적으로 작성된 구성요소는 아니지만 존재하는 것처럼 취급해 선택하는 지정 방법이다. 
위와 같은 문장을 실행하면 p의 앞, 뒤로 Start: 와 :End 문구가 생기고, 그 문구에 스타일이 적용된다.

before, after를 포함해 대략 14개가 있지만 가장 자주 사용하는 것은 이 두 가지이다.

가상 클래스 선택자 사용하기

가상 클래스 선택자는 요소의 상태를 이요해 선택자를 지정하는 방법이다.

링크 가상 클래스 선택자

종류	설명
:link	한 번도 방문하지 않은 링크일 때
:visited	한 번이라도 방문한 적이 있는 링크일 때

a 태그에서 발생할 수 있는 링크 상태를 이용해 선택한다. 한 번 방문한 사이트의 색을 다르게 할 때 사용된다.

동적 가상 클래스 선택자

종류	설명
:hover	요소에 마우스를 올렸을 때
:active	요소를 마우스로 클릭하고 있는 동안

사용자의 행동에 따라 변하는 상태를 이용해 선택자를 지정한다. 이 두 가지는 대표적 동적 상태이다.

입력 요소 가상 클래스 선택자

종류	설명
:focus	입력 요소에 커서가 활성화될 때
:checked	체크박스가 표시되어 있을 때
:disabled	상호작용 요소가 비활성화될 때
:enabled	상호작용 요소가 활성화될 때

입력 요소의 특정 상태를 이용해 선택자로 지정하는 방법이다. 

구조적 가상 클래스 선택자

종류	설명
E:first-child	E요소의 첫 번째 자식 요소
E:last-child	E요소의 마지막 자식 요소
E:nth-child (n)	E요소의 부모 요소의 자식 요소 중 N번째
E:nth-last-child (n)	E요소의 부모 요소의 자식 요소 중 뒤에서 N번째
E:nth-of-type (n)	부모 요소의 자식 요소 중 N번째로 등장하는 E요소
E:nth-last-of-type (n)	부모 요소의 자식 요소 중 뒤에서 N번째로 등장하는 E요소
E:first-of-type	부모 요소의 자식 요소 중 첫 번째로 등장하는 E요소
E:last-of-type	부모 요소의 자식 요소 중 마지막으로 등장하는 E요소

HTML 태그의 사용 위치, 다른 태그와의 관계에 따라 요소를 선택하는 방법이다.

다양한 선택자 조합하기

지금까지 배운 모든 선택자들은 다양한 방법으로 조합이 가능하다. 

//자주 사용되는 태그들
div .box{} /*class 속성값이 box인 div 태그*/
section #main{} /*id 속성값이 main인 section 태그*/

//사용 가능한 다른 예시
#main .box{} /*id 속성값이 main이고 class 속성값이 box인 요소*/
div:hover button{} /*div 태그에 마우스를 올린 상태일 때, 해당 div 태그 하위의 button 선택*/
div:hover > button{} /*div 태그에 마우스를 올린 상태일 때, 해당 div 태그의 자식인 button 선택*/

 

마무리

CSS 선택자에 대한 학습을 마치면서, 선택자가 얼마나 유용한지 느낄 수 있었다. 기본 선택자부터 시작해, 조합 선택자, 가상 요소와 가상 클래스 선택자, 그리고 다양한 선택자 조합 방법을 배우면서, 웹 페이지의 스타일을 정밀하게 제어하는 기술을 익힐 수 있었다. 예를 들어 현재 이 블로그는 대제목(검은 줄), 중제목(빨간 줄) 등의 스타일링을 서식을 통해 미리 인라인으로 정의한 제목들을 불러오고 있지만, 오늘 배운 내용을 응용해 앞으로는 제목을 불러오기만 해도 자동으로 스타일이 적용될 수 있도록 할 수 있을 것이다.

이제 다음 장에서는 CSS의 필수 속성들을 다룰 예정이다. 선택자로 어떤 요소에 스타일을 적용할지 결정했다면, 속성은 그 스타일의 구체적인 모습을 정의하는 역할을 한다. 다음 장에서 배울 속성들을 통해 CSS의 강력한 기능을 더 깊이 이해하고 활용할 수 있을 것 같아 기대가 된다.