bootstrap : 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다.
필자는 속성으로 배워 간단한 사용 예시 몇 가지만 들어보겠다.(나의 기억용..)
bootstrap.min.js 사용예제1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
<title>Insert title here</title>
</head>
<body>
<h1>Hello Bootstrap</h1>
</body>
</html>
실행화면
Hello Bootstrap
참조
위 예시에서 이와 같은 소스가 있는데 bootstrap을 사용하기 위한 필수 코드라고 한다.
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
W3Schools : 온라인으로 웹 기술을 배우는 교육용 웹 사이트
접속하여 References → Bootstrap 4 References 이동
Try it 클릭하면 새로운 페이지가 열린다.
소스코드를 확인해보면 위와 같은 코드를 볼 수 있다.(이 코드를 복사하여 사용한다.)
bootstrap.min.js 사용예제2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Insert title here</title>
</head>
<body>
<h1 class="text-center mb-5">component:alert</h1>
<h2 class="text-center mb-4">기본적인 사용예</h2>
<div class="container">
<div class="alert alert-primary" role="alert">alert-primary</div>
<div class="alert alert-success" role="alert">alert-success</div>
</div>
</body>
</html>
실행화면
component:alert
기본적인 사용예
alert-primary
alert-success
참조
Bootstrap은 다른사람이 만든 코드를 가져다가 사용하는 것이기 때문에 tag의 class명을 개발자가 만든 class명으로 사용해 주어야 한다.
bootstrap.min.js 사용예제3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Insert title here</title>
</head>
<body>
<h1 class="text-center mb-5">component:card</h1>
<div class="container">
<div class="card mb3" style="max-width: 25rem;">
<div class="card-header">헤더의 배경색</div>
<div class="card-body">
<h4 class="card-title">카드의 헤드라인</h4>
<p class="card-text">카드의 내용</p>
<div class="card-footer">바닥글</div>
</div>
</div>
<div class="card" style="max-width: 25rem">
<img alt="..." class="card-img-top" src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fk8Em1%2Fbtq6RMQctf8%2FPxuKkDa1Rr2ENQhuQqVdVK%2Fimg.png">
<div class="card-body">
<h4 class="card-title">카드의 해드라인</h4>
<p class="card-text">카드의 내용</p>
<a href="#" class="btn btn-primary">버튼</a>
</div>
</div>
</div>
</body>
</html>
실행화면
component:card
헤더의 배경색
카드의 헤드라인
카드의 내용
'IT > CSS' 카테고리의 다른 글
| [CSS] button 꾸미기! (hover효과 주기) (0) | 2021.06.17 |
|---|---|
| [CSS]공간 분할 태그 정의/ 사용예제/padding 한줄기입 순서 (0) | 2021.06.10 |
| [CSS] div태그로 공간 나누기 (0) | 2021.06.09 |
| [CSS] 리스트 마커 변경하기/list-style-image/list-style-type (0) | 2021.06.09 |
| [CSS] a:link/a:visited/a:hover/a:active (0) | 2021.06.09 |