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

윌리엄 2017-05-02 (화) 16:46 6년전 5510  

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

 

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

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

 

 

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


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

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

 

 

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


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

 

764135e732c15df2a6b15de3485a7a82_1493708

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

764135e732c15df2a6b15de3485a7a82_1493708

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

 

764135e732c15df2a6b15de3485a7a82_1493708

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

764135e732c15df2a6b15de3485a7a82_1493708

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

764135e732c15df2a6b15de3485a7a82_1493708
 

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

 

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

 

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

 

764135e732c15df2a6b15de3485a7a82_1493708 

 

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

 

 

 

 

 

 

 


764135e732c15df2a6b15de3485a7a82_1493709

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


764135e732c15df2a6b15de3485a7a82_1493709

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

 

764135e732c15df2a6b15de3485a7a82_1493709

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

 

764135e732c15df2a6b15de3485a7a82_1493710
 

 

 

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

 

764135e732c15df2a6b15de3485a7a82_1493710
 

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

 

764135e732c15df2a6b15de3485a7a82_1493711
 

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

 

메카리워즈 Image Map


모바일 버전으로 보기