고정 헤더 영역
상세 컨텐츠
본문
728x90
반응형
Bootstrap
- 반응형 웹 디자인 위한, 다양한 class와 Javascript 코드로 구성된
open source front-end framework - responsive CSS 제공
- Twitter에서 개발
Snippet(스니핏)
- 자주 사용되는 코드를 별도로 저장해두고 필요할 때마다 복사해서 사용하는 것
- snippet이 개발팀 내 공유되어 관리되지 못하면, 전체 코드에서 일관된 스타일을 가지지 못한다.
Framework
- 소프트웨어 개발 시 재사용 관점에서 공통적으로 필요한 기능들을 모아 구조화한 것
- Snippet 보다는, Framework가 제공하는 코딩 스타일을 개발팀 전체의 코딩 스타일로 통일하면 품질, 유지보수, 커뮤니케이션 측면에서 좋다.
Bootstrap Install
1. Bootstrap download
- Bootstrap download: stable 버전인 v4.6.0을 다운받았다.
- 압축해제 후 vscode에서 작업하는 루트경로에 파일을 위치시킨다.
Bootstrap 파일 구조
2. Bootstrap install in vscode
$ cd bootstrap-4.6.0-dist
$ npm init --y
Wrote to D:\\koharin\\bootstrap-4.6.0-dist\\package.json:
{
"name": "bootstrap-4.6.0-dist",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": \[\],
"author": "",
"license": "ISC"
}
$ npm install --save bootstrap
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [bootstrap@4.6.0](mailto:bootstrap@4.6.0) requires a peer of [jquery@1.9.1](mailto:jquery@1.9.1) - 3 but none is installed. You must install peer dependencies yourself.
npm WARN [bootstrap@4.6.0](mailto:bootstrap@4.6.0) requires a peer of popper.js@^1.16.1 but none is installed. You must install peer dependencies yourself.
npm WARN [bootstrap-4.6.0-dist@1.0.0](mailto:bootstrap-4.6.0-dist@1.0.0) No description
npm WARN [bootstrap-4.6.0-dist@1.0.0](mailto:bootstrap-4.6.0-dist@1.0.0) No repository field.
- [bootstrap@4.6.0](mailto:bootstrap@4.6.0)
added 1 package from 2 contributors and audited 1 package in 1.211s
1 package is looking for funding
run `npm fund` for details
found 0 vulnerabilities- vscode terminal에서 진행
- 설치가 완료되면,
bootstrap-4.6.0-dist폴더 내node_modules폴더가 생성된 것을 확인할 수 있다. node_modules/bootstrap/dist폴더에 설치파일이 존재
Hello World
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BOOTSTRAP PRACTICE #1</title>
<link rel="stylesheet" href="../bootstrap-4.6.0-dist/css/bootstrap.min.css">
</head>
<body>
<h1>My First Bootstrap Page</h1>
<button type="button" class="btn btn-success">Success</button>
<!-- jQuery는 bootstrap의 js가 사용하므로 bootstrap js 파일 로드 전 로드한다. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- <body> tag 끝나기 전 js 파일 로드 시 웹페이지 로딩 속도 향상된다. -->
<script src="../bootstrap-4.6.0-dist/js/bootstrap.min.js"></script>
</body>
</html>- 간단한 bootstrap 사용 예제
My First Bootstrap Page
Bootstrap Docs
Reference
728x90
반응형
'PROGRAMMING > Web' 카테고리의 다른 글
| [JavaScript] JavaScript #2: 데이터 타입, 변수, 동적 타이핑(Dynamic Typing), 변수 호이스팅(Variable Hoisting) (0) | 2021.01.29 |
|---|---|
| [JavaScript] JavaScript #1: 자바스크립트 개요 (0) | 2021.01.29 |
| [HTML] Semantic Web(시맨틱 웹) (0) | 2021.01.28 |
| [TestDome] HTML/CSS and JavaScript Test Questions (0) | 2021.01.10 |
| [TestDome] Remove Property (JavaScript) (0) | 2021.01.10 |
