-
[Bootstrap] 유틸리티카테고리 없음 2021. 3. 9. 11:01
Bootstrap 유틸리티 클래스
유틸리티 클래스를 잘 사용하면 추가적인 CSS 속성정의 없이 편하게 원하는 결과물을 쉽게 만들 수 있다.
유틸리티 클래스란, margin, padding, color, position, size 등 다양한 CSS 속성들을 사용하기 편하도록 미리 정의해 둔 클래스들로 기본 컴포넌트 클래스들과 결합해 사용하는 클래스다.
자주 쓰이는 유틸리티 클래스
color
<p class="text-primary">.text-primary</p> <p class="text-secondary">.text-secondary</p> <p class="text-success">.text-success</p> <p class="text-danger">.text-danger</p> <p class="text-warning">.text-warning</p> <p class="text-info">.text-info</p> <p class="text-light bg-dark">.text-light</p> <p class="text-dark">.text-dark</p> <p class="text-body">.text-body</p> <p class="text-muted">.text-muted</p> <p class="text-white bg-dark">.text-white</p> <p class="text-black-50">.text-black-50</p> <p class="text-white-50 bg-dark">.text-white-50</p>
Spacing
박스모델에 필요한 margin, padding 을 지정하기 위한 유틸리티 클래스
기본 사용법은 {property}{sides}-{size} 형식이며 xs 스크린 사이즈를 기준으로 한다. 그외 스크린 사이즈에 따른 지정은 {property}{sides}-{breakpoint}-{size} 형식을 사용한다.
property
- m: margin
- p: padding
sides
상하좌우 각각 영문 첫글자를 사용한다. 비워둘경우 4방향 모두를 지정.
- top(t),bottom(b), left(l), right(r)
- x, y
size
0~5, auto 를 사용합니다. 3을 기준으로 부트스트랩의 기본 설정값의 0.25, 0.5, 1.5, 3 배율을 크기를 가진다.
다음은 BS size 유틸리티를 사용한 예이다.
<div class="pt-4 bg-warning">pt-4 (1.5rem = 24px)</div> <div class="p-5 bg-success">p-5 (3rem = 48px)</div> <div class="m-5 pb-5 bg-info">m-5 (3rem = 48px), pb-5 (3rem = 48px)</div>- 첫번째 박스는 윗쪽 padding 만 지정
- 두번째 박스는 전체 padding 을 동일하게 지정
- 세번째 박스는 전체 margin 과 아랫쪽 padding을 지정
Flex
1. d-flex
이 상태에서 영역을 감싸고 있는 div에 d-flex 클래스를 준다.
<div class="border d-flex"> <div class="border">영역1</div> <div class="border">영역2</div> <div class="border">영역3</div> </div>
block 요소들인데도 in-line으로 성격이 바뀌어 위와 같이 가로로 자기 크기만큼 줄어든 상태로 배치가 된다.
한가지 유심히 볼 것은 d-flex가 부여된 자신은 block 특성으로 배치가 되고, 그 자식들은 in-line 형태로 배치가 되었다는 것이다.
2. d-inline-flex
이번에는 d-flex 대신 d-inline-flex 클래스를 줘보자.
<div class="border d-inline-flex"> <div class="border">영역1</div> <div class="border">영역2</div> <div class="border">영역3</div> </div>
부모 영역의 테두리가 자식의 크기에 맞게 줄어든 것을 확인할 수 있다.
즉, 자식요소들 뿐만 아니라 자신 또한 in-line 처럼 배치가 되는 것이다.
3. d-flex-row-reverse
위 예들은 요소들의 나열 순서가 왼쪽에서 오른쪽이다.
요소들의 나열 순서를 반대로 할 수가 있다.
기존 소스에서 d-inline-flex를 d-flexe로 되돌리고, 거기에 flex-row-reverse 클래스를 추가해본다.
<div class="border d-flex d-flex-row-reverse"> <div class="border">영역1</div> <div class="border">영역2</div> <div class="border">영역3</div> </div>
정렬 자체가 오른쪽이 기준이 되고, 오늘쪽에서 왼쪽으로 차례로 나열이 됨을 확인할 수 있다.
4. d-flex-column-reverse
d-flex-row-reverse 대신 d-flex-column-reverse 클래스를 줘본다.
<div class="border d-flex d-flex-column-reverse"> <div class="border">영역1</div> <div class="border">영역2</div> <div class="border">영역3</div> </div>
요소들의 속성이 in-line에서 block으로 바뀌게 되고, 나열 순서가 밑에서 위로 요소들이 배치가 됨을 확인할 수 있다.
5. justify-content-정렬기준
자식 요소들의 정렬 기준을 정의할 수 있다.
정렬기준의 종류는 다음과 같다.
justify-content-start : 왼쪽정렬
justify-content-end : 오른쪽 정렬
justify-content-center : 가운데 정렬
justify-content-between : 양쪽 요소를 좌우에 붙이고 안쪽 요소들을 균일한 간격으로 배치
justify-content-around : 전체 요소를 균일한 간격으로 배치(양쪽여백=간격)
between과 around는 예를 보면 바로 이해가 된다.
각각의 클래스를 적용한 후 결과를 보자.
<div class="border d-flex justify-content-start"> <div class="border">영역1</div> <div class="border">영역2</div> <div class="border">영역3</div> </div>
<div class="border d-flex justify-content-end"> <div class="border">영역1</div> <div class="border">영역2</div> <div class="border">영역3</div> </div>
<div class="border d-flex justify-content-center"> <div class="border">영역1</div> <div class="border">영역2</div> <div class="border">영역3</div> </div>
<div class="border d-flex justify-content-between"> <div class="border">영역1</div> <div class="border">영역2</div> <div class="border">영역3</div> </div>
<div class="border d-flex justify-content-around"> <div class="border">영역1</div> <div class="border">영역2</div> <div class="border">영역3</div> </div>
6. flex-fill
요소들중 flex-fill 클래스가 부여된 요소는 부모영역중 남은 영역을 자신이 차지하게 된다.
만약 여러 요소들에 flex-fill이 부여되어 있다면, 부여되어 있는것끼리 같은 비율로 남은 영역을 다 가져가게 된다.
영역2에 flex-fill을 줘보자.(justify-content-xxx 클래스는 제거를 하자)
<div class="border d-flex"> <div class="border">영역1</div> <div class="border flex-fill">영역2</div> <div class="border">영역3</div> </div>
영역2가 남아있는 영역 모두를 차지하게 된다.
이번에는 영역2와 영역3에 flex-fill 을 줘보자.
<div class="border d-flex"> <div class="border">영역1</div> <div class="border flex-fill">영역2</div> <div class="border flex-fill">영역3</div> </div>
영역2와 영역3이 같은 비율로 화면을 꽉 채우게 된다.
7. order-순서
요소들의 순서를 임의로 정할 수가 있다.
아래와 같이 각 요소에 order-순서 클래스를 줘보자.
<div class="border d-flex"> <div class="border order-2">영역1</div> <div class="border order-1">영역2</div> <div class="border order-3">영역3</div> </div>
요소들의 순서가 order-숫자 순서대로 나열됨을 볼 수 있다.
8. flex-wrap
요소안의 내용이 길면 요소 안의 내용은 줄바꿈이 되게 된다.
하지만, 요소들의 배열 자체는 그대로 유지가 되고 그 안의 내용만 줄바꿈이 된다.
두개의 영역을 좀 길게 해보자
<div class="border d-flex"> <div class="border">영역1 - 긴글 긴글 긴글 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역2 - 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역3</div> </div>
위와 같이 영역안의 내용이 줄바꿈이 되긴 하지만, 영역 자체는 가로로 나열되는 것은 변함이 없다.
여기에 flex-wrap 클래스를 줘보자
<div class="border d-flex flex-wrap"> <div class="border">영역1 - 긴글 긴글 긴글 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역2 - 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역3</div> </div>
위와 같이 영역 자체가 밑으로 내려가게 된다.
9. align-content-기준
만약 플렉스에 높이가 지정이 되어져 있지 않다면, 요소들의 높이가 플렉스의 높이가 된다.
그런데, 플렉스에 높이가 지정이 된다면, 요소들의 높이는 어떻게 해야될지.. 그리고, 요소들이 줄바꿈 될 때는 어떻게 될지에 대한 정의가 필요하다.
먼저 플렉스에 flex-wrap 클래스를 주고, 높이를 지정해보자.
<div class="border d-flex flex-wrap" style="height:200px;"> <div class="border">영역1 - 긴글 긴글 긴글 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역2 - 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역3</div> </div>영역이 넘치지 않도록 화면크기를 조정해서 줄바꿈이 되지 않는 상태를 보면 다음과 같다.
줄바꿈 일어나기 않은 상태
영역 자체의 높이가 플렉스의 높이에 꽉 차게 된다.
이 상태에서 브라우져크기를 줄여서 줄바꿈이 일어나게 해보자.
줄바꿈이 되면서 각각의 영역이 꼭같은 비율로 조정되어 전체 높이가 200px에 맞게 된다.
이렇게 플렉스에 높이를 지정해주게 되면, 지정해주지 않았을때와는 다르게 요소들의 높이가 플렉스의 높이에 맞춰지게 된다.
요소들에 줄수 있는 클래스로는 아래와 같은 클래스를 줄수가 있다.
align-content-start : 상단에 붙은채로 줄바꿈된다.
align-content-end : 하단에 붙은채로 줄바꿈된다.
align-content-center : 줄바꿈된 상태로 가운데정렬된다.
align-content-around : 균일한 간격으로 정렬된다.
align-content-stretch : 높이가 꽉차게 줄바꿈된다.
실제로 해당 클래스를 플렉스에 줘보고 결과를 확인해보면 차이점을 확연히 이해할 수가 있다.
<div class="border d-flex flex-wrap align-content-start" style="height:200px;"> <div class="border">영역1 - 긴글 긴글 긴글 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역2 - 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역3</div> </div>
align-content-start / 줄바꿈전
align-content-start / 줄바꿈후
<div class="border d-flex flex-wrap align-content-end" style="height:200px;"> <div class="border">영역1 - 긴글 긴글 긴글 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역2 - 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역3</div> </div>
align-content-end / 줄바꿈전
align-content-end / 줄바꿈후
<div class="border d-flex flex-wrap align-content-center" style="height:200px;"> <div class="border">영역1 - 긴글 긴글 긴글 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역2 - 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역3</div> </div>
align-content-center / 줄바꿈전
align-content-center / 줄바꿈후
<div class="border d-flex flex-wrap align-content-around" style="height:200px;"> <div class="border">영역1 - 긴글 긴글 긴글 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역2 - 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역3</div> </div>
align-content-around / 줄바꿈전
align-content-around / 줄바꿈후
<div class="border d-flex flex-wrap align-content-stretch" style="height:200px;"> <div class="border">영역1 - 긴글 긴글 긴글 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역2 - 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역3</div> </div>
align-content-stretch / 줄바꿈전
align-content-stretch / 줄바꿈후
align-content-stretch 는 아무 옵션을 주지 않았을때와 꼭같이 동작을 한다.
10. align-items-기준
요소들의 세로 배치를 정한다.
align-items-start : 상단에 붙인다.
align-items-end : 하단에 붙인다.
align-items-center : 가운데 정렬한다.
align-items-baseline : 베이스라인에 배치한다.
align-items-stretch : 세로폭을 꽉 채운다.
실제로 해당 클래스를 플렉스에 줘보고 결과를 확인해보면 align-content-기준과의 차이점을 이해할 수 있을 것이다.
<div class="border d-flex flex-wrap align-items-start" style="height:200px;"> <div class="border">영역1 - 긴글 긴글 긴글 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역2 - 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역3</div> </div>
align-items-start / 줄바꿈전
align-items-start / 줄바꿈후
<div class="border d-flex flex-wrap align-items-end" style="height:200px;"> <div class="border">영역1 - 긴글 긴글 긴글 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역2 - 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역3</div> </div>
align-items-end / 줄바꿈전
align-items-end / 줄바꿈후
<div class="border d-flex flex-wrap align-items-center" style="height:200px;"> <div class="border">영역1 - 긴글 긴글 긴글 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역2 - 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역3</div> </div>
align-items-center / 줄바꿈전
align-items-center / 줄바꿈후
<div class="border d-flex flex-wrap align-items-baseline" style="height:200px;"> <div class="border">영역1 - 긴글 긴글 긴글 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역2 - 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역3</div> </div>
align-items-baseline / 줄바꿈전
align-items-baseline / 줄바꿈후
<div class="border d-flex flex-wrap align-items-stretch" style="height:200px;"> <div class="border">영역1 - 긴글 긴글 긴글 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역2 - 긴글 긴글 긴글 긴글 긴글</div> <div class="border">영역3</div> </div>
align-items-stretch / 줄바꿈전
align-items-stretch / 줄바꿈후
결론적으로는... align-items와 align-content는 유사한것 같다.
11. align-self-기준
9번과 10번에서는 컨테이너에 클래스를 주면서 자식들에게 일괄적으로 규칙을 적용하였는데, 각각의 요소가 독립적으로 동작하게 할 수도 있다.
align-self-start : 상단에 붙인다.
align-self-end : 하단에 붙인다.
align-self-center : 가운데 정렬한다.
align-self-baseline : 베이스라인에 배치한다.
align-self-stretch : 세로폭을 꽉 채운다.
마찬가지로 예제로 확인해보자. ( 보기 편하게 d-inline-flex로 주고, flex-wrap 를 제거하였다. )
<div class="border d-inline-flex" style="height:200px;"> <div class="border align-self-start">영역1</div> <div class="border align-self-end">영역2</div> <div class="border align-self-center">영역3</div> <div class="border align-self-baseline">영역4</div> <div class="border align-self-stretch">영역5</div> </div>
flex-wrap 를 주면 줄바꿈이 되면서 규칙이 적용이 되는데, 정확히 어떤 기준으로 정렬되는지는 잘 모르겠다.
flex-wrap를 주고 직접 확인해보시기 바란다.
출처: https://kongmemo.tistory.com/7 [반갑구만~ 반가와요~]댓글