부트스트랩(Bootstrap) 설치하고 사용하는 방법
안녕하세요
아이언스카이입니다
오늘은 부트스트랩에 대하여 알아보고 설치, 사용하는 방법에 대해 알아볼게요
부트스트랩은 이미 만들어진 다양한 화면을
html 코드 복붙만 해서 홈페이지 화면이 완성되게끔 만들어진 프로그램인데요
물론 중간중간 css 가 필요한 부분도 있지만
디자인에 자신없는 프론트엔드개발자들에게는 유용한 프로그램이랍니다
게다가 모두 한글로 번역되어 있어서 우리가 가져다 쓰기도 쉽구요
그럼 지금부터 설치하는 것부터 알아 보겠습니다
부트스트랩을 사용하기 위해서는 html 화면에 추가해 주어야 하는
코드들이 있기 때문입니다~>_<
01. 부트스트랩(bootstrap) 설치하기
구글에서 '부트스트랩'이라고 한글로 입력해도 홈페이지가 나옵니다
워낙 많이 사용되기 때문에 한글로 모두 나와 있어서 사용하기 편리해요*_*
부트스트랩 홈페이지에 들어가면 보라색 화면이 먼저 나오는데요
부트스트랩 다운로드를 클릭하면 페이지 아래쪽 다운로드 부분으로 넘어갑니다
우리는 여기에서 부트스트랩 부분만 다운로드 해서 사용할 거예요~!
Sass 를 사용하시는 분들은 여기에서도 다운받으실 수 있으니
추가로 다운받아서 사용하시면 됩니다^^
부트스트랩 다운로드 클릭
크롬에서 다운받으면 어디에 다운받았는지 찾아다닐 필요가 없는데요
압축파일 오른쪽에 있는 화살표를 클릭하면
'폴더열기' 가 보이실 거예요
그 부분을 클릭하시면 다운로드 된 곳으로 바로 이동합니다
폴더열기 클릭
 |
저는 제가 사용하는 프론트엔드 폴더에 압축파일을 가지고 와
압축을 풀어 주었구요
압축해제한 부트스트랩 폴더를 클릭해 보면
css, fonts, js 폴더가 보이실 거예요
나중에 각각의 폴더에서 가지고 와야 할 파일들이 있답니다~!
02. 부트스트랩 html 코드 추가하기
다시 부트스트랩 홈페이지로 돌아와서,
부트스트랩 다운로드가 있었던 페이지를 하단으로 계속 드래그 하면
'기본템플릿'이라는 게 보입니다
기본템플릿은 말 그대로 부트스트랩을 사용하려면
html 에 이런 코드가 들어가 있어야 한다는 것을 보여주는데요
본인이 진행할 html 파일을 깨끗하게 놓은 채로
위 기본템플릿 전체를 복사하여 붙여 넣으셔도 되구요
만약 저처럼 <head> 태그 안에 다른 내용들이 들어 있어
부트스트랩 내용만 추가하길 원하시는 분들은 연두색 네모친 부분만 복붙해 주세요
추가할 내용
<!-- 부트스트랩 --><link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 --> <script src="js/bootstrap.min.js"></script>
03. 부트스트랩 필요한 파일 내 폴더에 붙여넣기
그럼 지금부터는 붙여넣은 코드와 이름이 같은 파일을
제가 진행할 폴더 안에 똑같이 붙여넣는 작업을 진행합니다
우선 Frontend 라는 폴더 안에 부트스트랩 폴더, v1, v2, v3 가 각각 있는데요
저는 v1 폴더 안에서 부트스트랩 관련 예제를 진행할 겁니다
따라서 부트스트랩 폴더에서 필요한 파일을 복사하여
v1 폴더 안에 붙여 넣어 주면 됩니다
먼저 css 파일을 붙여 넣겠습니다
<link href="css/bootstrap.min.css" rel="stylesheet"> 를 보시면
파일이름이 boorstrap.min.css 라는 것을 알 수 있습니다
즉, css 폴더 안에 들어있다는 소리일 텐데요
실제 우리가 다운받은 부트스트랩 폴더 안에 들어가 보니
css 폴더가 있습니다
css 폴더 클릭
저렇게 많은 css 파일들이 있는데 우리가 필요한 것은
bootstrap.min.css 파일 뿐입니다
따라서 그 파일만 복사해서 나의 css 폴더 안에 붙여넣기!
그럼 위처럼 v1 폴더 -> css 폴더에 위치하게 되겠죠?
여기에서 주의할 점은,
파일만 붙여넣는 게 아니라 반드시 폴더이름, 경로를 똑같이 만들어서
파일을 붙여 주어야 한다는 점입니다
마찬가지로 js 파일도 가져와서 붙여 보겠습니다
우선 제 v1 폴더에는 js 폴더가 만들어져 있지 않아서
새로 js 라는 이름의 폴더를 만들어 주었습니다
<script src="js/bootstrap.min.js"></script>저희가 필요한 파일은 bootstrap.min.js 라는 이름의 파일인데요
다운받은 부트스트랩의 js 파일을 열어보면 이 이름의 파일이 있을 겁니다
bootstrap.min.js 이름을 가진 파일만 복사
내가 만든 js 폴더 안에 붙여넣기
그리고 마지막으로 다운받은 부트스트랩 폴더에서
fonts 이름의 폴더는 부분만 복붙하지 않고
전체를 통째로 복사해서
나의 v1 폴더 안에 붙여 넣습니다
여기까지 하면 부트스트랩을 사용하기 위한 환경설정은
모두 마쳤다고 볼 수 있어요
그럼 이제부터는 실제로 부트스트랩을 어떻게 사용하면 좋을지
몇 가지만 살펴 볼까요~~!!
04. 부트스트랩 사용하는 방법
우선 부트스트랩을 잘 사용하기 위해서는 전반적으로
어떤 기능들이 있는지 살펴보는 시간이 있으면 좋습니다
위 상단의 시작하기 옆에 있는 CSS 라는 곳을 클릭하면
위와 같은 화면이 보이실 거예요
기본적인 테이블이나 버튼 등이 복사만 하면
자동 생성될 수 있도록 css 가 적용되어 있는 부분이구요
CSS 옆에 있는 콤포넌트라는 부분을 클릭하면
좀 더 자세한 기능들을 보실 수가 있습니다
위에 보시는 것처럼 기호들도 붙여넣기하여 화면에 보이게 할 수 있구요
메뉴 드롭다운 기능이나 라벨, 페이징 처리 시 디자인 등등
굳이 직접 html/css 코드를 입력하지 않아도 쉽게 사용할 수 있게끔 만들었어요
05. 부트스트랩 적용하기 예제
그럼 간략한 예로 위 사진처럼 홈페이지를 꾸며 본다고 할 때
어떻게 부트스트랩을 이용하면 좋을지 보도록 할게요
위 화면은 부트스트랩만을 이용한 것으로
css 부분은 하나도 건들지 않았습니다
우선 위의 메뉴바는 보통 nav 라는 이름의 태그를 가지고 있습니다
navigation의 줄임말로 통용되는 단어입니다
따라서 콤포넌트의 네비게이션이나 네비게이션 바 쪽에 가시면
다양한 디자인의 메뉴바들이 있는데요
저는 그 중에서 가장 기본형인 탭형을 그대로 가지고 왔습니다
빨간색으로 된 부분의 코드를 그대로 복사해서,
제 html 코드에 붙여 넣었습니다
부트스트랩 홈페이지와 다른 점이라곤
contact 옆에 메뉴를 하나 더 만들어 주기 위해
<li><a></a></li> 문장을 하나 복사하여 text만 contact 라고 써 준 게 다입니다
그럼 복붙만 했는데도 메뉴바가 생성됩니다
하지만 파란색이 전체 모니터 화면일 때
빨간색인 메뉴가 왼쪽에 바짝 붙어있는 게 보이실 거예요
너무 메뉴가 붙어 있으면 가독성이 떨어지므로
위의 사진처럼 만들어 주기 위해서
<ul></ul> 태그 전체를
<div class="container"></div> 로 감싸주면 자동으로 css 스타일이 적용되어
메뉴들이 화면 중앙에 여백을 가지고 배치된답니다
<div class="container">
<ul class="nav nav-tabs"><li></li></ul>
<div>
이런식으로 감싸 주시면 됩니다
여기에서 container는 임의로 지어낸 것이 아니라
부트스트랩에서 container 라는 클래스에 자동 적용된 스타일을
사용하기 위해서 쓰이는 고유명사라고 보시면 됩니다
위 사진에서와 같이 반응형 고정폭 즉, 화면이 줄어들면서 양 옆의 여백이
같이 적용되는 화면을 만들고 싶을 때에는 container,
양 옆의 여백 없이 전체 화면을 사용하고 싶을 때에는
container-fluid
이런 식으로 부트스트랩 홈페이지에서 이것저것 찾아보면서
필요한 기능들만 골라 복붙하시면 됩니다^^
그럼 메뉴바 아래에 있는 부분을 만들어 볼까요?
이 부분은 점보트론(Jumbotron)이라는 기능을 이용해서 만들었습니다
보시면 제가 수정한 거라곤 <p></p> 사이가 ... 으로 되어 있어
... 을 지우고 홈페이지에서 글자를 복사해 붙여넣은 것 밖에 없습니다
바로 위 코드처럼 부트스트랩 홈페이지에서 그대로 복사해서 붙여 넣었구요
물론 css 에서 손 볼 곳이 간혹 생기기는 하지만
디자인이 어려우신 개발자 분들에게는 부트스트랩만큼 고마운 존재가 없을 겁니다
하지만 여기서 유의할 점은
"배보다 배꼽이 크다"
일 텐데요
html/css 를 직접 만들 수 있고, 복잡하지 않은 작업에서도 부트스트랩을 가져다 쓰면
오히려 작은 무언가를 만들기 위해 덩치가 큰 부트스트랩을 끌어다 쓰는 거니까
어쩌면 용량의 효율성 면에서는 상당히 많이 떨어지겠죠??
그래서 부트스트랩이 개발자가 사용하기에 편리한 기능인 것은 맞지만
무조건적으로 사용하는 습관은 좋지 않습니다^^
이렇게 해서 css를 건들지 않고 부트스트랩에 있는
html 코드만 복사해서 화면을 만들어 보았구요
여기에 이어서 여러 가지 기능들을 붙이면
꽤 그럴듯한 홈페이지 메인화면이 될 수도 있겠죠?
부트스트랩 페이지를 하단으로 계속 내려보면
이렇게 예제들 부분도 있습니다
보시면서 똑같이 따라하는 것도 좋은 공부가 될 것 같네요>_<
'코딩IT리뷰' 카테고리의 다른 글
| 티스토리 블로그 검색 방문자 늘리는 방법 1. 네이버 웹마스터 등록하는방법 (0) | 2017.02.17 |
|---|---|
| 포토샵 cs6 단축키 모음 윈도두용/애플 맥용 photoshop cs6 shortcut key windows/mac os (0) | 2017.02.14 |
| 티스토리(tistory) 수익모델 텐핑으로 수익창출, 텐핑(Tenping) 설치하는 방법 (4) | 2017.02.07 |
| css position 을 이용하여 두 개의 이미지 겹치는 방법 / transition 을 이용하여 이미지 부드럽게 움직이기 (0) | 2017.02.03 |
| [티스토리 Tistory] 구글 애드센스(Google Adsense) 가입해서 애드센스 광고 게재하고 수익내는 방법 (5) | 2017.02.01 |
