[Bootstrap] 부트스트랩 시작하기 (v3.3.7)

01 부트스트랩이란

부트스트랩은 쉽고 빠른 프론트엔드 웹 개발을 위해 설계된 HTML, CSS, JS 프레임워크이다.

맞춤형 HTML, CSS 요소와 jQuery 플러그인을 제공하며 다양한 웹 브라우저 환경이나 스마트폰, 태블릿, 데스크탑에도 대응하여 크로스 브라우징(Cross Browsing)을 도와준다.

트위터에서 오픈 소스로 공개되어 원래 있던 디자인을 그대로 사용하거나 누구나 마음대로 수정하여 자유롭게 배포하는 것도 가능하다.

현재 계속 버전이 업데이트되고 있으며 현재 v4.0까지 나온 상태이지만 여기서는 v3.3.7으로 알아볼 것이다. 

02 부트스트랩으로 제작된 사이트

이곳(http://expo.getbootstrap.com/)으로 이동하여 부트스트랩으로 만들어진 다양한 웹 사이트를 확인할 수 있다.

03 부트스트랩 다운로드

먼저 부트스트랩 사이트(http://getbootstrap.com/docs/3.3/)에 들어가면 가장 중앙에 이런 화면이 나온다. 여기서 'Download Bootstrap'을 클릭한다.

(한국어로 번역된 사이트도 있지만 v3.3.2까지밖에 업데이트 되지 않았다. http://bootstrapk.com/)

그 다음에는 각자 목적에 맞는 걸로 다운로드 받으면 되는데, 지금은 가장 왼쪽에 있는 파일을 다운받아 사용할 것이다. 다운로드 버튼을 누르면 zip파일이 다운로드 된다.

bootstrap-3.3.7-dist.zip 파일을 정상적으로 압축 해제하면 아래와 같은 3개의 폴더가 생긴다. 이 폴더들이 저장되어 있는 경로는 이어서 부트스트랩을 사용할 때 필요하기 때문에 편의를 위해 폴더명을 'bootstrap'으로 바꿔주었다. 

04 부트스트랩 사용하기

다운로드가 완료되었으면 HTML 코드 내에 부트스트랩에서 제공하는 코드를 삽입해야 적용이 된다.

해당하는 코드는 여기서(http://getbootstrap.com/docs/3.3/getting-started/#template) 복사하여 사용하면 된다.

이 때 주의해야 할 부분은, 사진에서 노란색 박스로 표시한 부분이다. 경로를 제대로 확인해야 부트스트랩을 사용할 수 있다.

내가 테스트를 위해 만든 작업 폴더는 아래 사진과 같이 만들어졌다. test라는 root폴더 안에 bootstrap폴더가 있고, 부트스트랩을 적용시킬 html파일은 basic.html이라는 파일명으로 만들었다.

만약 basic.html에 위 소스코드를 그냥 복사-붙여넣기 시킨다면, html파일과 동일한 위치에 css, js라는 각각의 폴더가 존재하지 않기 때문에 정상적으로 적용이 되지 않는다.

css, js폴더는 bootstrap폴더 안에 들어있기 때문에 경로를 수정해 주어야 한다.

basic.html에서 경로를 다음과 같이 수정해 주어야 부트스트랩이 정상적으로 적용된다.

이제 적용이 제대로 되었는지 확인해 보자. 적용이 제대로 되었다면 오른쪽 사진과 같이 폰트가 바뀌어야 한다.

05 마치며

이로써 부트스트랩을 시작하는 가장 기본적인 템플릿을 사용해 보았다.

아직 'Hello, world!'가 출력되는 모습밖에 보지 못하였는데 다음 글부터는 다양한 컴포넌트를 직접 배치해 보며 그럴 듯한 웹 페이지를 만들어 볼 수 있도록 할 것이다.