1. 부트스트랩 파일 내려받기
http://twitter.github.com/bootstrap/
위 링크로 이동하면 트위터 부트스트랩 홈페이지가 나타납니다. 부트스트랩 파일을 내려받는 방법은 3가지가 있습니다.
우선 기본적인 파일을 내려받으려면 파란색의 “Download Bootstrap” 버튼을 클릭하고, 부트스트랩 관련 전체 파일을 내려받으려면 “GitHub project” 링크를 클릭해서 페이지를 이동한 후, zip 파일을 내려받으면 됩니다. 마지막 방법은 메뉴 상단의 Customize 링크를 클릭해서 원하지 않는 부분을 제거하고 내려받는 방법입니다. 이 책에서는 아이콘의 활용도가 높은 Font Awesome 폰트 아이콘을 사용할 것이므로 Customize 링크를 클릭해서 이동합니다. 또한 부트스트랩의 사용법을 참고하기 위해서는 부트스트랩 관련 파일을 내려받아서 내 컴퓨터에 저장하고 사용하는 것이 좋으므로 “GitHub project” 링크를 클릭해서 zip 파일을 내려받으세요.
Bass CSS에서 Icons를 체크 해제하고 하단으로 이동한 후 “Customize and Download” 버튼을 클릭해서 내려받습니다.
압축을 풀고 각 폴더를 열어보면 스타일시트 파일, 아이콘 이미지 파일, 자바스크립트 파일이 있습니다. min은 코드의 여백을 제거해서 파일 용량을 축소한 파일이며 아이콘 파일은 폰트 아이콘으로 대체할 것이므로 무시해도 됩니다. 이렇게 사용자 정의해서 파일을 내려 받으면 부트스트랩 스타일시트가 기본 파일인 bootstrap.css에 반응형 디자인용인 bootstrap-responsive.css가 포함되기 때문에 하나의 파일이 됩니다. bootstrap 폴더를 C 드라이브에 이동해 놓습니다.
전체 파일의 내용을 보면 docs 폴더에 부트스트랩 홈페이지와 동일한 파일들이 있습니다. Assets 폴더에는 이전에 내려받은 파일과 같은 폴더가 있지만 CSS 폴더를 보면 스타일시트가 두개로 나눠져있습니다. docs.css는 위 html 파일을 만들기 위한 스타일시트입니다. 일부 부트스트랩 스타일 시트를 사용하지만 레이아웃이나 원하는 이 페이지만의 디자인으로 만들기 위해서 별도의 스타일시트를 적용한 것입니다. 각 html 파일을 클릭하면 부트스트랩의 모든 내용을 볼 수 있으며 사용자 정의 파일을 클릭해서 사용자정의를 하고 바로 내려받을 수도 있습니다.
2. Font Awesome 파일 내려받기
http://fortawesome.github.com/Font-Awesome/
위 링크로 이동하면 아래와 같은 화면이 나타납니다.
노란색의 내려받기 버튼을 클릭해서 파일을 내려받습니다. 폰트 아이콘은 폰트와 같은 성질을 갖고 있으므로 크기 변경이나 색상변경이 자유롭니다. 우측의 큰 물방울 이미지도 이 아이콘으로 만들어진 것입니다.
압축을 풀고 CSS 폴더로 들어가서 두 개의 스타일시트 파일을 복사해서 부트스트랩 CSS 폴더에 붙어넣고 font 폴더는 그대로 복사해서 부트스트랩 폴더에 붙여넣습니다. 그러면 아래와 같이 됩니다.
3. HTML 파일과 스타일시트 파일 만들기
앱타나 스튜디오(http://www.aptana.com/products/studio3)를 열고 C 드라이브에 저장한 부트스트랩 폴더를 오른쪽 마우스 클릭하고 Promote to Project를 클릭합니다.
프로젝트 폴더를 대상으로 다시 오른쪽 마우스 클릭해서 HTML5 템플릿을 선택합니다.
html 태그에서 lang=”ko”로 수정합니다. 반응형 디자인에서 필요한 아래의 코드는 이미 만들어져 있습니다.
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
</head> 태그 바로 위에 아래의 코드를 삽입합니다. link를 입력하고 탭 키를 치면 코드가 자동으로 만들어집니다. 그런 다음 href=””의 따옴표 안에 스타일시트의 경로를 삽입하면 됩니다.
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
<link rel="stylesheet" href="css/font-awesome.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
부트스트랩, 폰트오썸 스타일시트를 입력하고 마지막으로 스타일시트를 수정할 메인 스타일시트를 입력합니다.
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
다음 줄에 위 코드를 입력합니다. 이것은 IE 9 이전 버전이 HTML5의 새로운 태그를 인식하지 못해서 블록요소로 인식하도록 하는 IE 핵입니다. 이것이 없으면 <article>이나 <section>과 같은 HTML5의 블록 요소를 인식하지 못해서 구버전의 IE에서 이상하게 나타나는 것을 방지합니다.
CSS 폴더를 대상으로 오른쪽 마우스를 클릭해서 style.css라는 이름의 빈 스타일시트 파일을 만듭니다. 이곳에 다음의 코드를 입력합니다.
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
* { font-family: 'Nanum Gothic', sans-serif; }
구글 웹폰트 사이트에서 나눔고딕체를 가져와서 모든 폰트에 이 폰트를 적용합니다. 별표( * )는 모든 요소를 의미합니다.
<h1> 태그 안에 한글로 입력하고 저장한 다음 메뉴에서 Window=>Show View=>Web Browser를선택하면 내장 웹브라우저가 열립니다. 주소 입력란에 파일의 경로를 입력하고 우측 끝의 세모를 클릭합니다. 한글로 나눔고딕체로 나와야 정상입니다. 외장 웹브라우저에 열고자 하면 윈도우탐색기의 부트스트랩 폴더에서 index.html 파일을 클릭하면 됩니다.
