레이아웃
display
엘리먼트의 디스플레이 박스 타입을 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
inline | display: inline; |
block | display: block; |
inline-block | display: inline-block; |
flow-root | display: flow-root; |
flex | display: flex; |
inline-flex | display: inline-flex; |
grid | display: grid; |
inline-grid | display: inline-grid; |
contents | display: contents; |
table | display: table; |
inline-table | display: inline-table; |
table-caption | display: table-caption; |
table-cell | display: table-cell; |
table-column | display: table-column; |
table-column-group | display: table-column-group; |
table-footer-group | display: table-footer-group; |
table-header-group | display: table-header-group; |
table-row-group | display: table-row-group; |
table-row | display: table-row; |
list-item | display: list-item; |
hidden | display: none; |
sr-only | position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0; |
not-sr-only | position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal; |
예제
블록과 인라인
inline, inline-block, block 유틸리티를 사용하여 텍스트와 엘리먼트의 흐름을 제어할 수 있습니다:
반면에 속성 display: inline-block 을 사용하면 엘리먼트가 감싸져 내부 텍스트가 부모를 벗어나지 않도록 합니다.
마지막으로, 속성 display: block 을 사용하면 엘리먼트가 자신만의 줄에 배치되고 부모를 채웁니다.
<p> 텍스트의 흐름을 제어할 때, CSS 속성 <span class="inline">display: inline</span> 을 사용하면 엘리먼트 내부의 텍스트가 일반적으로 줄바꿈됩니다.</p><p> 반면에 속성 <span class="inline-block">display: inline-block</span> 을 사용하면 엘리먼트가 감싸져 내부 텍스트가 부모를 벗어나지 않도록 합니다.</p><p> 마지막으로, 속성 <span class="block">display: block</span> 을 사용하면 엘리먼트가 자신만의 줄에 배치되고 부모를 채웁니다.</p>Flow Root
flow-root 유틸리티를 사용하면 블록 서식 컨텍스트를 가진 블록 레벨 엘리먼트를 생성할 수 있습니다.
<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 유틸리티를 사용하여 블록 레벨 플렉스 컨테이너를 만들 수 있습니다:
<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 유틸리티를 사용하면 텍스트와 함께 흐르는 인라인 플렉스 컨테이너를 만들 수 있습니다.
오늘은 병을 반환하면 미시간에서는 10센트를 받을 수 있지만 여기서는 5센트밖에 받지 못한다는 사실을 활용할 방법을 연구하느라 하루를 보냈습니다.
<p> 오늘은 하루 종일 병 반환 방법을 연구하느라 시간을 보냈습니다... <span class="inline-flex items-baseline"> <img src="/img/kramer.jpg" class="mx-1 size-5 self-center rounded-full" /> <span>Kramer</span> </span> 크레이머는 계속해서 이 방법이 통하지 않을 것이라고 말하며...</p>Grid
grid 유틸리티를 사용해 그리드 컨테이너를 만들 수 있습니다:
<div class="grid grid-cols-3 grid-rows-3 gap-4"> <!-- ... --></div>인라인 그리드
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 유틸리티를 사용하면 "팬텀" 컨테이너를 생성할 수 있습니다. 이 컨테이너의 자식 요소들은 부모 요소의 직접적인 자식처럼 동작합니다.
<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-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 ...">노래</div> <div class="table-cell text-left ...">아티스트</div> <div class="table-cell text-left ...">연도</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 속성을 대신 사용하세요.
스크린 리더 전용
sr-only를 사용하면 시각적으로는 요소를 숨기면서도 스크린 리더에는 보이게 할 수 있습니다:
<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>이 기능은 작은 화면에서는 시각적으로 숨기고, 큰 화면에서는 보여주고 싶을 때 유용합니다.
반응형 디자인
접두사 a display 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="flex md:inline-flex ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
