있었는데, 없어졌습니다. ( display:contents )

가끔 퍼블리싱을 하다보면 vue.js의 root엘리먼트가 항상 있어야 하는 것은 거슬리는 일이기도 하다.

혹은 관련이있어서 같은 부모를 가져야 하는 태그들이 있을 수 있다.

물론 아직도 display: block, inline만을 사용 하고 있다면, 딱히 불편함은 없을 수 있겠지만... grid와 flex없이는 이제 퍼블리싱 못하는 몸이 되어버렸다...

<div

style="display: grid;

grid-template-columns: repeat(2, minmax(0, 1fr));"

>

<div style="background: red;">test1</div>

<div style="background: green;">test2</div>

<ul>

<li style="background: blue;">1</li>

<li style="background: purple;">2</li>

</ul>

</div>

위 코드의 결과를 보자.

딱 보아도 잘못 된것만 같은 무언가가 만들어졌다.

<div

style="display: grid;

grid-template-columns: repeat(2, minmax(0, 1fr));"

>

<div style="background: red;">test1</div>

<div style="background: green;">test2</div>

<ul style="color: #ffffff; display: contents;">

<li style="background: blue;">1</li>

<li style="background: purple;">2</li>

</ul>

</div>

이제 위의 결과를 보자.

ul이 아닌 li각각이 ul부모인 display: grid의 영향을 받는 것을 볼 수 있다. 하지만 li각각의 디스크가 남아있으며, ul의 color를 li각각이 상속받는 형태가 되어있다. 

하지만 아직 아쉽게도 WD인 css 이다. 아직 Recommendation이 아니므로 사용에는 주의하자.

추가적으로 몇몇 일반적이지 않은 태그들에 대해서는 display:none으로 해석이 변경 되니 참고 하자.