[Bootstrap 4] 공통 클래스 2 (길이, 여백, 그림자, Block)

1. 길이 (width / height)

• w-퍼센트 : 가로 길이를 지정된 퍼센트 만큼으로 지정함
• h-퍼센트 : 세로 길이를 지정된 퍼센트 만큼으로 지정함
• mv-100 : 가로 최대 크기를 100%로 설정함
• mh-100 : 세로 최대 크기를 100%로 설정함

<style>	
	.box3{
		height: 30px;
		margin-bottom: 5px;
	}

	.box4{
		width: 30px;
		display: inline-block;
	}
</style>

<h3>길이</h3>
<div class="bg-secondary" style="height: 215px; padding: 5px;">
    <div class="box3 bg-warning">none</div>
    <div class="box3 bg-warning w-25">w-25</div>
    <div class="box3 bg-warning w-50">w-50</div>
    <div class="box3 bg-warning w-75">w-75</div>
    <div class="box3 bg-warning w-100">w-100</div>
    <div class="box3 bg-warning mw-100" style="width: 2000px;">mw-100</div>
</div>
<hr>

<div class="bg-secondary" style="height: 215px; padding: 5px;">
    <div class="box4 bg-warning">none</div>
    <div class="box4 bg-warning h-25">h-25</div>
    <div class="box4 bg-warning h-50">h-50</div>
    <div class="box4 bg-warning h-75">h-75</div>
    <div class="box4 bg-warning h-100">h-100</div>
    <div class="box4 bg-warning mh-100" style="height: 2000px;">mh-100</div>
</div>
<hr>

2. 여백 (margin / padding)

여백은 다음과 같은 양식으로 설정합니다.

[내부,외부][방향]-[크기]

• m : 외부 여백을 설정한다 (margin)
• p : 내부 여백을 설정한다 (padding)
• t, b, r, l, x, y : 방향을 설정한다. 생략시 모든 방향
• 0, 1, 2, 3, 4, 5 : 0em, 0.25em, 0.5em, 1em, 1.5em, 3em 사이즈로 설정됨

<h3>내부 여백</h3>
<div class="box border border-danger">
    <div class="bg-warning w-100 h-100">none</div>
</div>
<div class="box border border-danger p-3">
    <div class="bg-warning w-100 h-100">p-3</div>
</div>
<div class="box border border-danger pt-3 pb-3">
    <div class="bg-warning w-100 h-100">pt-3, pb-3</div>
</div>
<div class="box border border-danger pr-3 pl-3">
    <div class="bg-warning w-100 h-100">pr-3, pl-3</div>
</div>
<div class="box border border-danger px-3 py-3">
    <div class="bg-warning w-100 h-100">px-3, py-3</div>
</div>
<hr>

<h3>외부 여백</h3>
<div class="box bg-warning"></div>
<div class="box bg-warning m-3"></div>
<div class="box bg-warning"></div>
<hr>

<div class="box bg-warning"></div>
<div class="box bg-warning mt-1 mr-2 mb-3 ml-4"></div>
<div class="box bg-warning"></div>
<hr>

<div class="box bg-warning"></div>
<div class="box bg-warning mx-2"></div>
<div class="box bg-warning"></div>
<hr>

<div class="box bg-warning"></div>
<div class="box bg-warning my-2"></div>
<div class="box bg-warning"></div>
<hr>

<div class="box2 bg-warning mx-auto"></div>
<hr>

3. 그림자 (shadow)

• shadow : 그림자를 설정
• shadow-sm
• shadow-lg

<h3>그림자</h3>
<div class="box bg-warning"></div>
<div class="box bg-warning shadow-none"></div>
<div class="box bg-warning shadow-sm"></div>
<div class="box bg-warning shadow"></div>
<div class="box bg-warning shadown-lg"></div>
<hr>

4. 안보이게 하기 (visible / invisible)

• visible : 태그 요소를 보이게 한다
• invisible : 태그 요소를 보이지 않게 한다

<h3>안보이게 하기</h3>
<div class="box bg-warning visible"></div>
<div class="box bg-warning invisible"></div>
<hr>

5. Block 요소로 만들기

• html에서 div, h1 ~ h6 같은 태그는 자신의 영역을 잡고 다음 태그들은 아래로 내려준다.
• 이러한 태그 요소를 Block 요소라고 부르며 Block 요소가 아닌 태그들을 Block 요소로 만들어주는 클래스를 제공합니다.
• d-block : 블록 요소로 만들어준다.
• d-크기-block : Block을 반응형으로 만들어줌
  • d-sm-block
  • d-md-block
  • d-lg-block
  • d-xl-block

<h3>Block 요소로 만들기</h3>
<span class="bg-info d-block">d-block</span>
<span class="bg-info d-sm-block">d-sm-block</span>
<span class="bg-info d-md-block">d-md-block</span>
<span class="bg-info d-lg-block">d-lg-block</span>
<span class="bg-info d-xl-block">d-xl-block</span>

위 결과는 브라우저 창을 최대로 했을때 결과입니다.

위 결과는 브라우저 창을 절반으로 했을 때 결과입니다. d-lg-block과 d-xl-block은 inline 요소로 돌아간 것을 볼 수 있습니다.

 

References

source code : https://github.com/yonghwankim-dev/Bootstrap_study/tree/main/UtilityClass/src/main/webapp
[인프런] 윤재성의 Bootstrap 4 & 3 Framework Tutorial