← 개발일지

CSS로 요소를 묶을 수 있을까? DOM과의 차이

cssdomjavascriptfrontendlayout

CSS로 요소를 묶을 수 있을까?

웹 개발을 하다 보면 여러 요소를 하나의 그룹처럼 다루고 싶을 때가 있습니다.
이때 흔히 드는 생각이 있습니다.

"CSS로 묶을 수 있지 않을까?"

결론부터 말하면 불가능합니다.

DOM과 CSS의 역할 차이

이 문제는 DOM과 CSS의 역할을 이해하면 명확해집니다.

| 구분 | 역할 | |------|------| | DOM | HTML 구조 (부모-자식 관계) | | CSS | 스타일 및 배치 |

브라우저 렌더링은 다음 순서로 진행됩니다. HTML → DOM → CSS 적용 → 화면 렌더링

CSS는 이미 만들어진 DOM 위에서만 작동합니다.
즉, 구조 자체를 변경할 수 없습니다.

CSS로는 왜 안 될까?

CSS는 다음과 같은 작업을 할 수 없습니다.

  • 새로운 div 생성
  • 요소를 다른 부모로 이동
  • 여러 요소를 하나의 부모로 묶기

이 작업은 DOM 조작 영역이며 JavaScript가 담당합니다.

그렇다면 CSS로 가능한 것은?

CSS는 "묶는 것"이 아니라
"묶인 것처럼 보이게 하는 것" 만 가능합니다.

대표적인 방법은 다음과 같습니다.

1. display: contents

.wrapper {  
    display: contents;  
}

  • wrapper를 제거한 것처럼 렌더링

  • 구조는 그대로 유지

2. CSS Grid


#a, #b, #c {  
    grid-area: 1 / 1;  
}

  • 같은 영역에 배치

  • 하나처럼 보임

3. position 활용


.item {  
    position: absolute;  
}
  • 위치를 강제로 묶음

실제로 묶으려면 어떻게 해야 할까?

정답은 JavaScript DOM 조작입니다.

wrapAll 사용

$('#a, #b').wrapAll('<div class="wrapper"></div>');

append 사용

const wrapper = $('<div class="wrapper"></div>');  
wrapper.append($('#a, #b'));

이 방식은 실제로 DOM 구조를 변경합니다.

언제 CSS, 언제 JavaScript?

| 상황 | 선택 | | -------- | ---------- | | 단순 레이아웃 | CSS | | 기능 단위 묶기 | JavaScript | | 접근성/폼 처리 | JavaScript | | 반응형 UI | CSS |

핵심 정리

  • CSS는 구조를 바꾸지 못한다

  • DOM이 구조를 결정한다

  • 실제 그룹화는 JavaScript로 해야 한다

  • CSS는 시각적 grouping만 가능하다