처음부터 차근차근

Bootstrap 본문

Framework/CodeIgniter

Bootstrap

_soyoung 2021. 10. 10. 21:04
반응형
Bootstrap

 

bootstrap

Bootstrap이란, 무료 프론트엔드 framework이다.

이 라이브러리를 사용하면 쉽고 세련되게 웹 애플리케이션을 디자인할 수 있을 뿐만 아니라 창의 크기에 따라 디자인이 달라지는 반응형 웹 애플리케이션을 만들 수 있다.

 

Bootstrap 초기 세팅하는 데는 두 가지 방법이 있다.

 

  1. 직접 bootstrap파일 다운로드 하는 방법
  2. CDN 사용하는 방법

 

 

 

Bootstrap 초기 세팅 - 직접 다운로드

 

1. 부트스트랩 사이트로 가서 bootstrap을 다운 받는다.

https://getbootstrap.com/

 

Bootstrap

The most popular HTML, CSS, and JS library in the world.

getbootstrap.com

 

 

2. htdoc 밑에다 외부 파일(css, js, img....)용 폴더 하나를 만들고 그 안에다가 다운 받은 bootstrap css파일들과 js파일들을 넣는다. (폴더 경로는 다르게 해도 됨)

 

 

3. 코드 추가

<head></head>사이에 아래의 코드를 입력한다.

<meta name="viewport" content="width=device-width, initial-scale=1">

이 코드를 사용하면 모바일에서 모바일 전용 디자인으로 바뀐다.

<코드 설명>

width=device-width : 장치의 화면 폭을 따라 페이지 폭을 설정

initial-scale=1 : 브라우저에서 페이지를 처음 로드할 때 초기 확대/축소 수준을 설정

 

<link href="/my/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">

이 코드는 bootstrap css를 사용할 수 있게 하는 코드이다.

 

<script src="http://code.jquery.com/jquery.js"></script>
<script src="/my/lib/bootstrap/js/bootstrap.min.js"></script>

jquery 자바스크립트 라이브러리를 로드하는 코드와 bootstrap 자바스크립트 라이브러리를 로드하는 코드이다.

* Bootstrap5는 jquery 로드하는 코드를 생략해도 된다.

Bootstrap3, 4에서는 jQuery를 사용했는데, Bootstrap 5로 업그레이드 되면서 바닐라 JavaScript를 사용하기 때문

 

 

 

 

Bootstrap 초기 세팅 - CDN 사용(Bootstrap5 기준)

 

CDN이란 Content Delivery Network의 약자이다.

Bootstrap5에서는 CDN을 사용하여 bootstrap을 직접 다운받지 않아도 bootstrap을 사용할 수 있다.

자신의 코드에 아래의 두 개의 코드만 입력하면 bootstrap을 사용할 수 있다.

하나는 css를 로드하는 코드이고, 하나는 javascript를 로드하는 코드이다.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>

 

 

CDN을 사용하면 한 가지 이점이 있다.

결론부터 얘기하자면 로딩시간이 빨라진다.

그 이유에는 2가지가 있다.

첫 번째로, 많은 웹 사이트들이 jsDelivr에서 Bootstrap5를 다운로드하는 방식을 사용하기 때문에 

많은 사람들은 이미 jsDelivr에서 Bootstrap5를 다운로드했다고 한다.

그래서 사용자가 나의 사이트를 방문할 때는 이미 Bootstrap5를 다운받았으므로 캐시에서 로드되서 로딩 시간이 빨라진다.

두 번째로, 대부분의 CDN은 사용자가 파일을 요청하면 가장 가까운 서버에서 제공되므로 로딩 시간이 빨라진다.

 

 

 

 

container

 

bootstrap의 css class 중에는 container가 있다.

container은 전체 콘텐츠의 위치, 패딩 등을 설정하는 역할을 한다.

가장 기본적인 것만 정리했다.

 

.container 클래스 : 고정 폭 컨테이너

.container-fluid 클래스 : 전체 너비 컨테이너(width항상 100%)

 

border : container 윤곽선(잘 디자인 됬는지 볼 때 유용)

 

(큰 사각형은 container border 했을 때 그 윤곽선)

.pt-(1~5사이 숫자) : 2번 구간 패딩 추가

.my-(1~5사이 숫자) : 1번 구간 패딩 추가

 

<사용 예시>

<div class="container pt-5 my-5 border">

 

 

 

 

grid

 

grid는 bootstrap의 css class 이다.

grid는 주로 container과 함께 사용되며 행 및 열을 사용하여 콘텐츠를 레이아웃하고 정렬하는 역할을 한다.

 

기본

<div class="row">
  <div class="col">test1</div>
  <div class="col">test2</div>
</div>

결과

이렇게 하면 알아서 열들이 똑같은 너비로 만들어진다.

 

 

.col : 열들이 하나로 합쳐지지 않음
.col-sm- : 화면 너비가 576px 미만일 때 열들이 하나로 합쳐짐
.col-md- : 화면 너비가 768px 미만일 때 열들이 하나로 합쳐짐
.col-lg- : 화면 너비가 992px 미만일 때 열들이 하나로 합쳐짐
.col-xl- : 화면 너비가 1200px 미만일 때 열들이 하나로 합쳐짐
.col-xxl- : 화면 너비가 1400픽셀 미만일 때 열들이 하나로 합쳐짐

필자는 보통 sm을 쓴다.

 

<사용 예시>

<div class="container">
  <div class="row">
    <div class="col-sm-8">test1</div>
    <div class="col-sm-4">test2</div>
  </div>
</div>

col- 다음에 숫자는 한 행당 합이 12가 되도록 해야한다.

 

 

 

 

Bootstrap 사용 방법 

 

bootstrap은 bootstrap 공식 문서에서 코드를 복사 붙여넣기하여 사용하면 된다.

bootstrap 공식 문서 홈페이지 : 

https://getbootstrap.com/docs/5.0/getting-started/introduction/

 

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

getbootstrap.com

 

 

 

그리고 bootstrap 공부는 공식 홈페이지나 w3school에서 하면 된다.

w3school는 bootstrap에 대한 내용을 쉽게 잘 정리해놓아서 bootstrap 처음 사용하는 사람에게 유용한것 같다.

w3school bootstrap5 튜토리얼 사이트 : 

https://www.w3schools.com/bootstrap5/index.php

 

Bootstrap 5 Tutorial

Bootstrap 5 Tutorial Try it Yourself Examples This tutorial contains hundreds of Bootstrap 5 examples. With our online editor, you can edit the code, and click on a button to view the result. Click on the "Try it Yourself" button to see how it works. Boots

www.w3schools.com

 

 

 

 

 

 

 

 

 

출처 : bootstrap 공식 문서(https://getbootstrap.com/docs/5.1/getting-started/introduction/),

w3school(https://www.w3schools.com/bootstrap5/index.php), 

'CodeIgniter - 생활 코딩' 변형 및 요약

반응형

'Framework > CodeIgniter' 카테고리의 다른 글

Helper  (0) 2021.10.13
URI 매핑 변경하기  (0) 2021.10.12
Model과 View, 데이터베이스 연동  (0) 2021.10.09
Codelgniter 파일 구조와 Controller, Veiw  (0) 2021.10.06
Framework와 CodeIgniter  (0) 2021.10.06
'Framework/CodeIgniter' Related Articles more
Comments