CSS는 웹 페이지의 디자인을 담당하는 중요한 요소입니다. CSS 선택자는 웹 페이지에서 특정 요소를 선택하여 스타일을 적용하는 데 사용되는 도구로 다양한 유형의 선택자가 있습니다. 이 글에서는 그 중 ‘인접 형제 선택자’에 대해 자세히 알아보고 그 활용 방법에 대해 설명하겠습니다.
인접 형제 선택자란?
인접 형제 선택자는 동일한 부모를 가진 두 요소가 순서상 바로 이어져 있을 때 선택되는 선택자입니다. 이 선택자는 특정 요소 바로 다음에 위치한 형제 요소만을 선택하며, CSS 문법으로는 + 기호를 사용하여 표현됩니다.
예를 들면, p + div 라는 선택자는 div 요소가 p 요소 바로 다음에 위치할 때 해당 div 요소를 선택합니다. 즉, p 요소와 div 요소가 동일한 부모를 공유하면서 div가 p 바로 뒤에 위치해야 합니다.
인접 형제 선택자의 활용
인접 형제 선택자는 웹 페이지 스타일링에서 다양하게 활용될 수 있습니다. 예를 들어, 리스트 아이템 중 첫 번째 아이템만 스타일을 다르게 적용하고 싶을 때, li:first-child와 인접 형제 선택자를 함께 사용하여 나머지 아이템에 다른 스타일을 적용할 수 있습니다.
또한, 특정 요소 바로 다음에 오는 형제 요소에만 특별한 스타일을 적용하고 싶을 때도 인접 형제 선택자를 활용할 수 있습니다. 이는 레이아웃 조정, 간격 설정 등 다양한 상황에서 유용하게 사용됩니다.
저는 주로 전자책(EPUB) 편집할 때 자주 사용하는데 소제목 아래 첫 문단은 들여쓰기가 안되어 있고 그 다음 문단부터 들여쓰기가 되어 있는 책들이 많은데 그럴 경우 소제목 아래에만 들여쓰기를 하나씩 없애주는 편집을 할 경우에 시간절약을 할 수 있는 코드이기도 합니다.
소제목 아래 첫 문단은 들여쓰기가 안되어 있고 소제목의 class가 class=”small_title”이라고 할 경우의 css에서의 설정 예를 보면 아래와 같습니다.
.small_title + p {
text-indent: 0;
}
이 CSS 코드는 “.small_title” 클래스를 가진 요소 바로 다음에 위치한 태그에 스타일을 적용하는 것을 의미합니다.
.small_title + p는 인접 형제 선택자(combinator)를 사용한 코드로, .small_title 클래스가 적용된 요소 바로 다음에 있는 태그를 선택합니다. 이때 .small_title 클래스와 태그는 동일한 부모를 가지고 있어야 합니다.
text-indent: 0; 부분은 선택된 태그의 텍스트 들여쓰기를 0으로 설정하는 것을 의미합니다. 일반적으로, text-indent 속성은 문단의 첫 번째 줄에 들여쓰기를 적용하는 데 사용됩니다. 여기서는 들여쓰기를 없애기 위해 0을 설정하였습니다.
따라서, 이 코드 전체를 해석하면 “.small_title 클래스를 가진 요소 바로 다음에 위치한 태그의 첫 번째 줄 텍스트에는 들여쓰기를 적용하지 않는다”라는 의미가 됩니다.
그리고 만약에 다음에 나오는 코드가 <p>가 아닌 <div>이면 p 대신에 .small_title + div를 써주면 됩니다.
인접 형제 선택자의 주의점
인접 형제 선택자를 사용할 때는 몇 가지 주의점이 있습니다. 첫째, 인접 형제 선택자는 바로 다음에 이어지는 형제 요소만을 선택합니다. 즉, 동일한 부모를 공유하지만 순서상 떨어져 있는 요소는 선택되지 않습니다. 둘째, 인접 형제 선택자는 중첩된 요소에 대해서는 작동하지 않습니다. 즉, 부모-자식 관계의 요소에는 인접 형제 선택자를 사용할 수 없습니다.
결론
CSS의 인접 형제 선택자는 웹 페이지 스타일링에서 매우 유용한 도구입니다. 특정 요소와 그 바로 다음에 위치한 형제 요소를 선택하는 이 선택자는 레이아웃 조정, 특정 요소에만 스타일을 적용하는 등 다양한 상황에서 활용할 수 있습니다. 하지만 그 특성상, 사용할 때는 주의점을 잘 기억해두어야 합니다.