CSS 선택자

CSS 선택자란?

CSS 선택자는 HTML 문서에서 특정 요소를 선택하고, 그 요소에 스타일을 적용할 수 있게 해주는 도구입니다. 선택자를 통해 HTML의 다양한 요소를 지정하고, 그 요소에 색상, 크기, 폰트 스타일 등의 CSS 규칙을 적용할 수 있습니다.

 

CSS에서 선택자는 크게 기본 선택자와 고급 선택자로 나눌 수 있으며, 각각의 선택자는 특정 조건에 맞는 요소를 찾는 역할을 합니다. 선택자는 웹 페이지의 구조와 디자인을 연결하는 중요한 역할을 하기 때문에, 효율적인 CSS 코드 작성에 필수적입니다.

 

웹 개발에서 CSS가 중요한 이유

• 효율적인 스타일 적용
• 페이지 유지보수와 관리 용이성
• 재사용성
• 구조와 디자인 분리

기본선택자

 

* : 기본, 모든 요소를 선택함

See the Pen Untitled by 성은총 (@xxlblqtl-the-selector) on CodePen.

태그 이름 선택

li,a,img 등 해당 태그를 직접 선택하여 CSS 스타일을 다음과 같이 적용할 수 있다.

See the Pen Untitled by 성은총 (@xxlblqtl-the-selector) on CodePen.

클래스 선택자 (.)

클래스 선택자는 HTML 요소에 여러 개의 스타일을 적용할 수 있도록 유연성을 제공합니다. 하나의 클래스는 여러 요소에 적용할 수 있으며, 동일한 스타일을 여러 곳에서 재사용할 수 있습니다.

• 특징:
  • 여러 요소에 동일한 클래스 스타일을 적용할 수 있다.
  • 하나의 요소에 여러 클래스도 적용 가능하다.
  • CSS에서 클래스 선택자는 .(점)을 사용하여 선언한다.
  • 유연한 스타일링을 위해 주로 사용된다.

See the Pen Untitled by 성은총 (@xxlblqtl-the-selector) on CodePen.

아이디 선택자 (#)

아이디 선택자는 문서 내에서 고유해야 하는 요소에 스타일을 적용할 때 사용됩니다. 하나의 아이디는 페이지 내에서 단 한 번만 사용할 수 있으며, 고유성을 보장해야 하는 경우에 주로 사용됩니다.

• 특징:
  • HTML 문서 내에서 아이디는 고유해야 한다.
  • 하나의 아이디는 단 하나의 요소에만 적용할 수 있다.
  • CSS에서 아이디 선택자는 #(샵)을 사용하여 선언한다.
  • 특정한 요소 하나만 스타일링할 때 사용된다.

See the Pen Untitled by 성은총 (@xxlblqtl-the-selector) on CodePen.

비교

• 사용 범위: 클래스는 여러 요소에 적용 가능하지만, 아이디는 하나의 요소에만 적용 가능하다.
• 우선순위: 같은 스타일 규칙이 적용될 경우, 아이디 선택자가 클래스 선택자보다 높은 우선순위를 가진다.

우선순위

아이디 선택자 > 클래스 선택자

 

자주 사용되는 스타일은 클래스를 선택자를 사용해 여러 요소에 반복적으로 적용하고

특정 요소에 고유한 스타일을 지정하고 싶다면 아이디 선택자를 사용해서 HTML 스타일을 효율적으로 관리할 수 있다.