📌 CSS 선택자 추가 유형: 속성, 하위, 형제 요소 선택자
CSS 선택자는 웹 페이지에서 특정 요소에 스타일을 적용하는 매우 중요한 도구입니다. 오늘은 기본 선택자 외에도 속성 선택자, 하위 요소 선택자, 자식 요소 선택자, 형제 요소 선택자와 같은 추가적인 선택자를 배워봅니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible"
contect="IE=edge"
>
<title>CSS 문서사용하기기</title>
<style>
/*
기호와 함꼐 사용하는 속성 선택자
* : 값의 포함 여부
^ : 값의 시작 여부
$ : 값의 끝 여부
*/
[width $= "0"]{
border: 5px dashed red;
}
p > em{
color: blue;
}
#third + p{
color: orange;
}
#third ~ p{
color: orange;
}
/* 현재 선택자는 뒤이어 등장하는 형제들을 대상으로한다. 앞에있는형제 아님 */
#first ~ img{
display: none;
}
</style>
</head>
<body>
<img id="first"
src="images/45.jpg" width="120" alt="상인">
<img id="second"
src="images/45.jpg" width="120">
<img id="third"
src="images/45.jpg" width="120">
<p>대전은 대한민국의 광역시이며 남한의 중아에 위치해있다</p>
<p>우리말 이름은 한밭인데, 이이름은 </p>
<p>대전 내 <em>지명등에</em> 많이쓰이고있다.</p>
<p>대전 내 지명등에 많이쓰이고있다.</p>
</body>
</html>🎯 1. 속성 선택자 (Attribute Selector)
속성 선택자는 특정 속성을 가진 요소를 선택합니다. 예를 들어, type="text" 속성이 있는 input 요소를 선택할 수 있습니다.
✅ 예시
input[type="text"] {
background-color: lightblue;
}- type="text" 속성을 가진 input 요소의 배경 색상을 lightblue로 변경합니다.
🎯 2. 하위 요소 선택자 (Descendant Selector)
하위 요소 선택자는 상위 요소에 포함된 모든 하위 요소를 선택합니다. 공백을 사용하여 상위-하위 관계를 나타냅니다.
✅ 예시
div p {
color: red;
}- div 내부의 모든 p 요소에 텍스트 색상을 빨간색으로 설정합니다.
🎯 3. 자식 요소 선택자 (Child Selector)
자식 요소 선택자는 상위 요소의 바로 한 단계 하위 요소만 선택합니다. > 기호를 사용하여 자식 관계를 지정합니다.
✅ 예시
div > p {
color: green;
}- div 요소의 직접적인 자식인 p 요소에만 초록색 텍스트를 적용합니다.
🎯 4. 인접 형제 선택자 (Adjacent Sibling Selector)
인접 형제 선택자는 같은 부모를 가진 요소 중에서 바로 뒤에 오는 형제 요소만 선택합니다. + 기호를 사용하여 인접 관계를 나타냅니다.
✅ 예시
h1 + p {
font-weight: bold;
}- h1 바로 뒤에 오는 p 요소에만 굵은 글씨를 적용합니다.
🎯 5. 형제 요소 선택자 (General Sibling Selector)
형제 요소 선택자는 같은 부모를 가진 모든 형제 요소를 선택합니다. ~ 기호를 사용하여 형제 관계를 나타냅니다.
✅ 예시
h1 ~ p {
font-style: italic;
}- h1 요소 뒤에 나오는 모든 p 요소에 기울임꼴을 적용합니다.
📊 선택자 사용법 요약
선택자 유형설명사용 기호
| 속성 선택자 | 특정 속성을 가진 요소 선택 | [속성명] |
| 하위 요소 선택자 | 상위 요소의 모든 하위 요소 선택 | 공백 |
| 자식 요소 선택자 | 상위 요소의 바로 한 단계 하위 요소만 선택 | > |
| 인접 형제 선택자 | 바로 뒤에 오는 형제 요소만 선택 | + |
| 형제 요소 선택자 | 같은 부모를 가진 모든 형제 요소 선택 | ~ |
🧠 고급 팁 & 자주 하는 실수
📍 자주 하는 실수
- 클래스와 아이디 선택자 사용 시 혼동하지 않도록 주의해야 합니다. 클래스 선택자는 여러 요소에 적용할 수 있지만, 아이디 선택자는 한 문서에서 한 번만 사용해야 합니다.
📍 고급 팁
- 선택자 우선순위(CSS Specificity)를 잘 이해하고, 필요에 따라 명확한 선택자를 사용하면 스타일의 적용 범위와 충돌을 줄일 수 있습니다.
🎯 결론
이번 포스팅을 통해 CSS 선택자의 다양한 유형을 배워보았습니다. 각 선택자마다 특정 요소를 효율적으로 선택하고 스타일을 적용할 수 있는 방법을 이해하셨을 것입니다. 이제 선택자를 활용하여 웹 페이지의 스타일을 더 정교하게 적용할 수 있습니다!
'HTML & CSS' 카테고리의 다른 글
| Chapter 3-16. 의사요소와 의사클래스(CSS) (0) | 2025.03.31 |
|---|---|
| Chapter 3-14. 겹치거나 넘치는 요소다루기<z-index,overflow>(CSS) (0) | 2025.03.31 |
| Chapter 3-13. 위치 지정하기 <position>(CSS) (0) | 2025.03.31 |
| Chapter 3-12. 문서의 흐름 <float>(CSS) (0) | 2025.03.31 |
| Chapter 3-11. 요소의 유형 <display>(CSS) (0) | 2025.03.31 |