- Bootstrap 이란??
부트스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JavaScript 프레임워크입니다.
하나의 CSS 로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동합니다.
다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와줍니다. (출처: 위키백과)
부트스트랩은 쉽게 말해서 웹 디자인 프레임워크라고 할 수 있습니다!
트위터 사에서 개발한 UI 프레임워크로,
웹 디자인 개발 시간 단축 및 모바일 반응형 웹사이트를 구축하기 위해 개발되었습니다.
부트스트랩 설치 및 사용 방법은 다음과 같습니다.
- 우선 사용하고자 하는 편집기가 필요합니다. 쉽게 생각해서 코드 편집기 프로그램이라고 이해하시면 됩니다.
저는 Atom을 사용했습니다. 편하신 코드 편집기로 웹 프로젝트 폴더를 생성해주세요.
- 프로젝트 폴더를 생성하고 그 안에 html 파일을 만들어주세요. (example 폴더 생성 -> ex.html 파일 생성)
- 파일 생성이 끝났다면 위 캡쳐 화면과 같이 코드를 삽입해 주세요.
이 때 각 코드의 위치가 중요합니다. 코드 순서를 보시면,
head 태그 하위에 title 태그 밑 부분에 위치한 link 태그 코드는
1. 기본적인 부트스트랩 디자인 요소를 사용하기 위한 코드입니다.
그리고 body 태그가 끝난 후 위치한 두 개의 script 태그가 있습니다.
이는 각각 2. 부트스트랩 자바스크립스 사용에 필요한 jQuery 플러그인과,
3. 실질적인 부트스트랩 자바스크립트 코드입니다. (동적인 요소)
script 태그의 코드를 확인할 수 있는데,
해당 코드가 부트스트랩을 사용하기 위한 코드입니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!-- 부트스트랩 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
</body>
<!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
<script src="js/bootstrap.min.js"></script>
</html>
여기까지 하셨다면 부트스트랩을 사용하기 위한 준비가 완료되었습니다.
본격적인 사용법은 다음 포스팅을 참고해주세요. 감사합니다.
부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크.
프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인기있는 CSS 프리프로세서인 Less 와 Sass 를 사용합니다. 신속하게 프리컴파일된 CSS 로 시작하거나 소스를 빌드하세요. 하나의 프레임워크, 모든 기기. 부트스트랩은 웹사이트와 어플리케이션을 단일 코드 베이스로 CSS 미디어 쿼리를 이용하여 휴대폰에서부터 태블릿, 데스크탑까지 쉽고 효과적으로 크기를 조절합니다. 많은 기능들 부트스트랩과 함께, 보통의 HTML 요소들
bootstrapk.com
'Web' 카테고리의 다른 글
| [Font Awesome] 폰트어썸 웹폰트 아이콘 사용하기 (0) | 2020.02.19 |
|---|---|
| [Bootstrap] 부트스트랩 활용하기 (버튼) (0) | 2020.02.19 |
| bitmani WAMP apachi 로컬서버 동작 확인하기 (0) | 2020.02.17 |
| bitnami WAMP 설치하기 (0) | 2020.02.03 |