이번 주 공부 내용으로 기록하고자 하는 부분은
제목처럼 "CSS 선택자"이다!
'CSS 선택자'는 무엇인가?
'선택자'란 말 그대로 특정 대상을 선택하는 것을 말한다. 'CSS 선택자'는 HTML의 어떤 요소를 선택하여 스타일링을 적용할 지를 정하는 것을 의미한다. CSS 선택자 종류는 굉장히 다양한데, 크게 분류하면 이러한 종류들이 있다.
CSS 연산자 종류
기본 선택자
- 전체 선택자
- 유형 선택자
- 클래스 선택자
- ID 선택자
- 특성 선택자
그룹 선택자
결합자
- 자손 결합자
- 자식 결합자
- 일반 형제 결합자
- 인접 형제 결합자
- 열 결합자
의사 클래스/요소
- 의사 클래스
- 의사 요소
가장 기본적이고, 많이 사용하는 선택자는 역시 '기본 선택자'일 것이다. 어떠한 HTML 한 문서를 단 몇 줄만 읽어보더라도 수 많은 '클래스 선택자'를 찾아볼 수 있기 때문이다.
이번 기록에서 정리하고 싶은 내용은 CSS 선택자 중에서도 "결합자"이다. 다른 선택자 개념은 문서 작성 시 직접 사용한 적 있거나, 들어본 적 있는 것들이었는데, '결합자'는 이번에 공부하면서 거의 처음 들어본 것 같아(특히 '자식 결합자') 정리하고 싶었다.
결합자
앞서 'CSS 선택자'는 스타일링을 적용하고자 하는 특정 HTML 요소를 선택하는 것이라고 했다. CSS에서의 '결합자'는 CSS 선택자로 선택한 '여러 개의 선택자들을 결합'하여 보다 세밀한 스타일링을 할 수 있도록 한다.
결합자 종류
자손 결합자
A B처럼 " "(공백)을 사용하는 자손 결합자는 A을 만족하는 요소의 하위 요소 중에서 B를 만족하는 '모든' 요소를 가르킨다.
<div>
<ul>
<li>
List Item 1
<ul>
<li>Small Item (1)</li>
<li>Small Item (2)</li>
<li>Small Item (3)</li>
</ul>
</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
</ul>
</div>
<ul>
<li> List _not in div <li>
</ul>
// 스타일
ul {
color: black;
}
// 스타일_ 자손 결합자 확인!
div ul {
color: blue;
}예시로 작성한 내용이다. 기본적인 ul 태그의 스타일로 글자색 'black'을 설정했다. 아래는 위 내용의 실행화면이다. div 태그 내의 '모든' ul 태그의 글자색은 자손 결합자로 설정한 스타일링이 적용되는 것을 볼 수 있다.
자식 결합자
A > B처럼 '>' 기호를 사용하는 자식 결합자는 A을 만족하는 요소의 하위 요소 중 '바로 아래'에 해당하는 B를 가르킨다.
<div>
<ul>
<li>
List Item 1
<ul>
<li>Small Item (1)</li>
<li>Small Item (2)</li>
<li>Small Item (3)</li>
</ul>
</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
</ul>
</div>
<ul>
<li> List _not in div <li>
</ul>
// 스타일
ul {
color: black;
}
// 스타일_ 자식 결합자 확인!
div > ul {
color: blue;
}자손 결합자 예시 코드와 동일한 HTML 구조이다.
div 태그 내의 '모든' ul 태그를 선택했던 것과 달리, 자식 결합자는 div 태그 내의 ul 태그 중에서도 div 태그 바로 하위에 있는 'List Item 1~3' 내용의 ul 태그를 선택하는 것을 볼 수 있다.
일반 형제 결합자
A ~ B처럼 '~' 기호를 사용하는 일반 형제 결합자는 같은 부모 요소를 갖으며, A 요소를 뒤따르는 모든 B 요소를 말한다.
두 요소가 서로 붙어있을 필요는 없고, A 요소와 B 요소의 부모 요소가 같으면 선택할 수 있다.
예시로 작성한 내용이다.
<div>
<p>이미지 앞 부분 내용</p>
<img src="https://i.pinimg.com/564x/a6/98/08/a69808bd9e8d6caa0950556e3d930840.jpg" alt="안녕하세요 블로깁니다... 예시 이미지">
<p>이미지 뒷 부분 내용이면서 p</p>
<span>이미지 뒷 부분이지만 p 아니고 span</span>
<p>이미지 뒷 부분 내용이면서 p _22222</p>
</div>
// 스타일
div {
background-color: palegreen;
}
p {
color: red;
}
// 스타일_ 일반 형제 결합자 확인!
img ~ p {
color: blue;
background-color: yellow;
}<<실행화면>>
예시로 작성한 내용이다. 쉽고 명확하게 비교하기 위해 div 영역 내의 배경색도 설정해 보았다. 일반 형제 결합자로 작성한 'img ~ p'는 'div' 태그라는 동일한 부모 요소를 가진 p 태그 2개와 img 태그가 중, img 태그를 뒤따르는 p 태그 요소를 선택한다는 뜻이다. 따라서, 해당 결합자가 가리키는 내용인 '이미지 뒷 부분 내용'에 설정한 스타일링이 적용되는 것을 확인할 수 있다.
인접 형제 결합자
A + B처럼 '+' 기호를 사용하는 자식 결합자는 같은 부모 요소를 갖으며, A을 만족하는 요소의 하위 요소 중 '바로 아래'에 해당하는 B를 가르킨다.
예시로 작성한 내용이다. 일반 형제 결합자의 예제 코드에서 p 태그와 span 태그의 위치를 변경해보았다. 참고로 br 태그는 단순히 실행 화면을 보다 깔끔하게 하기 위해 추가한 것이다.
<div>
<p>이미지 앞 부분 내용</p>
<img src="https://i.pinimg.com/564x/a6/98/08/a69808bd9e8d6caa0950556e3d930840.jpg" alt="안녕하세요 블로깁니다... 예시 이미지">
<br />
<span>이미지 뒷 부분이지만 p 아니고 span</span>
<p>이미지 뒷 부분 내용이면서 p</p>
</div>
// 스타일
div {
background-color: palegreen;
}
p {
color: red;
}
// 스타일_ 인접 형제 결합자 확인!
img + p {
color: blue;
background-color: yellow;
}<<실행화면>>
인접 형제 결합자인 'img + p' 조건이 충족되지 않는 경우를 작성해보았다. 이미지를 출력한 후에도 p 태그가 등장하긴 하지만, '바로 다음'에 위치하는 것은 아니기 때문에 조건을 충족하지 못 한 것이다.
일반 형제 결합자와 인접 형제 결합자의 차이!
<<예시 코드>> <div>
<p>이미지 앞 부분 내용</p>
<img
src="https://i.pinimg.com/564x/a6/98/08/a69808bd9e8d6caa0950556e3d930840.jpg"
alt="안녕하세요 블로깁니다... 예시 이미지"
/>
<p>이미지 뒷 부분 내용이면서 p (일반 O, 인접 O)</p>
<span>이미지 뒷 부분이지만 p 아니고 span</span>
<p>이미지 뒷 부분 내용이면서 p (일반 O, 인접 X)</p>
</div>
// 스타일링
// 공통
div {
background-color: palegreen;
}
p {
color: red;
}
// 일반 형제 결합자의 경우
img ~ p {
color: blue;
background-color: yellow;
}
// 인접 형제 결합자의 경우
img + p {
color: blue;
background-color: yellow;
}<<실행 화면>>
- 일반 형제 결합자
- 인접 형제 결합자
두 형제 결합자의 가장 큰 차이점은 '결합자 스타일링 속성에 적용되는 요소의 개수'이다.
- 일반 형제 결합자는 하나 또는 두 개 이상의 요소에 영향을 준다.
- 인접 형제 결합자는 오로지 하나의 요소에만 영향을 준다.
마무리
우리는 선택자로 '클래스'를 사용할 수도 있지만, 결합자를 사용하는 것도 역시 하나의 방법이다. 관계성을 나타내는 클래스명을 작성하는 것으로도 요소 간의 관계를 알 수 있겠지만, 이렇게 '결합자'를 사용함으로써 요소들 간의 관계를 파악할 수도 있다. 이러한 결합자의 성격과 목적을 고려하여 사용한다면, CSS 코드 작성에 도움이 되는 기능일 것 같다.
참고한 글
