CSS 부모요소의 1대 자식선택자 사용법
CSS 스타일시트에서 마크업을 하는 선택자는 크게 세 종류입니다. 자기 자신, 혹은 자식요소, 나머지 하나는 자식 요소의 형제요소죠. 그 중에서 오늘은 자식 선택 방법에 대해서 집중 탐구를 해보려고 합니다. 친효스킨에서도 이 방법을 통해서 정확하게 어떤 자식 요소에 스타일을 만들어줄지 명시하고 있습니다. 사용 빈도가 꽤 높은 선택 방법이라고 할 수 있겠습니다. 먼저 아래의 예시입니다.
<div class="wrap">
<p>나를</p>
<p>선택해</p>
<p>보아요!</p>
<div class="inside">
<p>제발요</p>
</div>
</div><body>에 이런 태그 구조가 있습니다. 여기에서 div는 p들의 부모요소가 됩니다. 이제 p안에 입력되어있는 텍스트의 글씨 색상을 빨간색으로 바꾸고 싶습니다. 그러면 CSS에서는 이렇게 제어하면 될 것입니다.
div.wrap p {
color: red;
}이렇게하면 wrap이라는 클래스명을 가진 div 태그 안의 모든 p태그에 입력된 텍스트의 글씨 색이 빨간색으로 변하게 될 것입니다. 일반적으로 자식 요소는 이렇게 선택되어집니다. 그런데 이번에는 나를, 선택해, 보아요! 라는 글씨만 빨갛게 만들고 싶습니다. 그러면 어떻게 하면 될까요? 가장 쉬운 방법은 <p>제발요</p> 를 다른 태그로 변경하는 방법일 것입니다. 그러면 div안의 p태그는 딱 변경하고자 하는 텍스트만 감싼 상태가 되기 때문입니다. 하지만 HTML 태그를 건드릴 수 없는 상황이라고 한다면? 그럴때는 다음의 방법으로 사용 가능합니다.
div.wrap > p {
color: red;
}바로 선택자 사이에 「>」 기호를 넣는 것입니다. 키보드의 마침표에 있는 특수기호 맞습니다. 이 뜻은 다음과 같습니다.
클래스명 wrap이라는 div 태그의 1대 자식 요소인 p태그에만 글씨 색상을 빨간색으로 적용시킨다.
따라서 이렇게 마크업을 하면 「제발요」 텍스트는 영향을 받지 않게 됩니다.
See the Pen CSS 1대 자식 선택자 by rgy0409 (@rgy0409) on CodePen.
이런 결과를 얻게 되는 것입니다. 보통 1대 자식 선택자를 사용하는 경우는 2단 깊이 이상의 드롭다운 메뉴를 구상할때나 전체 HTML 문서 중 div가 골고루 사용되어졌는데 그 중에서 특정 영역의 div안에 있는 1대 자식요소만 선택하고자 할 때 등등 그 활용도가 매우 높습니다. 친효스킨의 경우는 사이드바 안쪽의 1대 li 태그에만 스타일을 만들고자 할 때 이 방법이 사용되었습니다. 1대 자식요소 선택 방법은 반드시 꼭 직접 예습 및 복습을 해보시고 완벽히 이해하시기를 바라겠습니다. 나름 중요한 선택 방법이니까요. 끝.
