DOM 과 DOM이 만날 때 여백을 대하는 우리의 자세

대형 사이트에서 작업할 때, 여러가지 변수가 많은데,

그 중에 'DOM 간 간격을 어떻게 처리할 것인가?' 가 최근 이슈가 되어 정리해본다.

 

지금 작업하는 화면은 마크업 변경을 최소화해야 하는 프로젝트이다.

또한 잘못된 코드도 안고 가야 하는 문제가 있어, CSS로 80% 이상 커버해야 한다.

이미 12년에 육박하는 2500페이지의 레거시.

이전에는 있는 줄도 몰랐던 :has 선택자, [class*=클래스] 같은 속성 선택자를 비롯하여

!important가 난무하는 무서운 프로젝트이다.

 

작은 사이트의 경우 DOM과 DOM이 만날 때

여백은 크게 문제가 되지 않는다.

그냥 적당히 처리해도 된다.

 

그런데 10페이지 이상, 100 페이지 이상, 1000페이지 이상의 화면은 어떨까?

규칙이 잘 적립되고, 그 규칙에 맞추어 작업이 이루어졌을 때는 일이 수월할 수 있다.

 

화면에서 h3가 나오고, 그와 관련된 내용이 나오는 것이 규칙이라면,

h3에 해당되는 내용이 하나의 DOM으로 쌓여 있어서 다음 h3가 나올 때까지 다른 DOM이 없다면?

그 사이트에서 작업하는 것이 얼마나 축복인지 감사해야 한다.

 

그래서, 가장 효율적인 여백 지정은?

.선택자 + .선택자 {
	margin-top: {수치}px
}

 

위와 같은 형태가 이상적이다.

그러나 위의 선택자를 지정할 수 없다면?

.선택자:not(:first-child) {
	margin-top:{수치}px
}

 

 

의외로 간단한 해결책이다.

아래 오브젝트가 있어야 여백도 있다는 것...