본문으로 건너뛰기

Bulma 개요.

Bulma는 반응형 그리드 시스템과 사용 준비가 된 구성 요소 세트를 제공하는 인기있는 오픈 소스 CSS 프레임 워크입니다. 이는 유연하고 사용하기 쉬운 도구 세트를 제공하여 웹 개발을 단순화하는 것을 목표로합니다. 이 튜토리얼에서는 Bulma CSS의 소개, 역사, 기능 및 예제를 살펴 보겠습니다.

Bulma CSS 소개​

Bulma CSS는 가벼우면서도 현대적인 CSS 프레임 워크로 개발자가 신속하게 반응형 웹 디자인을 만들 수 있도록합니다. 이는 모바일 우선 접근 방식을 따르며, 모바일 기기에서 데스크톱까지 모든 화면 크기에서 웹 사이트가 멋지게 보이도록합니다.

Bulma CSS의 역사​

Bulma는 Jeremy Thomas에 의해 2016 년에 만들어졌으며 그 이후로 상당한 인기를 얻었습니다. 이는 초기에는 Bootstrap 및 Foundation과 같은 다른 CSS 프레임 워크에서 영감을 받았지만 더 간단하고 사용자 정의 가능한 대안을 제공하기 위해 목표로했습니다.

Bulma CSS의 기능​

반응형 그리드 시스템​

Bulma의 주요 기능 중 하나는 반응형 그리드 시스템입니다. 이를 사용하면 개발자는 화면 크기에 따라 자동으로 조정되는 유연한 레이아웃을 만들 수 있습니다. 그리드 시스템은 12 개의 열 레이아웃을 기반으로하며 다양한 중단점에서 열의 너비를 정의하는 클래스를 제공합니다.

<div class="columns">
  <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
    <!-- 내용 -->
  </div>
  <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
    <!-- 내용 -->
  </div>
</div>

위의 예에서 columns 클래스는 행을 생성하고 column 클래스는 다양한 중단점에서 각 열의 너비를 정의합니다. is-half-mobile 클래스는 모바일 장치에서 화면 너비의 절반을 차지하도록하고, is-one-third-tablet은 태블릿에서 1/3을 차지하도록하며, is-one-quarter-desktop은 데스크톱에서 1/4을 차지하도록합니다.

사용 준비가 된 구성 요소​

Bulma는 웹 디자인에 쉽게 통합 할 수있는 다양한 사용 준비가 된 구성 요소를 제공합니다. 일반적으로 사용되는 구성 요소 중 일부는 다음과 같습니다.

  • 네비게이션 바: navbar 구성 요소는 페이지 상단에 반응 형 탐색 막대를 생성합니다.
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <!-- 로고 및 기타 브랜딩 -->
  </div>
  <div class="navbar-menu">
    <!-- 탐색 링크 -->
  </div>
</nav>
  • 버튼: Bulma는 다양한 버튼 스타일과 크기를 제공하며 다른 클래스를 사용하여 사용자 정의 할 수 있습니다.
<button class="button is-primary">기본 버튼</button>
<button class="button is-success is-large">큰 성공 버튼</button>
  • 양식 요소: Bulma는 입력 필드, 체크 박스 및 라디오 버튼과 같은 양식 요소에 대한 스타일을 제공합니다.
<input class="input" type="text" placeholder="사용자 이름">
<input class="checkbox" type="checkbox" id="checkbox">
<label for="checkbox">기억하기</label>

사용자 정의 및 확장 가능​

Bulma CSS는 매우 사용자 정의 가능하며 프로젝트 요구 사항에 맞게 기본 스타일을 수정할 수 있습니다. 색상, 글꼴 및 기타 시각적 측면을 변경하기 위해 재정의 할 수있는 다양한 SASS 변수를 제공합니다.

Bulma CSS 예제​

Bulma CSS의 강력하고 유연성을 보여주기 위해 몇 가지 예제를 살펴 보겠습니다.

예제 1 : 히어로 섹션​

히어로 섹션은 많은 웹 사이트에서 사용되는 일반적인 구성 요소입니다. 일반적으로 큰 헤딩, 서브 헤딩 및 호출 대응 버튼이 포함됩니다. Bulma는 이 섹션을 만드는 것을 간소화하기 위해 hero 클래스를 제공합니다.

<section class="hero is-primary is-bold">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Bulma CSS에 오신 것을 환영합니다
      </h1>
      <h2 class="subtitle">
        가벼우면서도 강력한 CSS 프레임 워크
      </h2>
      <a class="button is-white is-large" href="#">시작하기</a>
    </div>
  </div>
</section>

위의 코드는 주요 배경 색상, 굵은 텍스트 및 흰색 호출 대응 버튼이있는 히어로 섹션을 만듭니다.

예제 2 : 가격 표​

가격 표는 구독 기반 서비스를 제공하는 웹 사이트에서 일반적으로 찾을 수 있습니다. Bulma는 세련된 가격 표를 만들기 위해 사용할 수있는 table 클래스를 제공합니다.

<table class="table is-bordered is-striped is-narrow is-hoverable">
  <thead>
    <tr>
      <th>Plan</th>
      <th>Features</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Basic</td>
      <td>기능 1, 기능 2</td>
      <td>$9.99/월</td>
    </tr>
    <tr>
      <td>Pro</td>
      <td>기능 1, 기능 2, 기능 3</td>
      <td>$19.99/월</td>
    </tr>
  </tbody>
</table>

위의 예에서 table 클래스는 표에 스타일을 추가하며, is-bordered, is-striped, is-narrow, is-hoverable 클래스는 표의 모양과 기능을 더욱 향상시킵니다.

Bulma CSS에 대해 자세히 알아보고 포괄적인 문서를 살펴 보려면 공식 웹 사이트를 방문하십시오.