WEB/Bootstrap

[WEB] BootStrap 으로 쉽고 빠르게 디자인하기

Happyoon ~ 2021. 11. 17. 18:11
728x90
반응형

부트스트랩이란,

웹페이지 디자인을 지원하기 위해 개발된 CSS와 JavaScript 라이브러리를 조합하여 만들어진 프레임워크이다.

부트스트랩을 활용하면 쉽고 빠르게 코드 복사로 완성도 있는 웹 디자인을 할 수 있다.

 

사용 방법을 살펴보자.

 

1. html 파일 만들기 

 

2. 부트스트랩 홈페이지 접속

https://getbootstrap.com/docs/5.1/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

 

3. 위 홈페이지에서 CSS의 코드 부분을 복사해서 헤더의 <title> 태그 밑에 붙여넣기

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

 

4. JS의 코드 부분 역시 복사해서 3번 코드 밑에 붙여넣기

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

 

 

이렇게 하면 부트스트랩 사용 준비 완료!

홈페이지 좌측의 Customize, Layout 등의 속성에서 원하는 것을 코드 복사 만으로 디자인할 수 있다.

 

 

활용 코드 예시

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index.html</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
   <h1>인덱스 페이지 입니다.</h1>
   <div class="alert alert-primary mt-5 ps-5" role="alert">
        A simple primary alert—check it out!
   </div>
   <div class="alert alert-warning alert-dismissible fade show" role="alert">
     <strong>저장 실패!</strong> 다시 시도 하려면 X 를 누르세요
     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
   </div>
   
   <h2>회원 목록 입니다.</h2>
   <table class="table table-hover">
      <thead>
         <tr>
            <th>번호</th>
            <th>이름</th>
            <th>주소</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>1</td>
            <td>김구라</td>
            <td>노량진</td>
         </tr>
         <tr>
            <td>2</td>
            <td>해골</td>
            <td>행신동</td>
         </tr>
      </tbody>
   </table>
   <!-- 하나의 행을 2개의 칼럼으로 만들고 각각의 칼럼에 table 넣어보기 -->
   <div class="row">
      <div class="col">
         <h2>회원 목록 입니다.</h2>
         <table class="table table-hover">
            <thead>
               <tr>
                  <th>번호</th>
                  <th>이름</th>
                  <th>주소</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>1</td>
                  <td>김구라</td>
                  <td>노량진</td>
               </tr>
               <tr>
                  <td>2</td>
                  <td>해골</td>
                  <td>행신동</td>
               </tr>
            </tbody>
         </table>      
      </div>
      <div class="col">
         <h2>회원 목록 입니다.</h2>
         <table class="table table-hover">
            <thead>
               <tr>
                  <th>번호</th>
                  <th>이름</th>
                  <th>주소</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>1</td>
                  <td>김구라</td>
                  <td>노량진</td>
               </tr>
               <tr>
                  <td>2</td>
                  <td>해골</td>
                  <td>행신동</td>
               </tr>
            </tbody>
         </table>            
      </div>
   </div>
</div>   
</body>
</html>

 

 

실행 결과

 

반응형