안녕하세요. 개발 토끼입니다.
현재 CSS 관련 강좌를 진행하고 있습니다. 하지만, CSS 기본 강좌는 아주아주 긴 여정이 될 것이라 많은 분들에게 도움이 되는 좋은 강좌를 제공해드리기 위해 다양한 강좌를 같이 진행하고자 합니다.
그래서 오늘부터 트위터 부트스트랩 강좌를 시작하려 합니다.
많이 부족하지만, 계속적인 공부를 통해 강좌를 계속 업그레이드 하도록 하겠습니다.
먼저 개발환경은 다른 강좌와 동일하게 JetBrains의 웹스톰을 사용할 것입니다.
하지만, 다른 IDE를 사용해도 무방합니다. 그 이유는 개발 방법론은 비슷하기 때문이죠. ㅎㅎㅎㅎ
그럼 강좌를 시작해보겠습니다.
1. 부트스트랩이란 무엇인가?
부트스트랩은 트위터(twitter)에서 개발한 UI 라이브러리 입니다.
이 부트스트랩을 탄생한 이유는
첫번째, 웹 사이트를 개발할 때 웹 사이트 디자인 때문에 개발 시간이 길어지는 문제를 해결하기 위해 만들어졌습니다.
두번째, 모바일 환경에 적합한 반응형 웹 사이트 개발을 위해 만들어졌습니다.
개인적으로 생각하기에 가장 큰 이유는 첫번째 인것 같습니다.
정말 웹 사이트를 개발할 때 웹 사이트의 실제 기능 구현보다 디자인을 구현하는 데 시간이 엄청 오래 걸립니다. 웹사이트 기능이 더 중요함에도 불구하고 사용자들은 일단 웹 사이트 디자인을 보고 이 사이트의 첫 인상을 구축하기 때문이죠.
어느정도 규모가 있는 회사들은 디자이너에게 맡겨 유려한 웹 사이트 디자인을 구축할 수 있으나 개인 개발자 혹은 스타트 업에서는 디자이너의 힘을 빌리기가 힘들기 때문에 수준급의 웹 사이트 디자인을 뽑아내기가 힘들어 집니다.
그래서 부트스트랩이 각광 받는 이유라고 볼 수 있죠.
2. 부트스트랩 공식 사이트 방문하기
부트 스트랩 공식 사이트 주소는 다음과 같습니다.
영문으로 된 사이트 이므로 영어 울렁증이 있으신 분들은 어려우 실 수도 있습니다.
그래서 한글화 번역된 사이트도 알려드립니다. 단, 이 사이트는 부트스트랩 공식 사이트에서 파생된 한글 사이트가 아님을 알려드립니다. (일반 개인 사이트)
3. 부트스트랩 공부를 위한 프로젝트 생성
부트스트랩 공부를 위해 웹스톰을 실행합니다.
- 웹스톰 첫 화면 -
첫 화면에서 Create New Project를 선택해서 새 프로젝트를 만들어 줍니다.
- 프로젝트 생성 화면 -
프로젝트 생성화면 왼쪽 메뉴에 보면 어러가지 프로젝트 생성을 할 수 있는 템플릿이 있습니다.
우리는 공부 차원에서 Twitter Bootstrap 템플릿을 사용하지 않고
Empty Project를 선택해 새 프로젝트를 생성 할 것입니다.
저는 프로젝트 이름을 bootstrapStudy라고 명명 하겠습니다.
그리고 Create 버튼을 클릭해 프로젝트를 생성합니다.
- 프로젝트 생성 후 첫 화면 -
프로젝트가 생성되면 위와 같이 화면이 나오게 됩니다.
프로젝트 주 폴더 명도 앞서 bootstrapStudy라고 설정했기 때문에 bootstrapStudy라고 출력됩니다.
4. 프로젝트 폴더 구성하기
HTML 프로젝트를 만들었을 때 가장 먼저 해야할 것은 폴더 구성을 하는 것입니다.
하지만, 이것은 어렵지 않습니다. 간단하게 먼저 말씀 드리면 CSS와 자바스크립트를 관리할 폴더를 생성해주는 것이죠.
그럼 만들어볼까요?
먼저 왼쪽 프로젝트 메뉴에서 bootstrapStudy라는 부분에 마우스를 올려 놓고 마우스 오른쪽 버튼을 클릭해주세요.
Directory 항목을 선택해 폴더를 만들어줍니다.
첫번째 폴더 명은 css로 적어주고 OK를 눌러주세요.
두번째 폴더도 동일한 방식으로 만들되 다만 이름을 js 라고 입력해주고 OK를 클릭합니다.
css 폴더에는 css 파일만 담을 예정이고 js는 자바스크립트 파일만 담을 예정이라 이렇게 폴더 구성을 해줍니다.
- 폴더 구성이 완료된 모습 -
그 다음 index.html을 추가 해줄 것입니다.
다시 프로젝트 메뉴에서 마우스 오른쪽 버튼을 클릭해서 New에서 HTML File을 선택해줍니다.
이름은 index라고 적어주고 OK를 눌러줍니다.
이때 이름 부분에 index.html이라고 입력하셔도 되고 그냥 index라고 입력하셔도 됩니다.
- 모든 구성이 완료된 모습 -
이제 기본 프로젝트 구성은 모두 완료가 되었습니다.
다음 단계로 넘어가볼까요?
5. 부트스트랩 라이브러리 추가 하기.
부트스트랩을 쓰기 위해선 라이브러리를 우리 프로젝트 내에 추가 해줘야 합니다.
부트스트랩 라이브러리는 getbootstrap.com 공식 홈페이지에서 다운로드 할 수 있습니다.
공식 홈페이지에 가셔서 Download Bootstrap을 클릭합니다.
이 화면에서 왼쪽에 보시면 Download Bootstrap을 클릭해줍니다.
그러면 압축된 파일을 다운로드 받게 될 것입니다.
다운로드 받은 파일이 압축 되어 있으므로 압축을 풀어주세요.
어떤 압축 프로그램을 쓰셔도 동일하게 풀 수 있으나 저는 윈도우 기본 압축 풀기를 시행하겠습니다.
- 압축 해제된 폴더의 모습 -
부트스트랩은 CSS, 자바스크립트(js), 폰트로 구성이 되어 있습니다.
그럼 이 파일들을 이제 프로젝트로 옮겨 봅시다.
사실 폴더 전체를 옮겨도 무방하나 배우는 과정이니 정석적인 방법으로 접근하겠습니다.
위 파일들을 마우스로 드래그 해서 선택해주세요.
선택한 파일들을 모두 프로젝트의 css 폴더에다가 드래그앤 드롭 시켜줍니다.
단순히 ctrl + c & ctrl + v 하셔도 무방합니다.
js 폴더에 있는 것들도 동일한 방식으로 옮겨주세요.
파일 이동에 관한 확인 창이 나오면 특별히 수정할 것 없이 그냥 OK를 클릭합니다.
이번엔 폰트 폴더 옮기기 입니다.
앞서 html 프로젝트에서 폰트 폴더는 만들어주지 않았죠. ㅎㅎㅎㅎ
그래서 폴더 통채로 옮겨보도록 하겠습니다.
앞서 드래그앤 드롭 방식으로 옮겨주되 다만, 이번엔 bootstrapStudy 주 폴더에다가 옮겨주세요.
파일 이동 확인 창에서 특별한 수정 없이 OK를 클릭 합니다.
라이브러리가 모두 옮겨진 프로젝트의 모습입니다.
위와 같이 모두 옮겨져야 부트스트랩 공부를 하심에 불편함이 없을 것입니다.
6. index.html에 라이브러리 추가 하기
추가된 라이브러리도 HTML에서 사용하려면 index.html 내에 해당 라이브러리를 추가하겠다는 명령이 필요합니다.
- 빈 상태의 index.html 모습 -
위와 같이 빈 상태에서는 프로젝트를 실행해도 부트스트랩이 동작하지 않습니다.
그럼 부트스트랩을 추가 해볼까요?
먼저 <head> 태그에 <title> 태그 밑에 <link rel="stylesheet" href="css/bootstrap.css"> 라고 추가 해줍니다.
이는 부트스트랩에서 제공하는 css 파일을 사용하겠다는 뜻이죠.
그 다음 <body> 태그 마지막엔
1 | <script type="text/javascript" src="js/bootstrap.js"></script> | cs |
를 추가해줍니다.
이는 부트스트랩에서 필요한 자바스크립트를 사용하겠다는 뜻입니다.
근데 여기서 스크립트 파일을 body 태그 마지막에 적어준 이유는
브라우저가 스크립트 파일을 읽는 데 시간이 조금 걸리기 때문에 제일 마지막에 로드 하기 위해
body 태그 마지막에 적어준 것입니다.
7. jQuery(제이쿼리) 추가 하기.
부트스트랩의 bootstrap.js 는 내부적으로 순수 자바스크립트가 아닌 jQuery로 구성되어 있습니다. 그래서 반드시 제이쿼리를 추가 해줘야 부트스트랩을 사용할 수 있죠.
1 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> cs
이 부분도 같이 추가 해줍니다.
이 때 주의 사항은 bootstrap.js 보다 앞에 적어줘야 합니다.
앞서 설명했듯이 부트스트랩 자바스크립트는 제이쿼리가 없으면 동작을 하지 않기 때문에 제이쿼리를 먼저 로드 시킨 후 bootstrap.js 를 로드해야 합니다.
- 모든 것이 적용된 index.html 모습 -
이로서 모든 것이 정상적으로 적용되었습니다.
이제 부트스트랩 공부에 있어 문제될 것이 없게 되었습니다.
다음 시간엔 부트스트랩을 태그에 적용해서 기존 HTML UI와 부트스트랩 UI가 적용된 내용을 살펴 보도록 하겠습니다.
첫 시간부터 엄청 장황하게 블로그를 적었네요.
오늘은 이만 마치겠습니다.
읽어주셔서 감사합니다.
'IT Story > about Bootstrap' 카테고리의 다른 글
| [Bootstrap] 4. table을 꾸며 게시판처럼 만들기 (25) | 2016.12.02 |
|---|---|
| [Bootstrap] 3. Helper 클래스를 이용하여 텍스트를 꾸며보자 (0) | 2016.11.11 |
| [Bootstrap] 2. 부트스트랩 버튼 사용하기 (8) | 2016.11.11 |