8장: CSS 프레임워크
CSS 프레임워크는 웹 페이지를 빠르고 효율적으로 개발할 수 있도록 미리 정의된 스타일과 컴포넌트를 제공합니다. 이 장에서는 몇 가지 인기 있는 CSS 프레임워크를 소개하고, 기본 사용법을 설명합니다.
### 8.1 CSS 프레임워크란 무엇인가?
CSS 프레임워크는 미리 작성된 CSS 코드를 제공하여, 웹 페이지의 스타일링 작업을 단순화하고 일관성을 유지하도록 돕습니다. 이러한 프레임워크는 그리드 시스템, 타이포그래피, UI 컴포넌트 등을 포함하여 개발자가 반복적인 작업을 줄이고, 빠르게 프로토타입을 만들 수 있게 합니다.
### 8.2 Bootstrap 소개
Bootstrap은 가장 널리 사용되는 CSS 프레임워크 중 하나로, 트위터에서 개발되었습니다. 반응형 디자인을 지원하며, 다양한 컴포넌트와 유틸리티 클래스를 제공합니다.
#### 8.2.1 설치 및 설정
Bootstrap을 사용하기 위해서는 HTML 문서에 Bootstrap CSS 파일을 포함해야 합니다. CDN(Content Delivery Network)을 사용하면 쉽게 사용할 수 있습니다.
HTML 코드:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 예제</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>안녕하세요, Bootstrap!</h1>
<button class="btn btn-primary">클릭하세요</button>
</div>
</body>
</html>
#### 8.2.2 그리드 시스템
Bootstrap의 그리드 시스템은 12개의 열로 구성되며, 반응형 레이아웃을 쉽게 구성할 수 있게 합니다.
HTML 코드:
<div class="container">
<div class="row">
<div class="col-md-4">열 1</div>
<div class="col-md-4">열 2</div>
<div class="col-md-4">열 3</div>
</div>
</div>
#### 8.2.3 버튼
Bootstrap은 다양한 스타일의 버튼을 제공합니다. 클래스 이름을 사용하여 버튼 스타일을 지정할 수 있습니다.
HTML 코드:
<button class="btn btn-primary">Primary 버튼</button>
<button class="btn btn-secondary">Secondary 버튼</button>
<button class="btn btn-success">Success 버튼</button>
### 8.3 Foundation 소개
Foundation은 ZURB에서 개발한 또 다른 인기 있는 CSS 프레임워크로, 유연성과 사용자 정의 가능성을 강조합니다.
#### 8.3.1 설치 및 설정
Foundation을 사용하기 위해 HTML 문서에 Foundation CSS 파일을 포함해야 합니다. CDN을 사용하여 쉽게 사용할 수 있습니다.
HTML 코드:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation 예제</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/css/foundation.min.css">
</head>
<body>
<div class="grid-container">
<h1>안녕하세요, Foundation!</h1>
<button class="button">클릭하세요</button>
</div>
</body>
</html>
#### 8.3.2 그리드 시스템
Foundation의 그리드 시스템은 유연한 레이아웃 구성을 지원합니다.
HTML 코드:
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell small-4">열 1</div>
<div class="cell small-4">열 2</div>
<div class="cell small-4">열 3</div>
</div>
</div>
#### 8.3.3 버튼
Foundation은 다양한 스타일의 버튼을 제공합니다. 클래스 이름을 사용하여 버튼 스타일을 지정할 수 있습니다.
HTML 코드:
<button class="button primary">Primary 버튼</button>
<button class="button secondary">Secondary 버튼</button>
<button class="button success">Success 버튼</button>
### 8.4 Bulma 소개
Bulma는 Flexbox 기반의 CSS 프레임워크로, 모던하고 깔끔한 디자인을 제공합니다.
#### 8.4.1 설치 및 설정
Bulma를 사용하기 위해 HTML 문서에 Bulma CSS 파일을 포함해야 합니다. CDN을 사용하여 쉽게 사용할 수 있습니다.
HTML 코드:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bulma 예제</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.1/css/bulma.min.css">
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">안녕하세요, Bulma!</h1>
<button class="button is-primary">클릭하세요</button>
</div>
</section>
</body>
</html>
#### 8.4.2 그리드 시스템
Bulma의 그리드 시스템은 Flexbox를 기반으로 하며, 다양한 레이아웃을 쉽게 구성할 수 있게 합니다.
HTML 코드:
<div class="columns">
<div class="column">열 1</div>
<div class="column">열 2</div>
<div class="column">열 3</div>
</div>
#### 8.4.3 버튼
Bulma는 다양한 스타일의 버튼을 제공합니다. 클래스 이름을 사용하여 버튼 스타일을 지정할 수 있습니다.
HTML 코드:
<button class="button is-primary">Primary 버튼</button>
<button class="button is-link">Link 버튼</button>
<button class="button is-info">Info 버튼</button>
### 연습 문제
1. Bootstrap을 사용하여 반응형 레이아웃을 구성하고, 다양한 스타일의 버튼을 추가해 보세요.
2. Foundation을 사용하여 그리드 시스템과 버튼을 활용한 웹 페이지를 만들어 보세요.
3. Bulma를 사용하여 Flexbox 기반의 레이아웃을 구성하고, 다양한 UI 컴포넌트를 추가해 보세요.
4. 각 프레임워크의 문서를 참고하여 추가적인 컴포넌트와 유틸리티 클래스를 사용해 보세요.
댓글
댓글 쓰기