BootStrap(부트스트랩)
부트 스트랩이란?
- 프론트엔드 개발을 빠르고 쉽게 할 수있는 프레임 워크
프레임 워크란? 재사용이 가능한 요소의 집합으로, 구조와 틀을 결정, 확장 가능한 기반 코드이다.
- HTML과 CSS기반의 템플릿 양식, 버튼, 네비케이션 및 기타 페이지를 구성하는 요소 포함
- 자바스크립트를 선택적으로 확장 할 수 있음
- GitHub의 오픈 소스로 사용가능, 상업적으로 이용 가능
부트 스트랩을 사용하는 이유
- 서로 다른 인터페이스를 사용한 여러 개발자들의 공동작업이 가능하다.
- 디자인 불일치, 관리 어려움, 방대한 코드량등의 어려움을 해결해준다.
부트 스트랩 웹사이트
부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크.
프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인기있는 CSS 프리프로세서인 Less 와 Sass 를 사용합니다. 신속하게 프리컴파일된 CSS 로 시작하거나 소스를 빌드
bootstrapk.com
부트 스트랩으로 버튼을 만들어보자 !
1. 위의 링크로 들어가, CSS를 클릭한다.
2. 우측 카테고리에서 원하는 주제를 선택한다
지금은 버튼을 만들꺼니까, 버튼을 클릭!
3. 버튼을 클릭하면, 예시와 코드가 적혀있는데 원하는 모양의 버튼 코드를 복사해 사용한다.
[예시]
<body>
<h2>부트스트랩의 시작</h2>
<p><a href="http://bootstrapk.com/css/#code" class="btn btn-default">부트스트랩 웹사이트로 이동</a></p>
<p>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
</p>
</body>
5. 상단 메뉴의 시작하기를 클릭한다.
6. 밑으로 내려 부트스트랩 CDN의 링크를 복사해 <head> 태그내에 붙여넣는다.
[예시]
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>부트스트랩의 시작</title>
<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
[전체 코드]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>부트스트랩의 시작</title>
<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<h2>부트스트랩의 시작</h2>
<p><a href="http://bootstrapk.com/css/#code" class="btn btn-default">부트스트랩 웹사이트로 이동</a></p>
<p>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
</p>
</body>
</html>
[결과]
따로 스타일 설정을 하지않고, 단지 부트스트랩을 사용한것 만으로 이렇게 이쁜 버튼을 만들 수 있다 :)
열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.
수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>
'프로그래밍 > CSS' 카테고리의 다른 글
| 24 반응형 웹페이지를 만들어보자 - 2 (0) | 2021.05.15 |
|---|---|
| 23 반응형 웹페이지를 만들어보자 - 1 (0) | 2021.05.15 |
| 22 CSS의 우선순위 계산 (0) | 2021.05.11 |
| 21 CSS Animation (0) | 2021.05.11 |
댓글