IT 강좌 CSS 기초 020_선택자 - zhaoJian의 기술 노트

선택자

선택자는 문서에서 스타일을 적용할 요소를 선택하는 데 사용됩니다. 다양한 선택 모드를 통해 브라우저에 어떤 요소에 어떤 스타일을 적용할지 알려줍니다.

ID 선택자 (#)

요소의 고유 ID로 요소를 선택합니다. ID 선택자는 문서에서 유일해야 하며 중복 사용하면 안 됩니다.

예시:

1
#myID {
2
  /* 스타일 규칙 */
3
}

클래스 선택자 (.)

요소의 클래스 이름으로 요소를 선택합니다. 클래스 선택자는 여러 요소에 사용할 수 있으며, 하나의 요소가 여러 클래스를 가질 수 있습니다.

예시:

1
.myClass {
2
  /* 스타일 규칙 */
3
}

요소 선택자 (p, h1)

HTML 요소 이름으로 요소를 선택합니다. 요소 선택자는 문서의 모든 일치하는 요소를 선택합니다.

예시:

1
p {
2
  /* 스타일 규칙 */
3
}

전체 선택자 (`*`)

문서의 모든 요소를 선택합니다. 모든 요소와 일치하여 성능에 영향을 줄 수 있으므로 신중하게 사용해야 합니다.

예시:

1
* {
2
  /* 스타일 규칙 */
3
}

속성 선택자 (`[type="text"]`)

요소의 속성값으로 요소를 선택합니다. 속성 선택자는 다른 속성값에 따라 요소를 선택할 수 있습니다.

예시:

1
input[type="text"] {
2
  /* 스타일 규칙 */
3
}

의사 클래스 선택자

요소의 특수한 상태나 위치를 선택합니다. 호버, 방문 등의 상호작용 상태에 사용됩니다.

예시:

1
a:hover {
2
  /* 스타일 규칙 */
3
}

의사 요소 선택자

요소의 특수한 부분을 선택합니다. 첫 번째 줄, 첫 글자 등의 가상 부분을 선택합니다.

예시:

1
p::first-line {
2
  /* 스타일 규칙 */
3
}

자식 선택자

요소의 직접 자식 요소를 선택합니다. 직접 자식만 선택하며 후손은 포함하지 않습니다.

예시:

1
ul > li {
2
  /* 스타일 규칙 */
3
}

일반 형제 선택자

같은 부모 요소를 가진 모든 형제 요소를 선택합니다. 지정된 요소 뒤의 모든 형제 요소를 선택하며, 인접할 필요는 없습니다.

예시:

1
h2 ~ p {
2
  /* 스타일 규칙 */
3
}

인접 형제 선택자

지정된 요소 바로 뒤의 형제 요소를 선택합니다.

예시:

1
h2 + p {
2
  /* 스타일 규칙 */
3
}

후손 선택자

요소 아래의 모든 후손 요소를 선택합니다. 깊이 중첩된 요소를 포함한 모든 후손을 선택합니다.

예시:

1
div p {
2
  /* 스타일 규칙 */
3
}

합집합 선택자 (,)

여러 선택자를 결합하여 어느 하나에 일치하는 모든 요소를 선택합니다. 여러 유형의 요소를 동시에 선택하고 동일한 스타일 규칙을 적용하는 데 사용됩니다.

예시:

1
h1, h2, h3 {
2
  /* 스타일 규칙 */
3
}

선택자 목록

여러 선택자를 우선순위에 따라 나열하여 가장 적합한 것을 선택합니다.

예시:

1
div p,
2
.myClass,
3
#myID {
4
  /* 스타일 규칙 */
5
}

선택자 명명 규칙

선택자 이름은 문자, 숫자, 밑줄 또는 하이픈으로 구성되어야 합니다.
이름은 문자 또는 밑줄로 시작해야 합니다.
이름은 숫자로 시작할 수 없습니다.
이름에 공백을 포함할 수 없습니다.

권장 사항:
의미 있는 이름 사용: 선택자 이름은 선택된 요소의 기능이나 용도를 명확하게 반영해야 합니다.
명명 규칙 준수: camelCase나 kebab-case 같은 일관된 명명 규칙을 사용하여 코드 일관성을 높입니다.
의미 없는 약어 지양: 다른 개발자가 이해할 수 있도록 너무 짧거나 의미 없는 약어를 피합니다.
시맨틱 준수: 시맨틱 선택자를 사용하여 코드의 가독성과 유지보수성을 높입니다.

선택자