[Bootstrap] Utilities 살펴보기

Utilities

---

API

유틸리티 API는 유틸리티 클래스를 생성하기 위한 Sass 기반 도구입니다.

Background

background-color를 통해 의미를 전달하고 그라디언트로 꾸밈을 추가합니다.

Borders

테두리 유틸리티를 사용하여 요소의 테두리 및 테두리 반경 스타일을 빠르게 지정합니다. 이미지, 버튼 또는 기타 요소에 적합합니다.

Colors

색상 유틸리티 클래스를 사용하여 color (색상)을 통해 의미를 전달합니다. 호버 상태의 링크 스타일링에 대한 지원도 포함합니다.

Display

디스플레이 유틸리티를 사용하여 구성 요소의 표시 여부 등을 빠르고 신속하게 전환할 수 있습니다. 인쇄 시 표시를 제어하기 위한 일부 추가 기능뿐만 아니라 더 일반적인 값에 대한 지원도 포함됩니다.

 

코드의 의미는 lg사이즈보다 큰 경우(<div class="d-lg-none">)에는 "hide on lg and wider screens" 이 보이고 작은 경우(<div class="d-none d-lg-block">)에는 "hide on screens smaller than lg"가 보이게 됩니다. 

 

디스플레이가 작아서 스마트폰에서 정보를 보여주지 않아도 되는 경우에는 이 클래스가 사용될 수 있습니다.

<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>

Flex

반응형 flexbox 유틸리티 세트를 사용해 그리드 열, 내비게이션 바, 구성 요소, 레이아웃의 정렬 및 크기 조정을 신속하게 관리합니다. 더 복잡한 구현의 경우 사용자 정의 CSS가 필요할 수 있습니다.

Float

반응형 float 유틸리티를 사용하여 모든 중단점에서 모든 요소에서 float을 전환합니다.

Interactions

사용자가 웹 사이트의 콘텐츠와 상호 작용하는 방식을 변경하는 유틸리티 클래스입니다. 한번 클릭 시 전체가 드레그가 되거나 드레그가 되지 않게 하는 등의 기능을 제공합니다.

Opacity

투명도를 조절하는 기능을 가진 클래스들을 다룹니다.

Overflow

콘텐츠가 요소를 오버플로우 하는 방식을 빠르게 구현하려면 이러한 단축 유틸리티를 사용하세요.

Overflow

Position

요소의 위치를 빠르게 구성하려면 이러한 단축 유틸리티를 사용하세요.

 

Shadows

box-shadow 유틸리티를 사용하여 요소에 그림자를 추가하거나 제거합니다.

 

Sizing

너비 및 높이 유틸리티를 사용하여 요소의 폭 또는 높이를 쉽게 조정할 수 있습니다.

 

Spacing

Bootstrap에는 요소의 모양을 수정하기 위한 광범위한 반응형 gap, padding 및 margin 유틸리티 클래스가 포함되어 있습니다.

 

Text

정렬, 줄 바꿈, 굵기 등을 제어하는 일반 텍스트 유틸리티에 대한 문서 및 예제입니다.

 

Vertical alignment

인라인, 인라인 블록, 인라인 테이블 및 테이블 셀 요소의 수직 정렬을 쉽게 변경할 수 있습니다.

 

Visibility

가시성 유틸리티를 사용하여 디스플레이를 수정하지 않고 요소의 가시성을 제어합니다.

display-none과의 차이점
d-none은 높이값이 0이 되어 사라지지만 invisible을 주면 크기를 유지한 상태로 안보이게 됩니다.

 

참고자료

https://getbootstrap.kr/docs/5.0/utilities/api/

https://getbootstrap.com/docs/5.2/utilities/api/