반응형 웹사이트 만들기 (부트스크랩 프레임 워크 0)

부트스크랩(bootstrap)은 누구나 쉽게 웹사이트를 만들 수 있게 해주는 프레임워크로, 반응형 웹 사이트를 만들 때 필요한 HTML과 CSS를 그대로 가져다 문서를 만들 수 있고, 그 외 필요한 기능들은 자바스크립트 플러그인으로 제공하고 있습니다.

부트스크랩에 관련된 정보나 도움말은 부트스크랩 공식 홈페이지(www.getbootstrap.com)를 통해 얻을 수 있습니다. 이 사이트에는 부트스크랩의 기본 템플릿을 비롯해 자주 사용하는 형태의 웹 문서도 소개되어 있는데 이 문서들의 소스를 복사해 사용하면 순식간에 기본 문서를 만들 수 있습니다.

부트스크랩에서 제공하는 CSS는 웹 문서를 보기 좋게 꾸밀 수 있는 다양한 스타일을 제공하는데 자주 사용하는 버튼을 비롯해 여러 가지 요소에 미리 만들어놓은 클래스 스타일 이름만 지정하면 보기 좋게 꾸밀 수 있습니다. 또한 웹 문서를 인터랙티브하게 꾸며줄 여러 가지 화면 구성 요소인 컴포넌트(Components), jQuery 플러그인들도 그대로 가져다 사용할 수 있습니다. 단, 좀 더 자유롭게 활용하려면 HTML과 CSS 소스를 읽을 수는 있어야 합니다.

부트스크랩 다운로드하기

부트스크랩 소스는 공식 사이트(http://getbootstrap.com)에서 직접 다운로드해서 링크하는 방법과 CDN(Content Delivery Network)을 이용해 링크해서 사용하는 방법이 있습니다. CDN으로 링크하려면 항상 인터넷에 연결되어 있어야 하기 때문에 이 책에서는 인터넷이 연결되어 있지 않은 상태에서도 예제를 직접 만들어 확인할 수 있도록 다운로드해서 사용합니다. 하지만 항상 인터넷에 연결되어 있는 환경이거나 사이트를 완성한 후 웹 서버에 업로드해서 사용하려 한다면 CDN으로 링크해서 사용할 수도 있습니다.

방법 1 - 다운로드해서 링크하기

부트스크랩에서 다운로드할 수 있는 소스는 모두 세 가지 버전인데 그중에서 주로 CSS와 자바스크립트가 컴파일되어 있는 'Bootstrap' 버전을 다운로드해서 설치합니다.

'Source code'는 원래 소스 코드와 설명 문서 등 사용자의 이해를 도와줄 파일들로 구성됩니다. 소스를 분석하면서 공부하고 싶다면 이 버전을 다운로드해 보세요.

다운로드한 파일의 압축을 풀면 부트스크랩 버전이 표시된 폴더 (bootstrap-3.3.6-dist)가 만들어집니다. 그 안에 css와 js, fonts 폴더가 들어 있는데, 웹사이트 제작에 필요한 CSS와 자바스크립트 파일, 서체 파일을 별도의 폴더로 분리해 둔 것입니다.

* min 파일과 map 파일은 무엇일까요?

각 폴더를 열어보면 css 파일과 js 파일 외에 같은 이름을 가진 min 파일이 있습니다. min  파일은 css파일이나 js 파일에서 공백등을 제거해 파일의 크기를 작게 만든 것으로 웹 문서에 링크해서 사용합니다. css의 map 파일은 전처리기를 이용해 CSS를 생성할 때 전처리기에서 생성한 소스와 CSS 파일을 연결해 주는 파일입니다.

방법 2 - CDN 으로 링크하기

부트스크랩 공식 사이트에서 다운로드 페이지를 보면 다운로드 링크 외에도 CDN 방법을 알려주고 있습니다. CDN(Contents Delivery Network)이란 웹사이트를 제작할 때 필요한 파일들을 사용자 컴퓨터에 다운로드하지 않고 부트스크랩에서 제공하는 서버에서 링크해서 사용하는 것입니다. 

위 [Copy]를 클릭해 복사해서 사용하는 것이 가장 안전합니다.