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>
실행 결과
반응형