Display

Display (표시)

display 유틸리티로 컴포넌트 등의 display 값을 빠르고 반응형으로 전환하는 방법에 대해 알아봅니다. 흔히 쓰는 몇 가지 값들을 지원하며, 인쇄 시 display를 제어하는 몇 가지 추가 값도 포함합니다.

출처: 문서

본문

작동 방식 (How it works)

반응형 display 유틸리티 클래스로 display 프로퍼티의 값을 변경합니다. 우리는 의도적으로 display의 가능한 값 중 일부만 지원합니다. 필요에 따라 클래스를 조합해 다양한 효과를 낼 수 있습니다.

표기법 (Notation)

xs부터 xxl까지 모든 브레이크포인트에 적용되는 display 유틸리티 클래스에는 브레이크포인트 약어가 없습니다. 이런 클래스는 min-width: 0;부터 적용되므로 미디어 쿼리에 묶이지 않기 때문입니다. 반면 나머지 브레이크포인트는 브레이크포인트 약어를 포함합니다.

따라서 클래스는 다음과 같은 형식으로 이름 지어집니다.

xs의 경우 .d-{value}
sm, md, lg, xl, xxl의 경우 .d-{breakpoint}-{value}

여기서 value는 다음 중 하나입니다.

none
inline
inline-block
block
grid
inline-grid
table
table-cell
table-row
flex
inline-flex

$utilities에 정의된 display 값을 변경하고 SCSS를 다시 컴파일하면 display 값을 바꿀 수 있습니다.

미디어 쿼리는 주어진 브레이크포인트 이상의 화면 너비에 영향을 줍니다. 예를 들어 .d-lg-none은 lg, xl, xxl 화면에서 display: none;을 설정합니다.

예시 (Examples)

<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>

<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>

요소 숨기기 (Hiding elements)

더 빠른 모바일 친화적 개발을 위해 기기별로 요소를 보이거나 숨기는 반응형 display 클래스를 사용하세요. 같은 사이트의 완전히 다른 버전을 만드는 대신, 각 화면 크기에 맞게 요소를 반응형으로 숨기세요.

요소를 숨기려면 .d-none 클래스 또는 반응형 화면 변형을 위한 .d-{sm,md,lg,xl,xxl}-none 클래스 중 하나를 사용하면 됩니다.

특정 화면 크기 구간에서만 요소를 보이게 하려면 하나의 .d-*-none 클래스를 .d-*-* 클래스와 조합하면 됩니다. 예를 들어 .d-none .d-md-block .d-xl-none은 medium과 large 기기를 제외한 모든 화면 크기에서 요소를 숨깁니다.

<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

인쇄 시 display (Display in print)

인쇄 display 유틸리티 클래스로 인쇄할 때 요소의 display 값을 변경합니다. 반응형 .d-* 유틸리티와 동일한 display 값을 지원합니다.

.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-grid
.d-print-inline-grid
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex

인쇄 클래스와 display 클래스는 조합할 수 있습니다.

<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>

CSS

Sass utilities API

display 유틸리티는 scss/_utilities.scss의 utilities API에 선언되어 있습니다. utilities API 사용법을 알아보세요.

scss/_utilities.scss

"display": (
  responsive: true,
  print: true,
  property: display,
  class: d,
  values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
),

더 알아보기 (Learn more)

Bootstrap 문서