디스플레이에 대한 짧은 소개: 목차

때때로 우리는 의미상의 이유로 HTML에 요소가 있어야 하지만, 그것이 없다면 우리의 삶은 훨씬 더 쉬울 것입니다.

경우에 따라 HTML을 제어할 수조차 없습니다.

이때 display: contents가 구출됩니다.

이 짧은 게시물에서는 이 속성이 어떻게 작동하고 제한 사항이 무엇인지 살펴보겠습니다.

"원치 않는"HTML 요소는 flex 또는 grid 항목을 사용할 때 작업하기 까다로울 수 있습니다.

요소에 display: contents를 사용하면 컨테이너가 사라지고 자식이 요소 부모의 자식 역할을 합니다.
display: flex 를 사용하여 매년 표시되는 타임라인 보기를 살펴보겠습니다. 2000년 이후를 강조 표시해야 하는 경우 클래스가 있는 div로 그룹화할 수 있지만 해당 컨테이너가 플렉스를 깨뜨립니다!

부작용을 피하기 위해 이 요소에 display: contents를 사용할 수 있습니다.

<div class="years">
    <div class="year">1996</div>
    <div class="year">1997</div>
    <div class="year">1998</div>
    <div class="year">1999</div>
    <div class="recent">
        <div class="year">2000</div>
        <div class="year">2001</div>
        <div class="year">2002</div>
        <div class="year">2003</div>
    </div>
</div>
<style>
.years{
    display: flex;
}
.recent{
    display: contents;
    font-weight: bold;
}
</style>

.recent 컨테이너를 display: contents로 설정하면 기본적으로 모든 .year가 .years의 자식처럼 작동합니다.
display: contents를 사용하면 상자가 사라지므로 스타일을 지정할 수 없습니다. 즉, 배경과 패딩이 없습니다. 그러나 색상, 글꼴 크기 및 모든 인라인 스타일 속성을 사용할 수 있습니다.

또한 modern browsers supports it !

저는 Tom Quinonero입니다. 더 많은 팁과 리소스를 위해 디자인 시스템과 CSS에 대해 글을 씁니다. 🤙