CSS 선택기는 스타일을 적용할 수 있는 요소를 선택합니다. 가장 기본적인 선택자는 요소 이름으로 요소를 선택하는 요소 선택자입니다. 다른 선택기에는 id, class, universal 및 하위 선택기가 포함됩니다.

선택자는 CSS 문의 두 부분 중 하나입니다. 선택기는 특정 스타일에 대해 HTML 페이지의 요소를 대상으로 지정하는 데 사용됩니다.

웹 페이지의 요소를 정확하게 대상으로 지정하는 데 사용할 수 있는 다양한 CSS 선택기가 있으며 디자인할 때 높은 수준의 사용자 정의를 허용합니다.

이 가이드에서는 코드에서 가장 일반적으로 사용되는 선택기를 어떻게 활용할 수 있는지 CSS 선택기의 기본 사항을 살펴봅니다.

CSS 선택기

CSS 선택기는 CSS 스타일을 적용할 HTML 요소를 식별합니다. 선택자는 이름, ID, 클래스 및 기타 속성을 기반으로 요소를 선택할 수 있습니다. 선택기는 CSS 규칙에서 대괄호 쌍 앞에 나타납니다.

CSS에서 규칙은 요소 또는 요소 범위에 적용해야 하는 스타일을 정의하는 데 사용됩니다. 규칙에는 선택자와 선언이라는 두 가지 구성 요소가 있습니다.

다음은 CSS 규칙의 예입니다.

h1 {
	color: pink;
}

이 CSS 규칙은 웹 페이지의 모든 h1 요소의 색상을 분홍색으로 설정합니다. 규칙의 두 가지 구성 요소는 다음과 같습니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

• h1 , 우리 스타일이 적용되는 요소입니다. 이것을 선택기라고 합니다.
• 색상:분홍색 , 이는 선택기의 요소에 적용되는 스타일입니다. 이것을 선언이라고 합니다. 이 예에서는 모든 h1 요소의 색상을 분홍색으로 변경합니다.

CSS 선택기는 웹 스타일 디자인의 기본적인 부분입니다. 선택기를 사용하면 특정 스타일을 사용해야 하는 요소를 브라우저에 알릴 수 있습니다. 예를 들어, 브라우저에 모든

스타일을 지정하도록 지시하는 선택기가 있을 수 있습니다. 요소 또는 모든

요소, 웹 페이지에서.

CSS 선택기 유형

CSS는 다양한 선택기를 제공합니다. CSS 규칙을 디자인할 때 만날 수 있는 주요 선택기의 예를 살펴보겠습니다.

CSS 요소 기반 선택기

요소 기반 선택기를 사용하면 규칙이 해당하는 문서의 모든 요소 인스턴스에 스타일을 적용할 수 있습니다. 예를 들어 요소 선택기를 사용하여 모든

페이지의 태그입니다.

웹 페이지의 모든 단락 기반 텍스트의 색상을 회색으로 변경하려고 한다고 가정합니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.

p {
	color: gray;
}

"p" 선택기 내부의 선언은 모든 단락에 적용됩니다(HTML

태그)를 웹페이지에 표시합니다.

CSS ID 선택기

CSS id 선택기는 해당 ID를 기반으로 페이지의 HTML 요소를 선택합니다. HTML ID는 고유하므로 id 선택기를 사용하여 웹 페이지의 단일 요소에 스타일을 적용합니다. ID 선택기의 구문은 해시 기호 뒤에 요소 ID가 오는 것입니다.

페이지에서 "box9"라는 요소의 CSS 높이 속성 값을 150px로 설정하려고 한다고 가정합니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.

#box9 {
	height: 150px;
}

이 규칙은 ID가 "box9"인 요소의 높이를 150px로 설정합니다.

CSS 클래스 선택기

CSS 클래스 선택기는 특정 클래스 속성을 가진 요소를 찾습니다. 클래스 선택기의 구문은 마침표(.)와 선택하려는 클래스 이름입니다.

따라서 "boxMiddle" 클래스를 대상으로 하려면 ".boxMiddle" 선택기를 사용합니다.

웹 페이지에서 상자를 디자인한다고 가정해 보겠습니다. 상자의 배경색은 분홍색이어야 합니다. 우리 상자에는 스타일을 적용할 수 있는 "pinkBox" 클래스가 할당되었습니다. 다음은 pinkBox 클래스가 있는 요소의 색상을 분홍색으로 설정하는 데 사용할 코드입니다.

.pinkBox {
	color: pink;
}

"pinkBox" 클래스가 있는 웹 페이지의 모든 요소는 분홍색으로 설정됩니다.

또한 특정 클래스의 특정 요소만 스타일의 영향을 받도록 지정할 수도 있습니다. 클래스 선택기만 사용하면 특정 클래스의 모든 요소가 정의한 스타일의 영향을 받습니다.

요소 유형이 앞에 오는 클래스 선택기를 사용하면 특정 클래스가 있는 특정 요소에만 스타일을 적용할 수 있습니다. 모든 HTML

div.pinkBox {
	color: pink;
}

* {
	text-align: center;
}

li a {
	background-color: yellow;
}

h2 {
	text-align: center;
}

.alignCenter {
	text-align: center;
}

h2, .alignCenter {
	text-align: center;
}

h1 {
	text-align: center;
	font-size: 32px;
	font-weight: normal;
}

h2 {
	text-align: center;
	font-size: 24px;
	font-weight: normal;
}

h3 {
	text-align: center;
	font-size 18px;
	font-weight: normal;
}

h1, h2, h3 {
	text-align: center;
	font-weight: normal;
}

h1 {
	font-size: 32px;
}

h2 {
	font-size: 24px;
}

h3 {
	font-size: 18px;
}