[부트스트랩]1. 부트스트랩이 뭐죠?
안녕하세요 HiCreate입니다!!!
이번 포스팅은 부트스트랩에 대한 첫 글인 만큼
부트스트랩이 뭔지, 어떤 장단점이 있는지 알려드리도록 하겠습니다.
우선! 부트스트랩이 무엇이냐? 하면...
웹 프로그래밍을 할 때 홈페이지를 예쁘게 꾸미거나 반응형을 만들 때
CSS 라는 걸 많이 이용합니다.
그런데 HTML에 JavaScript나 PHP 같은 언어에다가 디자인 용 언어까지 배우려면 너무 벅차죠?
이럴 때 부트스트랩을 쓰는 겁니다.
부트스트랩은 어찌보면 하나의 라이브러리인데요.
부트스트랩 사이트 getbootstrap.com 에 들어가보면
'전세계에서 가장 널리 쓰이는 프레임워크' 라고 나와있습니다.
그래서 부트스트랩은 무엇이냐하면
반응형 웹을 쉽게 만들 수 있도록 되어있는 프레임워크 혹은 라이브러리인겁니다.
사용은 어떻게 하나요??
<head>태그 아래에 CDN이라고 되어있는 이 코드
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>이렇게 두가지를 넣어주거나
npm install bootstrap 으로 설치해주면 쉽게 시작할 수 있습니다.
그럼 왜 사용하느냐?
첫번째로는 위에서 설명했듯 반응형 웹 제작을 위해서입니다.
요즘은 반응형이 굉장히 중요합니다.
모바일 같은 기기때문만이 아니라, PC끼리도 혹은 모니터 끼리도 해상도와 크기가 천차만별이기 때문이죠.
그런데 부트스트랩은 자체적으로 그 크기에 맞추어 페이지를 생성해주니 정말 좋은거죠.
두번째는 쉬운 웹디자인 때문인데요,
위에서도 설명했듯
디자이너가 아닌 일반적인 개발자가 디자인까지 하기에 벅찹니다.
그런데 부트스트랩은 클래스 이름 하나 바꾸는 것만으로 디자인을 바꿀 수 있으니 엄청난 장점 아닐까요?
그럼 다음 포스팅에서 부트스트랩의 첫번째인 컨테이너와 그리드에 대해 설명해드리도록 하겠습니다!!
'프로그래밍 > 웹과 부트스트랩' 카테고리의 다른 글
| VSCODE에 웹 개발 환경 구축하기 (1) | 2019.06.09 |
|---|---|
| [부트스트랩]3. 그리드 시스템 (0) | 2019.02.23 |
| [부트스트랩]2. 컨테이너와 그리드(기본 설명) (0) | 2019.02.21 |
