가끔 퍼블리싱을 하다보면 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으로 해석이 변경 되니 참고 하자.
댓글
댓글 쓰기