Bulma 개요
Bulma 개요 (Overview of Bulma)
Bulma는 CSS 라이브러리예요. HTML 코드를 꾸미는 데 도움을 주는 CSS 클래스들을 제공하지요. 이번 문서에서는 Bulma를 처음 시작할 때 필요한 기본 개념과 스타터 템플릿을 하나씩 살펴봐요.
출처: 문서
본문
Bulma는 CSS 라이브러리예요. 즉, HTML 코드를 스타일링할 수 있도록 도와주는 CSS 클래스를 제공합니다. Bulma를 사용하려면 다음 두 가지 방법 중 하나를 선택하면 돼요.
- 미리 컴파일된
.css파일을 사용하거나 - 필요에 맞게 Bulma를 커스터마이징할 수 있도록
.scss파일을 설치하는 방법이에요.
코드 요구사항 (Code requirements)
Bulma가 제대로 동작하려면 웹페이지를 반응형으로 만들어야 해요.
- HTML5 doctype을 사용하세요.
<!DOCTYPE html>
- 반응형 뷰포트 메타 태그를 추가하세요.
<meta name="viewport" content="width=device-width, initial-scale=1">
스타터 템플릿 (Starter template)
바로 시작하고 싶다면 다음 HTML 스타터 템플릿을 사용하면 돼요. 이 코드를 파일에 복사해서 컴퓨터에 저장하기만 하면 됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">
Hello World
</h1>
<p class="subtitle">
My first website with <strong>Bulma</strong>!
</p>
</div>
</section>
</body>
</html>