[Bootstrap] Utility 2. Display와 Float

TOC

• Utility
• Display
  • 기호
  • Hiding
• Float
  • 사용법
  • breakpoint
• REFERENCE

Utility

앞서 Colors와 Spacing, Text 등 간단하지만 가장 많이 쓰이는 속성들에 대해 알아보았다.

이번 포스트는 Display와 Float 등 배치와 정렬에 관한 Utility들을 다뤄보고자 한다.

Display

박스 모델을 어떻게 보이게 할 것인지에 대해 결정하는 속성이다. 대표적으로는 inline과 block의 구분이 있다. 한 라인을 모두 차지할 것인지 아니면 다른 태그도 들어올 수 있도록 할 것인지에 대한 구분이다.

이후에 등장한 flex나 grid도 display에서 설정해준다.

기호

d-inline = display: inline;
d-block  = display: block;
d-flex   = display: flex;

직관적이어서 설명이 불필요할 정도이다.

Hiding

display: none; 속성을 이용하면 있지만 안 보이게 할 수 있다. 이를 이후에 정리할 breakpoint에 따라 보이거나 안 보이게 할 수 있는데, display는 이 breakpoint prefix를 지원한다.

<!-- 보이지 않도록 한다. -->
d-none

<!-- medium 구간에서만 안 보이게 한다. -->
d-md-none d-lg-block

<!--  -->
d-none d-sm-block d-none d-md-block d-lg-none

더 자세한 내용은 Bootstrap - Display 링크를 참고한다.

Float

해당하는 태그를 normal flow에서 빼내어 화면에 둥둥 뜨게 하는 방법, flex의 등장 이전에 반응형 웹의 초기를 이끌었던 속성이다.

사용법

float-start = float: left;
float-end   = float: right;
float-none  = float: none;

위와 같이 사용하고 아래는 사용 예시이다.

<div class="float-start">Float start on all viewport sizes</div>
<br />
<div class="float-end">Float end on all viewport sizes</div>
<br />
<div class="float-none">Don't float on all viewport sizes</div>

breakpoint

float는 breakpoint prefix를 지원한다. float-와 속성 사이에 breakpoint infix를 넣어서 말이다. 아래처럼 사용한다.

<div class="float-sm-start">
  Float start on viewports sized SM (small) or wider
</div>
<br />
<div class="float-md-start">
  Float start on viewports sized MD (medium) or wider
</div>
<br />
<div class="float-lg-start">
  Float start on viewports sized LG (large) or wider
</div>
<br />
<div class="float-xl-start">
  Float start on viewports sized XL (extra-large) or wider
</div>
<br />

float에 대한 더 자세한 내용은 Bootstrap - Float 링크를 참고한다.

REFERENCE

• Bootstrap - Display
• Bootstrap - Float