[css] 선택자 표현
CSS에서 선택자는 요소를 선택하여 스타일을 적용하는 데 사용됩니다. 선택자는 다양한 형식으로 나타낼 수 있습니다. 이 기사에서는 각 선택자 유형에 대해 설명하고 예제를 통해 설명합니다.
기본 선택자
요소 선택자
요소 선택자는 요소의 이름을 사용하여 스타일을 적용합니다. 이 선택자는 특정 요소를 선택합니다.
예제:
p {
color: blue;
}
클래스 선택자
클래스 선택자는 .으로 시작하며, 특정 클래스를 가진 요소를 선택합니다.
예제:
.blue-text {
color: blue;
}
ID 선택자
ID 선택자는 #으로 시작하며, 특정 ID를 가진 요소를 선택합니다. ID는 문서 내에서 고유해야 합니다.
예제:
#header {
font-size: 24px;
}
결합 선택자
자식 선택자
자식 선택자는 부모 요소의 자식 요소를 선택합니다.
예제:
ul > li {
list-style-type: square;
}
자손 선택자
자손 선택자는 조상 요소의 모든 하위 요소를 선택합니다.
예제:
#container p {
font-size: 16px;
}
인접 형제 선택자
인접 형제 선택자는 같은 부모를 가진 요소 중에서 첫 번째 요소의 다음에 오는 요소를 선택합니다.
예제:
h2 + p {
margin-top: 20px;
}
일반 형제 선택자
일반 형제 선택자는 같은 부모를 가진 요소 중에서 특정 요소 다음에 오는 모든 해당 형제 요소를 선택합니다.
예제:
h2 ~ p {
margin-top: 20px;
}
위의 선택자 표현에 대한 설명과 예제를 통해 CSS의 다양한 선택자 유형에 대해 학습했습니다. 앞으로 이를 활용하여 웹페이지의 다양한 요소들을 스타일링하는 방법을 더욱 깊이 있게 다루어볼 것입니다.