[Bootstrap] container/bg/text/p 적용

Bootstrap 개요

트위터에서 시작된 오픈 소스 프론트엔드 트레임워크. 시작은 디자이너 한명과 트위터의 한 개발자였지만 지금은 트위터에서 주도적으로 개발하고 있지는 않다. 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인과 기능을 CSS와 JavaScript로 만들어 놓은 것이며, 초창기에는 웹 디자이너나 개발자 사이에서 웹 디자인의 혁명이라고 불릴 정도로 폭발적인 반응을 얻었던 프레임워크이다.

 

 

부트 스트랩 사용하기 위한 사전 작업

1. cdn 서비스 사용하거나 2. 직접 부트스트랩 서버에서 사용

1번을 하기 위해서는 인터넷에서 가져오면 된다.

Choose a Bootstrap Version (3, 4 or 5) (w3schools.com)

W3Schools Free Online Web Tutorials

나의 경우는 W3Schools에 들어가 링크를 가져오는데

Bootstrap 5에 들어가서 해당 스크립트를 복사+붙여넣기 한다.

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

그러면 Bootstrap을 할 준비는 전부 완료!

 

그러면 기본 동작들을 익혀보겠다.

 

 

1. BS5 Containers

.container : 고정된 width의 container

.container-fuid : 전체화면의 container

 

2.Bootstrap 5 Grid System

 

 

Bootstrap의 그리드 시스템은 12개의 column으로 구성되어있다.

2개의 span이 있으면 기본값이 6: 6 비율로 나눠지게 되고, 3개 span이면 4:4:4로 나눠진다. 

  			//위와 아래코드가 동일하게 화면에 출력된다.
  			<div class="col">
               1
            </div>
            <div class="col">
               2
            </div>
            <div class="col">
               3
            </div>         

            
            //위와 동일한 스타일
            <div class="col-4">
               1
            </div>
            <div class="col-4">
               2
            </div>
            <div class="col-4">
               3
            </div>

Grid Classes에 .col-sm, .col-md, .col-lg, .col-xl, .col-xxl- 같은 클래스들이 있는데 이들을 이용하면 기기화면 혹은 웹화면크기에 반응하여 크기를 유동적으로 변화시켜주기 때문에 되게 있어보이는 홈페이지를 만들 수 있다.

 

3.Text Colors

.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light 등이 있다.

text color 적용한 출력 화면

 

위에 클래스들을 적용하여 간단하게 웹페이지 디자인을 구현해보겠다.

 

 

    <div class="container-fluid bg-primary text-white text-center p-3">
      <h1>큰 제목</h1>
      <p>어쩌구 저쩌구리</p>
    </div>
    <div class="container bg-warning">
        body
        <div class="row">
            <div class="col-3">
                coll
            </div>
            <div class="col-5">
                coll
            </div>
            <div class="col-4">
                coll
            </div>
        </div>
    </div>

 

 

D.O.N.E!!