3-2. 너비와 높이
■ 박스의 너비
박스의 너비를 설정하는 클래스에는 .w-25. .w-50, .w-75, .w-100, .w-auto, .mw-100 이 있습니다.
<div class="container mt-3">
<h3>박스 너비</h3>
<div class="w-25 bg-info my-1">width : 25%</div>
<div class="w-50 bg-info my-1">width : 50%</div>
<div class="w-75 bg-info my-1">width : 75%</div>
<div class="w-100 bg-info my-1">width : 100%</div>
<div class="w-auto bg-info my-1">width : auto</div>
<div class="mw-100 bg-info my-1">max-width : 100%</div>
</div>
ex3-5.html의 실행 결과
■ 박스의 높이
박스의 높이를 설정하는 클래스에는 .h-25. .h-50, .h-75, .h-100, .h-auto, .mh-100 이 있습니다.
<div class="container mt-3" style="height:200px;">
<h3>박스 높이</h3>
<div class="h-25 d-inline-block bg-info my-1">height : 25%</div>
<div class="h-50 d-inline-block bg-info my-1">height : 50%</div>
<div class="h-75 d-inline-block bg-info my-1">height : 75%</div>
<div class="h-100 d-inline-block bg-info my-1">height : 100%</div>
<div class="h-auto d-inline-block bg-info my-1">height : auto</div>
<div class="mh-100 d-inline-block bg-info my-1" style="height:800px;">max-height : 100%</div>
</div>
ex3-6.html의 실행 결과
