부트스트랩 - 퍼지: 완벽한 간격의 비밀 무기
안녕하세요, 미래의 웹 디자인 슈퍼스타 여러분! ? 부트스트랩 퍼지의 세계를 탐험하는 흥미로운 여정에 여러분을 안내하게 되어 기쁩니다. '반응형 디자인'이 무응답한 학생들에게 더 큰 소리를 지르는 것을 의미했던 시절을 기억하는(물론 몇 년 전의 일이긴 하지만요 ?) 컴퓨터 과학 교사로서, 이 게임 체인저적인 개념을 여러분과 공유하게 되어 설레합니다.
퍼지는 무엇인가요?
이제부터 기본 개념을 설명해 보겠습니다. 웹 디자인의 세계에서 퍼지는 레이아웃의 열 사이의 공간을 의미합니다. 퍼지는 내용이 짧아 보이지 않도록 공간을 유지하는 것이如同에levator에서 사람들 간의 적절한 어깨 너비 거리처럼, 편안함을 위해서는 필요하지만 너무 멀어서는 안 됩니다!
이제 부트스트랩이 퍼지를 쉽게 작업할 수 있도록 해주는 방법을 탐구해 보겠습니다.
작동 방식
부트스트랩의 퍼지 시스템은 몇 가지 핵심 원칙을 기반으로 합니다:
- 퍼지는 수평 패딩을 사용하여 생성됩니다.
- 행(row)은 열(column)의 내용을 정렬하기 위해 음수 마진을 가집니다.
- 열은 양수 패딩을 가지고 있어서 공간을 만듭니다.
간단한 예제를 보겠습니다:
<div class="container">
<div class="row">
<div class="col">칼럼 1</div>
<div class="col">칼럼 2</div>
<div class="col">칼럼 3</div>
</div>
</div>이 설정에서 부트스트랩은 자동으로 열 사이에 퍼지를 추가합니다. 마법처럼 보이지만, 실제로 작동 방식을 이해하는 것이 더 나은 점입니다!
수평 퍼지
이제 수평 퍼지를 손에 대보겠습니다. 부트스트랩은 퍼지의 너비를 제어할 수 있는 클래스를 제공합니다. 클래스는 gx-* 패턴을 따르며, *는 0에서 5까지의 숫자입니다.
<div class="container">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">사용자 정의 칼럼 패딩</div>
</div>
<div class="col">
<div class="p-3 border bg-light">사용자 정의 칼럼 패딩</div>
</div>
</div>
</div>이 예제에서 gx-5는 더 넓은 수평 퍼지를 생성합니다. 내용이 조금 더 여유롭게 보이도록 하는 것입니다. 이 값을 조정하여 디자인에 가장 적합한 균형을 찾을 수 있습니다.
오버플로 기능 사용
때로는 퍼지를 컨테이너의 경계를 벗어나게 하고 싶을 수 있습니다. 부트스트랩은 overflow-hidden 클래스로 이를 지원합니다:
<div class="container overflow-hidden">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">사용자 정의 칼럼 패딩</div>
</div>
<div class="col">
<div class="p-3 border bg-light">사용자 정의 칼럼 패딩</div>
</div>
</div>
</div>이 트릭은 퍼지가 컨테이너의 가장자리에서도 일관성 있게 보이도록 합니다. 테이블クロ스가 모든 쪽에서 균형 있게 매달린 것처럼!
수직 퍼지
수평 간격이 좋지만, 수직 간격은 어떻게 되는지요? gy-* 클래스를 사용하세요:
<div class="container">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">사용자 정의 칼럼 패딩</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">사용자 정의 칼럼 패딩</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">사용자 정의 칼럼 패딩</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">사용자 정의 칼럼 패딩</div>
</div>
</div>
</div>이 예제에서 gy-5는 행(row) 사이에 수직 간격을 추가합니다. 카드나 이미지 그리드에 일관된 간격을 만드는 데 적합합니다.
수평 및 수직 퍼지
둘 다를 원하시나요? 수평과 수직 퍼지를 결합할 수 있습니다:
<div class="container">
<div class="row g-5">
<div class="col-6">
<div class="p-3 border bg-light">사용자 정의 칼럼 패딩</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">사용자 정의 칼럼 패딩</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">사용자 정의 칼럼 패딩</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">사용자 정의 칼럼 패딩</div>
</div>
</div>
</div>g-5 클래스는 gx-5와 gy-5의 준말로, 수평과 수직 퍼지를 모두 추가합니다. 디자인에 적절한 수평과 수직 간격을 주는 것입니다!
행 열 퍼지
부트스트랩은 행 열(row columns)에 퍼지를 설정할 수 있도록 허용합니다. 이는 가변 열 수를 작업할 때 특히 유용합니다:
<div class="container">
<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
<div class="col">
<div class="p-3 border bg-light">행 열</div>
</div>
<div class="col">
<div class="p-3 border bg-light">행 열</div>
</div>
<div class="col">
<div class="p-3 border bg-light">행 열</div>
</div>
<div class="col">
<div class="p-3 border bg-light">행 열</div>
</div>
<div class="col">
<div class="p-3 border bg-light">행 열</div>
</div>
</div>
</div>이 예제는 다양한 화면 크기에 따라 퍼지 크기를 달리 적용하는 반응형 레이아웃을 생성합니다. 작은 아파트에서 넓은 집까지, 환경에 맞게 가구를 배치하는 것처럼!
퍼지 제거
때로는 퍼지를 완전히 제거하고 싶을 수 있습니다. 부트스트랩은 g-0 클래스로 이를 쉽게 할 수 있게 해줍니다:
<div class="row g-0">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>이렇게 하면 열 사이의 모든 간격을 제거하여 이음새 없는 레이아웃을 만듭니다. 가장자리에서 가장자리로 이어지는 디자인이나 내용이 연속적으로 흐르는 데 적합합니다.
퍼지 방법 체트 시트
이제 우리가 다룰 퍼지 방법을 요약한 유용한 표를 제공합니다:
| 방법 | 클래스 | 설명 |
|---|---|---|
| 수평 퍼지 | gx-* |
열 사이에 수평 간격 추가 |
| 수직 퍼지 | gy-* |
행 사이에 수직 간격 추가 |
| 양방향 | g-* |
수평 및 수직 퍼지 추가 |
| 퍼지 제거 | g-0 |
모든 퍼지 제거 |
| 반응형 퍼지 |
g-lg-*, gx-md-*, 등 |
특정 브레이크포인트에서 퍼지 적용 |
| 오버플로 숨김 | overflow-hidden |
퍼지가 가장자리에서 수평 스크롤을 만들지 않도록 |
이제 여러분은 부트스트랩 레이아웃에서 공간을 조작하는 데 필요한 지식을 갖추었습니다. 훌륭한 디자인은 요소들 사이의 공간과 마찬가지로 요소들 자체와 관련이 있습니다. 그러므로 퍼지를 자유롭게 실험하고, 호기심을 유지하며, 완벽한 레이아웃을 찾아보세요! 여러분의 완벽한 레이아웃은 단 몇 개의 클래스만으로 가까워질 것입니다!
마무리하면서, 한 학생이 퍼지에 대해 배운 후 웹 디자인을 새로운 시각으로 본 이야기를 떠올립니다. 그는 "이제 나는 테트리스를 하면서 블록 사이의 공간을 조정할 수 있다는 것을 알게 되었어요!"라고 했습니다. ?
계속 연습하고, 호기심을 유지하며, 다양한 퍼지 크기로 실험하지 마세요! 여러분의 완벽한 레이아웃은 곧 여러분의 손에 있을 것입니다!
Credits: Image by storyset