부트스트랩 템플릿 사용하기

학교를 다니면서 프로젝트 과제, 또는 개인적인

웹 개발 공부 등 을 할때 부트스트랩 템플릿을

사용하면 정말정말 깔끔하고 이쁜 웹을 개발 할 수있다.

반응형 웹 디자인을 손쉽게 할 수 있는 부트스트랩은

폼이나 메뉴바, 드롭다운 메뉴 등 각 요소들을 잘 묶어놔서

쉽게 사용 할 수 있다.

하지만 내가 원하는 의도대로 만들기가(디자인) 아쉬울수 있다.

왜냐하면 css 적인 디자인이 전부 만들어져 있기 때문이다.

하지만 빠르게 웹 페이지를 만들어 낼수 있다.

먼저 부트스트랩 템플릿을 사용하는 법에 대해

알아보자. 먼저 자기가 사용하려는

디자인적 요소가 담긴 템플릿을 골라야한다.

이쁘고 기능을 많이 넣을수 있는 부트스트랩 템플릿은

대부분이 유료이며 해외 사이트에서 구매 해야한다.

이러한 사이트는 구글에 치면 금방 나온다.

나는 포스팅을 위해 누구나 다운받을수 있는

무료 템플릿 사이트에 가서 하나 다운받아 왔다.

구글에 "무료 부트스트랩" 을 검색하면

무료 부트스트랩 템플릿 사이트를 쉽게

찾을수 있을 것이다.

먼저 내가 받은 부트스트랩이다.

메인 화면을 보기위해 index.html을 실행시켜보자.

index.html화면이다 실행을 시키면 바로 저화면이 나오고

원페이지 방식이므로 마우스 스크롤을 내리다보면

위와 같은 화면들이 보이게 된다.

먼저 부트스트랩 템플릿을 다운받았으면

적용을 해야한다. 먼저 이클립스를 실행시킨다.

다음 다운 받은 부트스트랩 템플릿에서

css, js, img 등의 폴더들을 복사하여 이클립스

WebContent에 붙여넣는다.

다음 index를 복사하여 똑같이 

WebContent 에 붙여넣기 한다음

테스트를 위해 이클립스를 실행 시켜본다.

그럼 위와 같이 정상적으로 출력되는것을

확인할수 있다.

이제 여기서부터 자기가 마음에 들게

수정을 하거나 기능들을 붙여 놓으면 된다.

먼저 상단의 메뉴를 추가하고 싶다면

index.html 소스에서 상단 메뉴 소스 부분을 찾는다.

다음 메뉴를 추가해준다.

위와같이 메뉴를 추가해주게 되면

--- Before ---

--- After ---

새로운 메뉴가 하나 추가된다.

위와 같은 방식으로 추가하고 싶은 부분은

추가하고 삭제하고 싶은부분은 삭제를 할 수 있다.

유료 부트스트랩 템플릿에는

좀더 많은 디자인 적인 요소가

사용하기 쉽게 정리 되어있는데.

위와 같이 버튼 아이콘 등을 사용하기 쉽게

정리가 되어있다. 아이콘과

버튼 뿐만 아니라 다른 여러 폼 등도

정리 되어 있다.

하지만 학교 에서 과제용 또는 혼자 웹을

개발 해볼 때에는 무료 부트스트랩 템플릿에서

다운받아 사용 해도 괜찮다!!