Bootstrap - 홈페이지 개발 및 디자인을 위한 혁명적인 도구
- 퍼블리셔/Bootstrap
- 2012. 6. 23. 12:22
제목이 거창하지요....ㅎㅎㅎㅎ.
제가 부트스랩을 알고서부터 티스토리 블로그에 적용해볼려고 이것 저것 살펴보고 적용해보고 하는 과정에서 싸여만 가는 정보가 넘 많아서 이렇게 중간에 공유하게 됐습니다.
부트스트랩 ( http://twitter.github.com/bootstrap/index.html ) 은 html5, css3, javascript 로 홈페이지 제작을 도와주는 오픈소스기반의 프레임워크입니다.
자세한 내용은 위의 주소에 가면 나와있구요. 한글로 차근 차근 설명한 분이 있는데 nhn 개발팀에 박경일님으로 설명을 대신합니다.
제가 부트스트랩을 접했을때는 무엇보다도 자바스크립트에 대한 지식이 없어도 어느정도 응용이 가능하다는 점이였습니다.
또한 테마 또한 여러가지를 제공하고 있고 무엇보다도 격자(Grid) 레이아웃을 지원하기 때문에 반응형 웹사이트를 제작할 수 있는 미디어쿼리 작성이 쉽다는 점입니다.
부트스트랩은 css 나 js 등 원하는 구성요소만 가저다가 사용할 수 있습니다.
선택을 한 후 맨 아래에 다운로드 버튼을 클릭하면 됩니다.
부트스트랩 사이트에서도 원하는 부분만을 구성해서 다운로드 할수도 있지만 직접 색상을 수정하는것을 미리보기하면서 설정할 수도 있습니다.
http://stylebootstrap.info/
http://bootswatch.com/
개인적으로 두가지 정도의 테마가 맘에 드는것이 있는데 http://bootswatch.com/ 사이트에 가서 다운로드를 클릭하면 css 파일을 다운로드 받을수 있습니다.
다양한 샘플과 데모사이트도 있습니다. 커스터마이징을 하기 전에 둘러보시는것이 좋습니다.
아래는 부트스트랩에 있는 샘플페이지 입니다.
샘플 => http://twitter.github.com/bootstrap/examples.html
데모 페이지 => https://wrapbootstrap.com/
데모 페이지 중에서 맘에 드는 몇가지를 추려 봤습니다.
그중에서 개인적으로 http://wrapbootstrap.com/preview/WB0LX21H9 가 미리보기 하기도 좋고 색상도 좋습니다.
아쉬운점은 배경이 맘에 안드는군요..ㅎㅎㅎㅎㅎ
여하튼 데모 페이지 에 보시면 여러 사이트가 있으니 참고하시기 바랍니다.
사이트를 둘러보고 제작해보니 아쉬운점이 있었습니다. jquery는 부드러운 화면이동이라든가 jquery ui 에서 제공하는 아이콘이 있습니다.
부트스트랩도 아이콘을 제공하고 사용하는데요.....이런 부트스트랩의 아쉬운 부분을 jquery 를 이용해서 좀더 업그레이드시키는 노력이 있습니다.
http://addyosmani.github.com/jquery-ui-bootstrap/
여기서도 다운로드를 할 수 있습니다. 다운로드 받아보니 각각 분리되어 있어서 원하는 부분만 취할 수도 있습니다.
부트스트랩의 메인메뉴의 드롭다운을 보면 클릭하면 보여지고 감쳐지는데 반해 jquery에서는 부드럽게 내려오는 슬라이딩 효과를 준것 같습니다.
역시 부드러운 이동이나 jquery 의 달력등이 강점인것 같습니다.
업데이트나 기술적인 부분에 대해서는 블로그나 github에서 더 알아볼 수 있습니다.
http://addyosmani.com/blog/
https://github.com/addyosmani/jquery-ui-bootstrap
부트스트랩은 워드프레스에서도 적용됩니다.
무료로 부트스트랩의 테마를 사용할 수도 있고, 사이드바가 있는경우, 없는경우 모두 있고, 미디어쿼리나 옵션 등 다양하게 이용할 수 있습니다.
http://320press.com/wpbs/
코드나 적용방법 등 사용할 부분에 대해서 잘 알려주고 있습니다.
워드프레스를 위한 테마도 있지만 루츠 테마도 있습니다.
부트스트랩을 이용해서 티스토리 스킨을 만들어 봤습니다.
지금 블로그에 적용되어 있는 하단에 탭 아코디언을 적용해봤고, 사이드바는 아예 모두 표시하는것을 전제로 아코디언으로 만들어봤습니다.
제가 부트스랩을 알고서부터 티스토리 블로그에 적용해볼려고 이것 저것 살펴보고 적용해보고 하는 과정에서 싸여만 가는 정보가 넘 많아서 이렇게 중간에 공유하게 됐습니다.
부트스트랩 ( http://twitter.github.com/bootstrap/index.html ) 은 html5, css3, javascript 로 홈페이지 제작을 도와주는 오픈소스기반의 프레임워크입니다.
자세한 내용은 위의 주소에 가면 나와있구요. 한글로 차근 차근 설명한 분이 있는데 nhn 개발팀에 박경일님으로 설명을 대신합니다.
제가 부트스트랩을 접했을때는 무엇보다도 자바스크립트에 대한 지식이 없어도 어느정도 응용이 가능하다는 점이였습니다.
또한 테마 또한 여러가지를 제공하고 있고 무엇보다도 격자(Grid) 레이아웃을 지원하기 때문에 반응형 웹사이트를 제작할 수 있는 미디어쿼리 작성이 쉽다는 점입니다.
커스터마이징(Customizing)
부트스트랩은 css 나 js 등 원하는 구성요소만 가저다가 사용할 수 있습니다.
선택을 한 후 맨 아래에 다운로드 버튼을 클릭하면 됩니다.
부트스트랩 사이트에서도 원하는 부분만을 구성해서 다운로드 할수도 있지만 직접 색상을 수정하는것을 미리보기하면서 설정할 수도 있습니다.
http://stylebootstrap.info/
http://bootswatch.com/
개인적으로 두가지 정도의 테마가 맘에 드는것이 있는데 http://bootswatch.com/ 사이트에 가서 다운로드를 클릭하면 css 파일을 다운로드 받을수 있습니다.
다양한 샘플과 데모사이트도 있습니다. 커스터마이징을 하기 전에 둘러보시는것이 좋습니다.
아래는 부트스트랩에 있는 샘플페이지 입니다.
샘플 => http://twitter.github.com/bootstrap/examples.html
데모 페이지 => https://wrapbootstrap.com/
데모 페이지 중에서 맘에 드는 몇가지를 추려 봤습니다.
 |
 |
 |
 |
그중에서 개인적으로 http://wrapbootstrap.com/preview/WB0LX21H9 가 미리보기 하기도 좋고 색상도 좋습니다.
아쉬운점은 배경이 맘에 안드는군요..ㅎㅎㅎㅎㅎ
여하튼 데모 페이지 에 보시면 여러 사이트가 있으니 참고하시기 바랍니다.
jQuery UI Bootstrap
사이트를 둘러보고 제작해보니 아쉬운점이 있었습니다. jquery는 부드러운 화면이동이라든가 jquery ui 에서 제공하는 아이콘이 있습니다.
부트스트랩도 아이콘을 제공하고 사용하는데요.....이런 부트스트랩의 아쉬운 부분을 jquery 를 이용해서 좀더 업그레이드시키는 노력이 있습니다.
http://addyosmani.github.com/jquery-ui-bootstrap/
여기서도 다운로드를 할 수 있습니다. 다운로드 받아보니 각각 분리되어 있어서 원하는 부분만 취할 수도 있습니다.
부트스트랩의 메인메뉴의 드롭다운을 보면 클릭하면 보여지고 감쳐지는데 반해 jquery에서는 부드럽게 내려오는 슬라이딩 효과를 준것 같습니다.
역시 부드러운 이동이나 jquery 의 달력등이 강점인것 같습니다.
업데이트나 기술적인 부분에 대해서는 블로그나 github에서 더 알아볼 수 있습니다.
http://addyosmani.com/blog/
https://github.com/addyosmani/jquery-ui-bootstrap
WordPress Bootstrap
부트스트랩은 워드프레스에서도 적용됩니다.
무료로 부트스트랩의 테마를 사용할 수도 있고, 사이드바가 있는경우, 없는경우 모두 있고, 미디어쿼리나 옵션 등 다양하게 이용할 수 있습니다.
http://320press.com/wpbs/
코드나 적용방법 등 사용할 부분에 대해서 잘 알려주고 있습니다.
워드프레스를 위한 테마도 있지만 루츠 테마도 있습니다.
부트스트랩을 이용해서 티스토리 스킨을 만들어 봤습니다.
지금 블로그에 적용되어 있는 하단에 탭 아코디언을 적용해봤고, 사이드바는 아예 모두 표시하는것을 전제로 아코디언으로 만들어봤습니다.