FE/CSS

[CSS] 선택자

kKkKkKWJ 2024. 6. 13. 19:29

*작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다.

 

이전 게시물에서 언급했듯이, CSS를 공부하기 위해서 가장 먼저 공부해야 할 것은

CSS를 적용하기 위해서 요소를 선택하는 방법이다.

 

이 때 사용하는 것을 선택자라고 한다.

선택자에는 태그 선택자, 아이디 선택자, 클래스 선택자, 속성 선택자 등

이 외에도 엄청나게 많은 선택자가 존재한다.

 

하지만 이를 다 외우기에는 힘들고

주로 사용하는 선택자는 한정되어 있다.

 

오늘은 그 중에서 정말 중요한 선택자만 공부해 보자.

 

1. 기본 선택자

기본 선택자는 태그 선택자, 아이디 선택자, 클래스 선택자, 전체 선택자로 나눌 수 있다.

기본 선택자만 알아둬도 크게 문제는 없다.

 

- 태그 선택자

 : 태그를 선택한다. 예를 들어 h1태그를 가진 모든 요소를 선택한다.

p {
  text-align: center;
  color: red;
}

 

 

- 아이디 선택자

: #아이디 형태로 요소를 선택할 수 있으며, 지정된 아이디를 가진 요소에 스타일을 적용한다.

#para1 {
  text-align: center;
  color: red;
}

 

- 클래스 선택자

: .클래스 형태로 요소를 선택하며, 지정된 클래스에 포함된 모든 요소에 스타일을 적용한다.

.center {
  text-align: center;
  color: red;
}

 

클래스 선택자를 응용하여 특정 클래스에 속한 태그 요소를 선택할 수도 있다.

p.center {
  text-align: center;
  color: red;
}

 

이렇게 하면 center클래스에 포함된 모든 p태그를 선택할 수 있다.

단, center클래스에 포함되지 않은 p태그는 선택하지 않는다.

 

또한, 여러개의 클래스를 적용시킬 수도 있다.

방법은 단순히 " " 안에서 적용할 클래스들 사이에 공백을 추가하면 된다.

<p class="center large">This paragraph refers to two classes.</p>

 

- 전체 선택자

: * 형태로 요소를 선택하며, HTML내의 모든 요소에 스타일을 적용한다.

* {
  text-align: center;
  color: blue;
}

 

2. 속성 선택자

: 특정 속성 또는 값이 있는 태그를 선택할 때 사용한다.

 

선택자[속성] 의 형태를 가지면, 특정한 속성이 있는 태그를 선택한다.

a[target] {
  background-color: yellow;
}

 

위 경우에서는, a 태그 중에 target 속성을 가진 요소만 스타일을 적용한다.

 

선택자[속성=값]의 형태를 가지면, 특정한 속성 내부 값이 특정 값과 같은 태그를 선택한다.

a[target="_blank"] {
  background-color: yellow;
}

위 경우에는, a태그 중에 target 속성이 _blank인 요소만 스타일을 적용한다.

 

또한, = 대신 ^=, $=, *= 등 다양한 연산자가 들어갈 수 있다.

선택자[속성^=값] 속성 값이 특정한 값으로 시작하는 태그를 선택한다. [class^="top"] {
  background: yellow;
}
선택자[속성$=값] 속성 값이 특정한 값으로 끝나는 태그를 선택한다. [class$="test"] {
  background: yellow;
}
선택자[속성*=값] 속성 값이 특정한 값을 포함하고 있는 태그를 선택한다. [class*="te"] {
  background: yellow;
}
선택자[속성~=값] 속성 값이 특정한 단어를 포함하고 있는 태그를 선택한다. [title~="flower"] {
  border: 5px solid yellow;
}
선택자[속성|=값] 속성 값이 특정한 값이거나 특정한 값 뒤에 -이 붙은 태그일 때 선택한다. [class|="top"] {
  background: yellow;
}

 

3. 기타 선택자

가상 선택자

사용자 반응으로 생성되는 특정한 상태를 선택한다.

a:active {
  background-color: yellow;
}

:active이기 때문에 a태그를 눌렀을 때 노란색 배경이 생긴다.

:hover로 변경하면 a태그에 마우스를 올렸을 때 스타일이 적용된다.

active와 hover외에도 disabled, empty 등 다양한 Pseudo Classes가 존재한다.

참고 사이트의 아래쪽 표를 참고하기 바란다.

 

후손 선택자

'선택자(스페이스)선택자' 형태를 가진다.

div p {
  background-color: yellow;
}

 

div태그 아래에 있는 모든 p태그를 선택하여 스타일을 적용한다.

 

자손 선택자

'선택자>선택자' 형태를 가진다.

div > p {
  background-color: yellow;
}

 

div태그 바로 아래에 있는 p태그를 선택하여 스타일을 적용한다.

후손 선택자와 헷갈릴 수 있으니 조심하자.

자손 선택자는 div태그 아래 section태그 아래 p태그에는 적용되지 않는다.

 

4. 여러 선택자 동시 적용

만약 같은 스타일을 여러 선택자에 동시에 적용하고 싶으면

각 선택자에 중복해서 스타일을 정의하는 것이 아니라

각 선택자를 ,(콤마)로 연결해주면 된다.

h1, #head, .object {
  text-align: center;
  color: red;
}

 

위 예제를 통해서 설명하면,

(1) h1태그를 가진 요소

(2) 'head'라는 아이디를 가진 요소

(3) 'object'라는 클래스에 포함된 요소

위 세 가지에 포함된 모든 요소가 중앙정렬에 빨간 글자로 표시된다.

 

 

CSS에는 정말로 다양한 선택자가 있다.

하나의 게시물로 다루기에도 많고, 중요하지 않은 것들도 있어서 모두 다루지는 못했다.

 

이 외에 궁금한 선택자가 있다면 링크를 참고하면 된다.