display

display (표시 방식)

요소의 CSS display 속성을 설정하는 유틸리티예요. 레이아웃의 흐름을 결정하는 핵심이니 옆에서 함께 짚어 드릴게요.

출처: 문서

본문

ClassStyles

Examples

Block and Inline

inline, inline-block, block 유틸리티를 사용해서 텍스트와 요소의 흐름을 제어할 수 있어요.

텍스트의 흐름을 제어할 때 CSS 속성 display: inline 을 사용하면 요소 안의 텍스트가 정상적으로 줄바꿈돼요.

반면 display: inline-block 속성을 사용하면 요소가 감싸져서 안의 텍스트가 부모 영역을 벗어나지 않게 돼요.

마지막으로 display: block 속성을 사용하면 요소가 자신만의 줄을 차지하며 부모를 가득 채워요.

<p>
  When controlling the flow of text, using the CSS property
  <span class="inline">display: inline</span>
  will cause the text inside the element to wrap normally.
</p>

<p>
  While using the property
  <span class="inline-block">display: inline-block</span>
  will wrap the element to prevent the text inside from extending beyond its parent.
</p>

<p>
  Lastly, using the property
  <span class="block">display: block</span>
  will put the element on its own line and fill its parent.
</p>

Flow Root

flow-root 유틸리티를 사용하면 자신만의 블록 포맷 컨텍스트(block formatting context)를 가진 블록 레벨 요소를 만들 수 있어요.

<div class="p-4">
  <div class="flow-root ...">
    <div class="my-4 ...">Well, let me tell you something, ...</div>
  </div>
  <div class="flow-root ...">
    <div class="my-4 ...">Sure, go ahead, laugh if you want...</div>
  </div>
</div>

Flex

flex 유틸리티를 사용해서 블록 레벨 flex 컨테이너를 만들 수 있어요.

<div class="flex items-center">
  <img src="path/to/image.jpg" />
  <div>
    <strong>Andrew Alfred</strong>
    <span>Technical advisor</span>
  </div>
</div>

Inline Flex

inline-flex 유틸리티를 사용해서 텍스트와 함께 흐르는 인라인 flex 컨테이너를 만들 수 있어요.

<p>
  Today I spent most of the day researching ways to ...
  <span class="inline-flex items-baseline">
    <img src="/img/kramer.jpg" class="mx-1 size-5 self-center rounded-full" />
    <span>Kramer</span>
  </span>
  keeps telling me there is no way to make it work, that ...
</p>

Grid

grid 유틸리티를 사용해서 그리드 컨테이너를 만들 수 있어요.

<div class="grid grid-cols-3 grid-rows-3 gap-4">
  <!-- ... -->
</div>

Inline Grid

inline-grid 유틸리티를 사용해서 인라인 그리드 컨테이너를 만들 수 있어요.

<span class="inline-grid grid-cols-3 gap-4">
  <span>01</span>
  <span>02</span>
  <span>03</span>
  <span>04</span>
  <span>05</span>
  <span>06</span>
</span>

<span class="inline-grid grid-cols-3 gap-4">
  <span>01</span>
  <span>02</span>
  <span>03</span>
  <span>04</span>
  <span>05</span>
  <span>06</span>
</span>

Contents

contents 유틸리티를 사용하면 "유령(phantom)" 컨테이너를 만들 수 있는데, 이 컨테이너의 자식들은 마치 부모의 직접 자식처럼 동작해요.

<div class="flex ...">
  <div class="flex-1 ...">01</div>
  <div class="contents">
    <div class="flex-1 ...">02</div>
    <div class="flex-1 ...">03</div>
  </div>
  <div class="flex-1 ...">04</div>
</div>

Table

table, table-row, table-cell, table-caption, table-column, table-column-group, table-header-group, table-row-group, table-footer-group 유틸리티를 사용해서 각각의 테이블 요소처럼 동작하는 요소를 만들 수 있어요.

<div class="table w-full ...">
  <div class="table-header-group ...">
    <div class="table-row">
      <div class="table-cell text-left ...">Song</div>
      <div class="table-cell text-left ...">Artist</div>
      <div class="table-cell text-left ...">Year</div>
    </div>
  </div>
  <div class="table-row-group">
    <div class="table-row">
      <div class="table-cell ...">The Sliding Mr. Bones (Next Stop, Pottersville)</div>
      <div class="table-cell ...">Malcolm Lockyer</div>
      <div class="table-cell ...">1961</div>
    </div>
    <div class="table-row">
      <div class="table-cell ...">Witchy Woman</div>
      <div class="table-cell ...">The Eagles</div>
      <div class="table-cell ...">1972</div>
    </div>
    <div class="table-row">
      <div class="table-cell ...">Shining Star</div>
      <div class="table-cell ...">Earth, Wind, and Fire</div>
      <div class="table-cell ...">1975</div>
    </div>
  </div>
</div>

Hidden

hidden 유틸리티를 사용해서 요소를 문서에서 제거할 수 있어요.

<div class="flex ...">
  <div class="hidden ...">01</div>
  <div>02</div>
  <div>03</div>
</div>

요소를 시각적으로만 숨기고 문서에는 남겨 두고 싶다면, 대신 visibility 속성을 사용해 주세요.

Screen-reader only

sr-only 를 사용하면 요소를 화면 낭독기(screen reader)에서는 숨기지 않으면서 시각적으로는 숨길 수 있어요.

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only">Settings</span>
</a>

not-sr-only 를 사용하면 sr-only 를 해제해서 요소를 시각 사용자와 화면 낭독기 모두에게 보이게 만들 수 있어요.

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only sm:not-sr-only">Settings</span>
</a>

예를 들어 작은 화면에서는 시각적으로 숨기고, 큰 화면에서만 보여 주고 싶을 때 유용해요.

Responsive design

display 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면, 중간 크기(md) 화면 이상에서만 해당 유틸리티를 적용할 수 있어요.

<div class="flex md:inline-flex ...">
  <!-- ... -->
</div>

변형(variant) 사용법에 대해 더 자세히 알고 싶다면 variants 문서를 참고해 주세요.

더 알아보기 (Learn more)