2016년 1월 21일 목요일

Bootstrap : 부트스트랩(Bootstrap) 사용하기 및 참조 사이트

요즘은 홈페이지 프레임워크로 Bootstrap 를 많이 쓴다.
이게 너무 흔하게 사용되서 사이트들이 개성이 죽어버린다는 둥, 프레임워크가 덩치가 너무 커서 사이트 속도가 저하된다는 둥... 해서 사용해서는 안된다고 주장하는 사람들이 있지만, 그만큼 손쉽게 뭔가 있어 보이는 사이트를 만들수 있어 안쓰기도 좀 그렇다.
(사실 IE8 을 지원하는 프레임워크가 흔하지 않아 어쩔수 없이 쓰는 경향이 있음.)

뭐, 그래도 사용법은 익혀 두는게 좋다. 쓸수 있지만 안쓰는것과, 쓸줄 몰라서 안쓰는것의 차이는 크니까.

이런 종류의 프레임웤의 사용법는 다 그렇지만, 그냥 다운받아 링크만 지정해 놓으면 된다.

배포사이트 : http://getbootstrap.com/



여기서 다운 받으면 됨.


다운 받을 수 있는 파일의 종류가 몇가지 있지만, 학술적으로 관심이 있는 사람이 아니라면 그냥 "Bootstrap" 을 받으면 됨.


다운 받은 파일의 압축을 풀어서...


저렇게 사용하고자 하는 사이트에 복사해 넣으면 됨.
그리고 사용할 Html 페이지에서...


상단에 "bootstrap.min.css" 파일을 링크해주고, 하단에 "bootstrap.min.js" 파일을 링크 해주면 기본적인 사용 준비는 끝.

주의 할점은 이게 "jQuery" 기반이라 "jQuery" 링크를 꼭 기록해 주어야 한다는 점.
(사실 자바스크립트 플러그인을 안쓴다면 없어도 되지만, 자바스크립트 플러그인을 안쓰는 경우라면 궂이 이 무거운 bootstrap 을 쓸 이유가 없으니...)
어째서 스타일 시트는 상단에 기록하고, 자바스크립트는 하단에 기록하는지는 모르겠지만, 기본 사용법에 저렇게 하라고 되어 있으니 그냥 그렇게 하도록 하자.

예제 소스는...


배포 사이트의 "Components" 메뉴에 있는 "Dropdowns" 를 사용.
이렇게 해놓고, 웹브라우저에서 보면...


이렇게 뭔가 있어보이는 효과가 적용된 웹페이지를 간단하게 만들수 있음.

원래 배포 사이트는 영문이지만....

한글 부트스트랩 사이트 : http://bootstrapk.com/

여기서 한글로 번역된 내용을 볼 수 있으니, 참고.