Bulma를 이용한 요소 정렬 - Alignment 클래스 활용법

수평 정렬

가운데 정렬

수평 가운데 정렬은 columns 클래스와 is-centered 클래스를 함께 사용하여 구현할 수 있습니다. columns 클래스는 요소들을 컬럼 기반으로 정렬할 때 사용하며, is-centered 클래스는 요소들을 수평으로 가운데로 정렬할 때 사용합니다.

<div class="columns is-centered">
  <div class="column is-half">
    This element is horizontally centered.
  </div>
</div>

왼쪽 정렬

수평 왼쪽 정렬은 columns 클래스와 is-left 클래스를 함께 사용하여 구현할 수 있습니다. is-left 클래스는 요소들을 수평으로 왼쪽으로 정렬할 때 사용합니다.

<div class="columns is-left">
  <div class="column is-half">
    This element is horizontally left-aligned.
  </div>
</div>

오른쪽 정렬

수평 오른쪽 정렬은 columns 클래스와 is-right 클래스를 함께 사용하여 구현할 수 있습니다. is-right 클래스는 요소들을 수평으로 오른쪽으로 정렬할 때 사용합니다.

<div class="columns is-right">
  <div class="column is-half">
    This element is horizontally right-aligned.
  </div>
</div>

수직 정렬

가운데 정렬

수직 가운데 정렬은 level 클래스와 is-mobile-centered, is-desktop-centered 클래스를 함께 사용하여 구현할 수 있습니다. level 클래스는 요소들을 수직으로 배열할 때 사용하며, is-mobile-centered 클래스는 모바일 화면에서 요소들을 수직으로 가운데로 정렬할 때 사용하고, is-desktop-centered 클래스는 데스크톱 화면에서 요소들을 수직으로 가운데로 정렬할 때 사용합니다.

<nav class="level is-mobile-centered is-desktop-centered">
  <div class="level-item has-text-centered">
    <p class="heading">Home</p>
  </div>
  <div class="level-item has-text-centered">
    <p class="heading">About</p>
  </div>
  <div class="level-item has-text-centered">
    <p class="heading">Contact</p>
  </div>
</nav>

맨 위 정렬

수직 맨 위 정렬은 level 클래스와 is-mobile-top, is-desktop-top 클래스를 함께 사용하여 구현할 수 있습니다. is-mobile-top 클래스는 모바일 화면에서 요소들을 수직으로 맨 위로 정렬할 때 사용하고, is-desktop-top 클래스는 데스크톱 화면에서 요소들을 수직으로 맨 위로 정렬할 때 사용합니다.

<nav class="level is-mobile-top is-desktop-top">
  <div class="level-item has-text-centered">
    <p class="heading">Home</p>
  </div>
  <div class="level-item has-text-centered">
    <p class="heading">About</p>
  </div>
  <div class="level-item has-text-centered">
    <p class="heading">Contact</p>
  </div>
</nav>

맨 아래 정렬

수직 맨 아래 정렬은 level 클래스와 is-mobile-bottom, is-desktop-bottom 클래스를 함께 사용하여 구현할 수 있습니다. is-mobile-bottom 클래스는 모바일 화면에서 요소들을 수직으로 맨 아래로 정렬할 때 사용하고, is-desktop-bottom 클래스는 데스크톱 화면에서 요소들을 수직으로 맨 아래로 정렬할 때 사용합니다.

<nav class="level is-mobile-bottom is-desktop-bottom">
  <div class="level-item has-text-centered">
    <p class="heading">Home</p>
  </div>
  <div class="level-item has-text-centered">
    <p class="heading">About</p>
  </div>
  <div class="level-item has-text-centered">
    <p class="heading">Contact</p>
  </div>
</nav>

위 코드에서 볼 수 있듯이, 수직 맨 아래 정렬은 is-mobile-bottom 클래스와 is-desktop-bottom 클래스를 사용하여 구현할 수 있습니다. 이 외에도 수직 정렬을 위한 다양한 클래스가 Bulma에서 제공되므로, 상황에 맞게 활용하면 원하는 레이아웃을 쉽게 구현할 수 있습니다.