티스토리 뷰
728x90
반응형
부트스트랩이란,
웹페이지 디자인을 지원하기 위해 개발된 CSS와 JavaScript 라이브러리를 조합하여 만들어진 프레임워크이다.
부트스트랩을 활용하면 쉽고 빠르게 코드 복사로 완성도 있는 웹 디자인을 할 수 있다.
사용 방법을 살펴보자.
1. html 파일 만들기
2. 부트스트랩 홈페이지 접속
https://getbootstrap.com/docs/5.1/getting-started/introduction/
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>
실행 결과
반응형
'WEB > Bootstrap' 카테고리의 다른 글
[BootStrap] 로그인 폼 만들기 / 부트스트랩 examples 사용해보기 (0) | 2021.11.29 |
---|---|
[WEB] 부트스트랩을 이용하여 폼 유효성 검사하기 / is-valid (0) | 2021.11.29 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- append
- bootstrap
- CSS
- python
- 큐
- javascript
- 브루트 포스
- 단계별로풀어보기
- 정렬
- Django
- 백준
- 문자열
- jQuery
- 파이썬
- 덱
- brute force
- 장고
- 프로그래머스
- Java
- 자바스크립트
- Oracle
- 자바
- web
- 고득점 키트
- R
- 스프링
- Case When
- html
- baekjoon
- jsp
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
글 보관함