display: contents로 중간 래퍼 무시하고 레이아웃 정리하기

최근 프로젝트에서 다음과 같은 레이아웃을 만들었다.

• 한 줄에 두 칼럼을 배치 (width는 50% 씩)
• 내부 요소들은 위 부모 요소에 맞게 추가 가능함.

하지만 실제로 적용했을 때, 칼럼이 width: 50% 을 차지하지 않고 아래와 같이 찌그러든 것을 볼 수 있었다.

width: 50% 가 각 요소에 적용되어 있습니다.

 

단순히 부모 컴포넌트에 display: flex; 와 width: 100%; 를 주고 하위요소에 width: 50% 을 주면 되겠지라고 생각했었는데, 계속 찌그러지고 각 요소의 너비가 50% 로 차지하지 않아서 꽤 당황했었다.

 

결론적으로 위와 같은 이슈가 발생한 이유는 해당 요소를 그릴 때 Tiptap ProseMirror를 사용하고 있었는데, 에디터 상에서 자동으로 삽입되는 중간 래퍼로 인해 의도와 다르게 동작했던 것이다.

 

그럼 중간 래퍼에도 동일하게 width: 50% 를 주는 것으로 해결되었지만, 2차 요구사항을 생각했을 때 에디터 상에서 자동 삽입되는 래퍼를 계속 고려하는 것은 비효율적인 상황이라 다른 방법이 필요했다.

1은 50% 적용

 

이때 display: contents; 를 사용해서 해결할 수 있었는데, display: contents 속성은 DOM 트리상의 요소는 그대로 유지하지만 화면상 레이아웃 박스를 만들지 않는다고 한다.

즉, 시각적/레이아웃 측면에서 해당 요소가 사라진 것처럼 동작하기 때문에 하위 자식들은 상위 부모와 직접 연결된 것과 같은 배치가 된다.

따라서 중간 래퍼에 해당 속성을 추가했을 때 하위 요소의 width: 50%; 가 제대로 동작하는 것을 볼 수 있었다.

 

display: contents 적용

 

 

https://hidde.blog/more-accessible-markup-with-display-contents/

More accessible markup with display: contents