[CSS] 모르면 평생 안쓸 미치도록 유용한 CSS 형제 결합자

HTML과 CSS를 이용해서 연속된 요소들을 순서대로 나열할 때 정해진 수치만큼 padding이나 margin을 주는 경우가 아주아주 빈번하게 발생합니다.

 

이 과정에서 보통 첫 요소에는 padding이나 margin이 필요하지 않을 수 있는데, 이런 경우 전체에 padding 혹은 margin을 먹이고 덮어 씌우는 방법을 많이 사용하곤 합니다.

 

하지만 우리가 별로 신경써서 공부하지 않았던 요소를 사용한다면 이걸 훨씬 더 편하게, 그리고 효율적으로 구현할 수 있습니다.

바로 오늘 설명할 형제 결합자를 사용하는 방법입니다.

 

목차

 

---

0. 결합자가 뭐지?

결합자가 뭔지 이해하기 전에, 선택자에 대해서 알 필요가 있습니다.

 

선택자는 CSS 규칙을 적용할 요소를 정의하는 데에 쓰이는 요소입니다.

조금 더 자세하게 말하면, CSS 속성값을 적용하기 위해 어떤 HTML 요소를 선택해야 할 지 브라우저에게 알려주는 패턴을 의미합니다.

 

 

본 글은 선택자의 기초부터 설명하기 위한 글은 아니기 때문에 어느 정도는 이미 알고 있고 사용했다는 가정하에 설명합니다.

 

보통 *를 사용해서 모든 요소를 선택하거나, class(".")나 id("#")를 통해 선택하곤 합니다.

 

/* 전체 선택자 */
* {
  color: brown;
}

/* 클래스 선택자 */
.ssoco_class {
  color: red;
}

/* 아이디 선택자 */
#ssoco_id {
  color: blue;
}

 

몇몇 CSS에 조예가 깊으신 분들은 가상 클래스(":"), 혹은 가상 요소("::")를 사용하기도 합니다.

특정 조건에 스타일을 입힐 때 사용하는 가상 클래스의 대표적인 예시로는 :hover,

실제로 존재하지 않는 가상의 요소를 만들 때 사용하는 가상 요소의 대표적인 예시로는 ::after가 있습니다.

 

 

여기서 조금 더 나아가면 결합자라는 것을 쓸 수 있는데, 여러 선택자들을 결합하여 사용할 수 있는 방법을 말합니다.

대표적으로 자손 결합자 (" "), 자식 결합자 ("<")를 많이 사용합니다.

 

자손 결합자는 첫 번째 요소의 자손인 요소를 모두 선택합니다.

자식 결합자는 첫 번째 요소의 바로 아래인 요소를 선택합니다.

 

/* 자손 결합자 */
.ssoco_class .ssoco_inside_class {
  color: green;
}

/* 자식 결합자 */
.ssoco_class > span {
  color: yellow;
}

 

 

더 자세한 내용은 MDN 문서를 참조하시길 바랍니다!

 

CSS 선택자 - Web 개발 학습하기 | MDN

 

위 문서를 참고하면, 우리가 안쓴다고 생각하고 간단하게 존재 여부만 파악하고 넘어가기 쉬운 형제 결합자들이 맨 마지막 쯤에 등장합니다.

이것들이 뭔지에 대해서 간단하게 알아보고 본론으로 넘어가겠습니다.

 

 

0.0. 인접 형제 결합자

인접 형제 결합자("+")는 앞에서 지정한 요소의 바로 다음에 위치하는 형제 요소만 선택하는 결합자입니다.

 

<div>
  <h1 class="ssoco_class">ㅎㅇㅎㅇ</h1>
  <h2 class="next">hihi</h2>
  <h2 class="next">하이하이</h2>
</div>

.ssoco_class + .next {
  color: red;
}

 

 

0.1. 일반 형제 결합자

일반 형제 결합자("~")는 서로 형제인 요소 중에서 앞 요소 뒤에 뒤 요소가 존재하는 경우 전부 선택하는 결합자입니다.

 

.ssoco_class ~ .next {
  color: red;
}

 

 

---

1. 인생은 실전

이제 형제 결합자에 대해서 알아봤으니, 실제로 어떻게 유용하게 써먹는 지에 대해서 알아보도록 하겠습니다.

 

어떤 하나의 컨테이너 안에 요소들이 순차적으로 여러 개 나열되는 경우가 굉장히 많겠죠?

이런 경우 나열은 하되, 첫 번째 요소에는 마진과 같은 효과를 넣지 않고 싶은 경우가 발생할 수 있습니다.

이 포스팅의 도입부에서 이야기한 바로 그런 상황인 것이죠.

 

<div class="container">
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
</div>

 

 

위 HTML 코드를 CSS로 사진처럼 만드려면 어떻게 할 수 있을까요?

 

물론 HTML코드를 수정할 수도 있습니다.

(inline-block으로 인해 발생하는 공백은 해당 포스팅의 내용과 관련이 없으니 무시하고 넘어가겠습니다!)

 

<div class="container">
  <span class="box first"></span>
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
</div>

.container {
  background-color: salmon;
  height: 150px;
  margin-top: 50px;
}

.box {
  display: inline-block;
  width: 150px;
  height: 150px;
  background-color: brown;
  margin-left: 30px;
}

.box.first {
  margin-left: 0;
}

 

하지만 코드의 크기가 커지고 이와 비슷한 로직이 반복되면 매번 HTML 코드를 새롭게 수정해야 할 것이기에 굉장히 비효율적일 것입니다.

또는 HTML을 변경시키면 안되는 상황이라면 사용할 수 없을 것입니다.

 

한 단계 더 나아가서 가상 클래스를 사용한다면 아래와 같은 코드를 만들 수 있습니다.

 

.container {
  background-color: salmon;
  height: 150px;
  margin-top: 50px;
}

.box {
  display: inline-block;
  width: 150px;
  height: 150px;
  background-color: brown;
  margin-left: 30px;
}

.box:first-child {
  margin-left: 0;
}

 

이렇게 전체에 마진을 먹이고 first-child에만 마진을 0으로 덮어씌우는 방법도 나쁘지 않지만, 아예 처음부터 첫 요소를 제외한 나머지 요소에 편하게 CSS 규칙을 적용할 수 있는 방법은 없을까요?

 

이럴 때 형제 결합자, 그 중에서도 인접 형제 결합자를 사용할 수 있습니다.

아래와 같이 .box + .box 형태를 사용하면 box 클래스 뒤에 box 클래스가 있는 경우에 CSS 규칙이 적용되기에 보다 명확하고 깔끔하게 CSS를 적용할 수 있습니다.

 

.container {
  background-color: salmon;
  height: 150px;
  margin-top: 50px;
}

.box {
  display: inline-block;
  width: 150px;
  height: 150px;
  background-color: brown;
}

/* 인접 형제 결합자 사용 */
.box + .box {
  margin-left: 30px;
}

 

 

해당 케이스에서 일반 형제 결합자를 사용할 수도 있지만, 매번 뒤에 있는 모든 box 클래스 요소들을 중복해서 체크하는 불필요한 과정이 발생하기 때문에 일반적으로 인접 형제 결합자를 사용합니다.

 

이제는 냅다 덮어씌우지 말고 보다 스마트하게 반복되는 CSS 규칙들을 처리해봅시다!!

 

---

2. 참고자료

Adjacent sibling combinator - CSS: Cascading Style Sheets | MDN

The Adjacent-Sibling Selector