부트스트랩으로 간단하게 홈페이지를 만들기 - 1. 브래킷, 부트스트랩 설치 및 부트스트랩 기본 소스 확인하기

부트스트랩으로 간단하게 홈페이지 만들기를 3회 동안 연재를 하게 될 윌리엄입니다.

홈페이지를 만들기 위해 구글 크롬, 웹 개발툴, 부트스트랩 템플릿을 설치를 하여야 합니다.

우선 먼저 브래킷, 부트스트랩을 설치를 해보도록 합시다.

구글 크롬 : https://www.google.com/chrome/browser/desktop/index.html

​크롬이 아직 설치가 되지 않으셨다면 위의 링크에 접속을 하여서 설치를 하면 됩니다.

구글 크롬이 설치가 되어 있다면 아래의 순서대로 진행을 하면 됩니다.

브래킷 다운로드 : http://brackets.io/

​브래킷 다운로드를 위해 위의 링크에 접속을 합니다. 

사이트 상단에 Download Brackets 1.9를 클릭을 하여 브래킷을 다운로드를 받습니다.



Brackets Destination Folder에서 Next를 클릭을 합니다.

Install Brackets에서 Install을 클릭을 합니다.



브래킷이 설치가 진행이 됩니다.


 

설치가 완료가 되면 Finish를 클릭을 합니다.

부트스트랩 템플릿을 다운로드를 받기 위해 아래의 링크에 접속을 합니다.

부트스트랩 템플릿 다운로드 : https://startbootstrap.com 

부트스트랩 템플릿 사이트에 접속을 하면 다양하고 아름다운 템플릿들이 많습니다. 그 중에 굉장히 심플한 것도 있습니다.

여러 템플릿 중에서 하나 선택을 해서 3회까지 연재를 하겠습니다. 이 중에 Creative 템플릿으로 선택을 합니다. (나중에는 원하는 템플릿을 이용을 하여 수정을 하여도 됩니다.)

Creative 템플릿에서 Download를 클릭을 합니다.

다운로드 받은 Creative 템플릿 압축파일을 열게 되면 위와 같은 구조로 구성이 되어 있습니다. 이 중에서 수정을 해야할 부분은 index.html 파일입니다. img폴더는 이미지가 들어있습니다. js폴더는 javascript파일이 들어있습니다. javascript는 주로 홈페이지에 간단한 대화창이나 동작을 할 때 사용을 합니다. css는 홈페이지의 태그를 예쁘게 꾸밀 때 사용을 합니다. 태그는 예를 들어 이미지를 표시를 하거나 글자 크기를 크게하거나 작게 할 때 등 다양하게 활용을 할 수 있습니다.

Creative 템플릿 압축파일을 압축을 풉니다. 압축을 푼 폴더 안으로 들어옵니다. index.html 파일을 오른쪽 마우스를 누르면 나타나는 서브 메뉴에서 Open with Brackets를 클릭을 합니다. 설치했던 웹 개발툴 브래킷이 실행이 되게 됩니다.

index.html이 브래킷에서 열린 것을 확인을 할 수 있습니다. Creative 템플릿의 결과를 확인을 하기 위해 상단 오른쪽에 번개 표시를 클릭을 합니다.

새로운 웹 브라우저가 뛰워지면서 Creative 템플릿의 결과를 확인을 할 수 있습니다. 크롬을 기본 브라우저로 사용을 한다면 인터넷 익스플로러 대신에 구글 크롬이 뛰워지게 됩니다.