본문 바로가기
프로그래밍/Bootstrap

2. Bootstrap 설치와 시작하기: 초보자도 쉽게 따라하는 가이드

by 완소루피 2024. 11. 12.
728x90
반응형

안녕하세요! 오늘은 Bootstrap을 처음 시작하는 분들을 위한 설치와 초기 설정 방법에 대해 설명드리려고 해요. Bootstrap은 웹 디자인을 쉽게 만들어주는 강력한 프레임워크로, HTML과 CSS를 사용해 반응형 웹사이트를 빠르게 구성할 수 있도록 도와줘요. 이 글에서는 Bootstrap을 설치하는 방법과, 기본 파일 구조 및 초기 설정 방법에 대해 소개할게요.

1. Bootstrap 설치 방법

Bootstrap을 설치하는 방법에는 CDN을 이용한 방법과 직접 파일을 다운로드하는 방법 두 가지가 있어요. 상황에 맞게 원하는 방법을 선택해서 사용하면 됩니다.

(1) CDN을 이용한 설치

CDN(Content Delivery Network)을 통해 Bootstrap을 간편하게 불러올 수 있어요. 아래 코드를 HTML 파일의 <head> 태그 안에 추가하면 Bootstrap의 스타일과 스크립트를 바로 사용할 수 있습니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 시작하기</title>
  <!-- Bootstrap CSS CDN -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <!-- 콘텐츠 영역 -->
</body>
</html>

 

 

CDN을 사용하는 방법은 인터넷에 연결된 환경에서 가장 쉽게 Bootstrap을 사용하는 방법입니다. 페이지 로드 시 빠른 속도로 스타일을 불러올 수 있어요.

(2) 파일 다운로드 후 로컬 설치

Bootstrap을 공식 사이트에서 다운로드하여, 프로젝트에 직접 포함할 수도 있습니다. 아래와 같은 순서로 진행해 보세요.

  1. Bootstrap 공식 웹사이트에 접속합니다.
  2. "Download" 버튼을 클릭해 Bootstrap 파일을 다운로드합니다.
  3. 압축 파일을 해제하고, CSS와 JavaScript 파일을 프로젝트 폴더에 저장합니다.
  4. HTML 파일의 <head> 태그 안에 다운로드한 CSS 파일을 링크합니다.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 시작하기</title>
  <!-- 로컬에 저장한 Bootstrap CSS 파일 -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
  <!-- 콘텐츠 영역 -->
</body>
</html>

 

 

이 방법은 인터넷 연결 없이도 Bootstrap을 사용할 수 있다는 장점이 있어요.

2. 기본 파일 구조

Bootstrap을 적용한 기본적인 HTML 파일 구조는 아래와 같아요. 여기에는 CSS 파일뿐 아니라 JavaScript 기능을 위해 필요한 jQuery와 Popper.js 라이브러리도 포함됩니다. Bootstrap의 자바스크립트 기능을 활용하려면 이 두 파일이 필요하니 함께 추가해 주세요.

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 기본 구조</title>
  <!-- Bootstrap CSS CDN -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  
  <!-- 콘텐츠 영역 -->
  
  <!-- jQuery, Popper.js, Bootstrap JS CDN -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

 

 

이 구조에서는 Bootstrap CSS 파일과 JavaScript 파일이 각각 <head>와 <body>에 포함되어 있으며, jQuery와 Popper.js 라이브러리도 함께 추가되었습니다. 이 구조만 갖춰지면 Bootstrap의 다양한 컴포넌트와 스타일을 사용할 준비가 끝납니다!

3. 초기 설정 방법

Bootstrap을 적용한 후에는, 기본적인 레이아웃을 만들기 위해 컨테이너와 그리드 시스템을 활용할 수 있습니다. 아래 예제는 Bootstrap의 기본 구조를 활용해 간단한 레이아웃을 만드는 방법을 보여줍니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 예제 페이지</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <!-- 컨테이너 시작 -->
  <div class="container">
    <div class="row">
      <div class="col-md-4 bg-primary text-white">Column 1</div>
      <div class="col-md-4 bg-secondary text-white">Column 2</div>
      <div class="col-md-4 bg-success text-white">Column 3</div>
    </div>
  </div>

  <!-- jQuery, Popper.js, Bootstrap JS CDN -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

 

 

이 예제에서는 container, row, col-md-4 클래스를 사용해 3개의 칼럼 레이아웃을 만들었어요.

  • container: Bootstrap의 기본적인 컨테이너 역할을 하는 요소로, 콘텐츠의 양쪽 여백을 맞춰줍니다.
  • row: 행을 의미하며, 이 안에 컬럼을 배치해 레이아웃을 구성합니다.
  • col-md-4: Bootstrap의 그리드 시스템을 사용하여 컬럼의 크기를 지정합니다. 여기서는 화면이 중간 크기 이상일 때 한 줄에 4개의 컬럼이 들어가도록 설정했어요.

요약 및 다음 단계

Bootstrap을 설치하고 사용하는 방법에는 CDN 연결과 파일 다운로드 두 가지 방법이 있습니다. 기본 파일 구조와 그리드 시스템을 통해 간단하게 반응형 레이아웃을 구성할 수 있습니다. 다음 단계로는 Bootstrap의 다양한 컴포넌트(버튼, 폼, 네비게이션 바 등)를 활용해 더 복잡하고 실용적인 웹 페이지를 만들어보세요.

Bootstrap의 다양한 기능을 익히며 웹 디자인을 손쉽게 구현할 수 있길 바랍니다!

 

2024.11.12 - [프로그래밍/Bootstrap] - Bootstrap 목차

728x90
반응형
저작자표시

'프로그래밍 > Bootstrap' 카테고리의 다른 글

5. Bootstrap 컬러 유틸리티로 디자인에 생기를 불어넣기  (0) 2024.11.12
Bootstrap 목차  (0) 2024.11.12
4. 간편한 웹 텍스트 스타일링, Bootstrap 타이포그래피 활용하기  (0) 2024.11.12
3. 반응형 웹의 기초, Bootstrap 그리드 시스템 완벽 가이드  (0) 2024.11.12
1. Bootstrap이란 무엇인가요? 웹 디자인을 쉽게 만드는 프레임워크 소개  (0) 2024.11.12

관련글

티스토리툴바