선택자

선택자는 컴퓨터 프로그래밍, 특히 웹 개발 분야에서 특정 요소나 요소를 그룹화하여 선택하는 데 사용되는 패턴 또는 표현식입니다. 선택자는 일반적으로 스타일 시트(CSS)나 JavaScript와 같은 언어에서 특정 HTML 요소에 스타일을 적용하거나 조작하기 위해 사용됩니다.

기능 및 역할

선택자의 주요 기능은 다음과 같습니다.

요소 선택: HTML 문서 내에서 특정 태그 이름, 클래스, ID, 속성 등을 가진 요소를 선택합니다. 예를 들어, 모든 <p> 태그를 선택하거나, 특정 클래스 이름을 가진 요소만 선택할 수 있습니다.
스타일 적용: CSS에서 선택자를 사용하여 선택된 요소에 특정 스타일 규칙을 적용합니다. 이를 통해 웹 페이지의 시각적 표현을 제어할 수 있습니다.
JavaScript 조작: JavaScript에서 선택자를 사용하여 선택된 요소를 동적으로 조작합니다. 예를 들어, 요소의 내용, 속성, 스타일 등을 변경하거나, 이벤트 핸들러를 추가할 수 있습니다.

선택자의 종류

다양한 종류의 선택자가 있으며, 각각 다른 기준으로 요소를 선택합니다. 주요 선택자 유형은 다음과 같습니다.

태그 선택자 (Type Selectors): HTML 태그 이름을 직접 사용하여 요소를 선택합니다 (예: p, h1, div).
클래스 선택자 (Class Selectors): 특정 클래스 이름을 가진 요소를 선택합니다 (예: .my-class).
ID 선택자 (ID Selectors): 특정 ID를 가진 요소를 선택합니다 (예: #my-id).
속성 선택자 (Attribute Selectors): 특정 속성이나 속성 값을 가진 요소를 선택합니다 (예: [type="text"], [title]).
가상 클래스 선택자 (Pseudo-class Selectors): 특정 상태에 있는 요소를 선택합니다 (예: :hover, :active, :focus).
가상 요소 선택자 (Pseudo-element Selectors): 요소의 특정 부분을 선택합니다 (예: ::before, ::after, ::first-line).
결합자 (Combinators): 선택자 간의 관계를 정의하여 요소를 선택합니다.
- 자손 결합자 (Descendant Combinator): 특정 요소의 하위 요소를 선택합니다 (예: div p).
- 자식 결합자 (Child Combinator): 특정 요소의 바로 아래 자식 요소를 선택합니다 (예: div > p).
- 인접 형제 결합자 (Adjacent Sibling Combinator): 특정 요소 바로 뒤에 있는 형제 요소를 선택합니다 (예: h1 + p).
- 일반 형제 결합자 (General Sibling Combinator): 특정 요소 뒤에 있는 모든 형제 요소를 선택합니다 (예: h1 ~ p).

활용 예시

CSS에서 선택자를 사용하는 간단한 예시는 다음과 같습니다.

/* 모든 단락 태그에 텍스트 색상을 파란색으로 적용 */
p {
  color: blue;
}

/* 클래스 이름이 "highlight"인 요소에 배경색을 노란색으로 적용 */
.highlight {
  background-color: yellow;
}

/* ID가 "main-title"인 요소에 글꼴 크기를 2em으로 적용 */
#main-title {
  font-size: 2em;
}

JavaScript에서는 다음과 같이 선택자를 사용하여 HTML 요소를 가져와 조작할 수 있습니다.

// ID가 "my-element"인 요소를 가져오기
const element = document.getElementById("my-element");

// 클래스 이름이 "my-class"인 모든 요소를 가져오기
const elements = document.querySelectorAll(".my-class");

선택자는 웹 개발에서 핵심적인 개념이며, 효율적인 스타일링과 동적 웹 페이지 구현을 위해 필수적으로 이해해야 합니다.

📖 WIPIVERSE

선택자