부트스트랩 - 사이즈 조정: 초보자를 위한 종합 가이드

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 부트스트랩 사이즈 조정의 흥미로운 세상으로 뛰어들어 볼 거예요. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 여정을 단계별로 안내해 드릴게요. 프로그래밍에 새로운 사람이라면 걱정하지 마세요 - 우리는 기초부터 시작해 점진적으로 올라갈 거예요. 그러니 커피(또는 차, 당신이 좋아하는 것이라면)를 한 잔 챙겨서, 시작해 보세요!

부트스트랩 사이즈 조정이란?

정밀한 내용으로 들어가기 전에, 부트스트랩 사이즈 조정이 무엇인지 이해해 보겠습니다. 방을 꾸미는 것을 상상해 보세요. 어떤 가구는 완벽하게 맞아야 하고, 어떤 것은 공간의 반을 차지하고, 다른 것들은 방의 크기에 따라 조정되어야 합니다. 부트스트랩 사이즈 조정은 웹 페이지의 요소들에 이와 같은 작업을 도와줍니다!

부모에 상대적인 사이즈 조정

먼저 부모 요소에 상대적인 사이즈 조정을 해보겠습니다. 이는 벽에 걸린 그림이占据할 공간을 결정하는 것과 같습니다.

너비 클래스

부트스트랩은 부모 요소의 너비를 퍼센트로 설정할 수 있는 클래스를 제공합니다. 다음은 이러한 클래스의 표입니다:

클래스	설명
w-25	너비 25%
w-50	너비 50%
w-75	너비 75%
w-100	너비 100%
w-auto	자동 너비

이들을 실제로 보겠습니다:

<div class="container">
<div class="w-25 p-3" style="background-color: #eee;">너비 25%</div>
<div class="w-50 p-3" style="background-color: #ddd;">너비 50%</div>
<div class="w-75 p-3" style="background-color: #ccc;">너비 75%</div>
<div class="w-100 p-3" style="background-color: #bbb;">너비 100%</div>
<div class="w-auto p-3" style="background-color: #aaa;">자동 너비</div>
</div>

이 예제에서 우리는 다섯 개의 div 요소를 만들어 각각 다른 너비 클래스를 적용합니다. p-3 클래스는 가시성을 위해 패딩을 추가합니다. 각 div 요소는 부모 컨테이너의 너비의 다른 퍼센트를 차지하게 됩니다.

높이 클래스

비슷하게, 부트스트랩은 높이를 설정할 수 있는 클래스도 제공합니다:

클래스	설명
h-25	높이 25%
h-50	높이 50%
h-75	높이 75%
h-100	높이 100%
h-auto	자동 높이

다음은 이러한 클래스의 사용 예제입니다:

<div style="height: 200px;">
<div class="h-25 d-inline-block" style="width: 120px; background-color: #eee;">높이 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: #ddd;">높이 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: #ccc;">높이 75%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: #bbb;">높이 100%</div>
<div class="h-auto d-inline-block" style="width: 120px; background-color: #aaa;">자동 높이</div>
</div>

이 예제에서 우리는 부모 div 요소에 고정된 높이를 설정하고, 자식 요소에 높이 클래스를 적용합니다. d-inline-block 클래스는 이 div 요소들을 인라인으로 표시합니다.

뷰포트 너비에 상대적인 사이즈 조정

이제 뷰포트 너비에 상대적인 사이즈 조정에 대해 이야기해 보겠습니다. 이는 다양한 크기의 방에 맞춰 TV 화면을 조정하는 것과 같습니다.

부트스트랩은 vw 단위를 사용합니다. vw는 "뷰포트 너비"를 의미합니다. 다음은 몇 가지 클래스입니다:

클래스	설명
vw-100	너비 100vw
min-vw-100	최소 너비 100vw
max-vw-100	최대 너비 100vw

다음은 예제입니다:

<div class="vw-100" style="background-color: #eee;">이 div는 100vw 너비입니다.</div>

이 div는 항상 뷰포트와 동일한 너비를 유지하며, 브라우저 창을 크기 조정할 때도 그에 맞춰 변합니다.

뷰포트 높이에 상대적인 사이즈 조정

뷰포트 너비와 유사하게, 우리는 vh 단위를 사용하여 요소를 뷰포트 높이에 상대적으로 설정할 수 있습니다.

클래스	설명
vh-100	높이 100vh
min-vh-100	최소 높이 100vh
max-vh-100	최대 높이 100vh

다음은 이러한 클래스의 사용 예제입니다:

<div class="vh-100" style="background-color: #eee;">이 div는 100vh 높이입니다.</div>

이 div는 항상 뷰포트와 동일한 높이를 유지하며, 브라우저 창을 크기 조정할 때도 그에 맞춰 변합니다.

뷰포트에 상대적인 사이즈 조정

마지막으로, 뷰포트의 너비와 높이에 상대적인 사이즈 조정을 살펴보겠습니다.

최소 너비 100%

<div class="min-vw-100" style="background-color: #eee;">100vw</div>

이 div는 최소한 뷰포트와 동일한 너비를 유지하지만, 내용이 더 많아지면 확장할 수 있습니다.

최소 높이 100%

<div class="min-vh-100" style="background-color: #eee;">100vh</div>

비슷하게, 이 div는 최소한 뷰포트와 동일한 높이를 유지하지만, 필요하다면 확장할 수 있습니다.

모든 것을 통합해 보자

이제 우리가 다룬 모든 사이즈 조정 옵션을 통합하여 재미있는 예제를 만들어 보겠습니다:

<div class="container">
<div class="row">
<div class="col-md-6">
<div class="w-75 p-3 mb-2" style="background-color: #e9ecef;">
저는 부모 요소에 대해 75% 너비입니다!
</div>
<div class="h-50 p-3" style="background-color: #ced4da;">
저는 부모 요소에 대해 50% 높이입니다!
</div>
</div>
<div class="col-md-6">
<div class="vw-100 p-3 mb-2" style="background-color: #adb5bd;">
저는 뷰포트와 동일한 너비입니다!
</div>
<div class="vh-50 p-3" style="background-color: #6c757d; color: white;">
저는 뷰포트의 반만큼 높이입니다!
</div>
</div>
</div>
</div>

이 예제에서 우리는 너비, 높이, 그리고 뷰포트에 상대적인 사이즈 조정을 결합하여 다양하고 반응형 레이아웃을 만듭니다. 브라우저 창을 크기 조정해 보세요. 요소들이 어떻게 적응하는지 확인해 보세요!

그리고 여러분! 여러분이 부트스트랩 사이즈 조정의 세상으로的第一步을踏み出しました。 연습이 완벽을 이루는 것이니, 자신의 프로젝트에서 이 클래스들을 실험해 보지 마세요. 얼마 지나지 않아 프로처럼 반응형 레이아웃을 만드는 것을 배울 것입니다!

幸福なコーディングをし、あなたのウェブサイトが常に完璧にフィットすることを祈っています! ?

Credits: Image by storyset