1st revised - 2022년 9월 19일

선택자

html 태그를 선택하는 것

CSS 선택자

선택자 { 속성 : 값; }

CSS 규칙을 적용할 요소를 정의
중괄호 안에 여러가지 속성과 값을 넣을 수도 있다.

/*
	h1 Selector
	h1 이라는 태그 유형으로 요소를 선택함
*/
h1 {
	color: blue;
}

🚩기본 선택자

- 전체 선택자

*을 사용하여 모든 요소를 선택한다.

/* 모든 요소를 선택함. */
* {
	margin: 0;
	padding: 0;
}

- 태그 선택자

태그의 이름으로 요소를 선택한다.

/* 태그명이 h1인 요소를 모두 선택함. */
h1 {
	color: blue;
}

- class 선택자

주어진 class 명을 가진 모든 요소를 선택한다.

/* class에 title을 갖고 있는 모든 요소를 선택함. 예) <h1 class="title"> */
.title {
	color: blue;
}

- ID 선택자 : id 속성에 맞는 요소를 선택한다.

id 선택자는 웹 문서에서 고유한 하나의 태그에만 사용해야 한다.
이를 어긴다고 해서 오류가 표시되지 않지만 하나의 요소에만 사용하는 것이 웹 표준.

/* id속성이 title인 요소를 선택함. */
#title {
	color: blue;
}

🚩속성 선택자

주어진 속성을 가진 모든 요소를 검사한다.

- [속성이름] 선택자

[속성이름] 선택자는 특정 속성을 가지고 있는 요소를 모두 선택한다.

- [속성이름="속성값"] 선택자

[속성이름="속성값"] 선택자는 특정 속성을 가지고 있으며, 해당 속성의 속성값까지 일치하는 요소를 모두 선택한다.

🚩그룹 선택자

선택자를 쉼표(,)로 구분해 여러 선택자를 나열함. 같은 스타일을 여러 선택자에 한꺼번에 정의할 수 있다.

h1, p {
	text-align: center;
}

🚩복합 선택자

- 하위(후손) 선택자

첫 번째 요소의 자손인 태그를 선택한다.
A선택자의 하위에 있는 B선택자를 모두 선택함.
띄어쓰기가 선택자의 기호이므로 함부러 띄어쓰기를 하면 안된다

/* <div>태그 하위에 있는 모든 <span>요소 */
div span {
	color: blue;
}

- 자식 선택자

자식 > 선택자는 첫 번째 요소의 바로 아래 자식인 태그만 선택한다.

/* <ul>태그의 바로 자식인 모든 <li>요소 */
ul > li {
	color: blue;
}

- 일반 형제 선택자

일반 형제 ~ 결합자는 형제, 즉 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택한다.

/* <p>태그의 뒤에(아래) 나오는 모든 <span>요소 */
p ~ span {
	color: blue;
}

- 인접 형제 선택자

인접 형제 + 결합자는 형제, 즉 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택한다.

/* <h2>태그 바로 뒤에 위치하는 <p>요소 */
h2 + p {
	color: blue;
}

- 일치 선택자

선택자 abc의 다음 형제요소 xyz 모두 선택

abcxyz {
	
}