Skip to content

Latest commit

 

History

History
75 lines (56 loc) · 3.58 KB

3_1.bootstrap_Introduction.md

File metadata and controls

75 lines (56 loc) · 3.58 KB

Bootstrap은 웹 개발에서 널리 사용되는 오픈 소스 프론트엔드 프레임워크로, 반응형 웹 디자인을 손쉽게 구현할 수 있도록 다양한 CSS 및 JavaScript 컴포넌트를 제공합니다. 이 튜토리얼에서는 Bootstrap을 프로젝트에 적용하는 방법과 기본적인 사용법을 소개하겠습니다.

1. Bootstrap 시작하기

Bootstrap을 프로젝트에 적용하는 방법은 크게 두 가지가 있습니다: CDN을 통한 연결과 로컬 파일을 통한 연결입니다.

  • CDN(Content Delivery Network)을 통한 연결: 가장 간단한 방법으로, HTML 파일의 <head> 태그 안에 Bootstrap의 CSS와 JavaScript 파일을 링크합니다.

    <!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://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
  <h1>안녕하세요, Bootstrap!</h1>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>

    위 코드는 Bootstrap의 CSS와 JavaScript 파일을 포함하여, 간단한 웹 페이지를 구성합니다.

  • 로컬 파일을 통한 연결: Bootstrap의 파일을 직접 다운로드하여 프로젝트에 포함시키는 방법입니다. Bootstrap 공식 웹사이트에서 파일을 다운로드한 후, 프로젝트의 적절한 경로에 배치하고 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="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <h1>안녕하세요, Bootstrap!</h1>
  <script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

2. Bootstrap의 주요 기능

Bootstrap은 다양한 기능을 제공하며, 그 중에서도 그리드 시스템과 다양한 컴포넌트가 핵심입니다.

  • 그리드 시스템: 화면을 12개의 열로 분할하여 레이아웃을 구성할 수 있도록 도와줍니다. 이를 통해 다양한 화면 크기에 대응하는 반응형 디자인을 손쉽게 구현할 수 있습니다.

    <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>

    위 코드는 중간 크기 이상의 화면에서 4칸씩 차지하는 3개의 컬럼을 생성합니다.

  • 컴포넌트: 버튼, 내비게이션 바, 모달 등 다양한 UI 요소를 제공합니다. 예를 들어, 기본 버튼은 다음과 같이 사용할 수 있습니다.

    <button class="btn btn-primary">기본 버튼</button>

    이 외에도 다양한 컴포넌트를 활용하여 웹 페이지의 기능성과 디자인을 향상시킬 수 있습니다.

3. 마치며

Bootstrap은 반응형 웹 디자인을 손쉽게 구현할 수 있도록 도와주는 강력한 도구입니다. 이 튜토리얼을 통해 Bootstrap의 기본 사용법을 익히고, 다양한 컴포넌트를 활용하여 더욱 풍부한 웹 페이지를 개발해보시기 바랍니다.