차이
문서의 선택한 두 판 사이의 차이를 보여줍니다.
양쪽 이전 판이전 판다음 판 | 이전 판 | ||
tech:bootstrap [2014/07/21 02:18] – V_L | tech:bootstrap [2019/07/06 20:57] (현재) – 59.10.111.63 | ||
---|---|---|---|
줄 1: | 줄 1: | ||
+ | {{tag> | ||
======트위터 부트스트랩 (Twitter Bootstrap)====== | ======트위터 부트스트랩 (Twitter Bootstrap)====== | ||
- | 웹 개발용 주춧돌 꾸러미 (css라이브러리) | + | 웹 개발용 주춧돌 꾸러미 (css라이브러리) |
* [[http:// | * [[http:// | ||
줄 11: | 줄 12: | ||
* Javascript plugins : http:// | * Javascript plugins : http:// | ||
- | * [[http:// | ||
* [[httP:// | * [[httP:// | ||
=====틀===== | =====틀===== | ||
줄 24: | 줄 24: | ||
데모 -- http:// | 데모 -- http:// | ||
- | =====변경 | + | ====AdminLte==== |
- | ====부트스트랩 3.0 출시==== | + | |
- | 2013년 9월에 부트스트랩 3.0 이 출시되었습니다. | + | |
- | 간단하게 해당 내용을 정리합니다. | + | https:// |
- | ===디자인=== | ||
- | 기존의 CSS의 그라데이션을 활용한 표현에서 단순하고 평면적 느낌의 모습으로 바뀌었습니다. 많은 사람들이 부트스트랩의 기본 디자인으로 부터 확장하고 변형하기 용이한 모습이 되었고, 최근에 주목받은 평면형 디자인을 수용하면서, | ||
- | ===그리드, | ||
- | 이전에는 데스크탑 기준의 반응형 웹 체계였다면 지금은 모바일 기준의 반응형 웹 체계가 되어, 모바일, 타블렛, 데스크탑 각자에서 12열을 중심으로 원하는 그리드를 원하는 단말로 표현할 수 있도록 매우 강력해 졌습니다. 자세한 내용은 아래의 링크를 참고하세요. | ||
- | 미리살펴보는 부트스트랩 3.0 모바일 그리드 지원 체계 한국어 | ||
- | [[http:// | ||
- | Bootstrap 3.0 RC1 #Grid | ||
- | ===LESS체계의 향상, Sass, Stylus 포팅 간접지원=== | ||
- | 부트스트랩은 기본적으로 LESS라는 CSS 전처리기로 작성되어 있는데, CSS대신 LESS로된 패키지를 사용하면 서버 측에서 CSS를 다이나믹하게 생성해서 활용할 수 있습니다. | ||
- | |||
- | 이번 부트스트랩 3에서는 LESS 작성 부분의 상당수를 다시 만들어 Mix-in을 하기 쉽도록 변화하였습니다. Mix-in은 CSS에 변수와 함수를 넣고 적절히 추상화 하여 재사용과 체계를 만들기 용이한 CSS 전처리기의 기능입니다. 이로써 서버에서 LESS를 통해 부트스트랩 3를 다이나믹하게 생성하고 변형하기 좀 더 편해졌다고 볼 수 있습니다._ | ||
- | |||
- | Node Packages | ||
- | ===모바일에 적합한 애니메이션=== | ||
- | 대다수의 스마트폰들은 CSS 트랜지션을 지원하는데 3버전으로 넘어오면서 가급적 자바스크립트로 DOM을 직접 움직이는 애니메이션을 자제하고 CSS를 통해 애니메이션을 하도록 강화했습니다. | ||
- | |||
- | 많은 부분에 애니메에션이 들어있는 것은 아니지만, | ||
- | |||
- | ===IE7의 지원 중단=== | ||
- | 이제 더 이상 IE7을 지원하지 않습니다. 앞으로 IE7로 부트스트랩 3를 사용한 페이지를 보면 기능적으로 혹은 모양새가 적절히 표현되지 않을 수 있습니다. 이제 IE7은 잊을 때가 된 듯 합니다. 마찬가지로 Firefox 3.6 이하 버전도 지원하지 않게 되었습니다. | ||
- | |||
- | ===아이콘을 폰트로 지원=== | ||
- | 기존의 아이콘은 스프라이트 이미지로 되어있었는데 이번 부터는 폰트를 통해 지원합니다. 아이콘 폰트는 벡터로 구성되어 있어서 확대, 축소 시에도 이미지 변형이나 손실이 없기 때문에 좀 더 다양하게 활용이 가능해 졌습니다. 아이콘은 별도의 사이트로 분리되어 관리됩니다. | ||
- | |||
- | 아이콘을 폰트로 만드는 방식은 여러 잇점이 있는데 아래의 링크를 통해 확인해 보세요. | ||
- | |||
- | * Glyphicons - 부트스트랩에서 공식 지원하는 아이콘 | ||
- | * Say Hello to Octicons - 깃허브에서 사용한 사례 | ||
- | * The Making of Octicons - 깃허브에서 만든 방법 | ||
- | * Font Awsome - 부트스트랩에서 활용 가능 한 아이콘 폰트 | ||
- | * Icon Fonts are Awsome - 아이콘 폰트 활용 법 | ||
- | * Fontello - 나만의 아이콘 폰트를 만들어 주는 서비스 | ||
- | |||
- | ===그외의 변경점=== | ||
- | 기존의 부트스트랩 2를 사용하고 있고, 3로 이전을 염두해 두고 있다면 아래의 내용을 알아 두는 것이 유용합니다. | ||
- | |||
- | * 테이블 : 반응형 웹 유틸리티 지원 | ||
- | * 버튼 : 기본 CSS클래스가 .btn에서 .btn .btn-default로 변경 | ||
- | * 폼 : .input-prepend와 .input-append를 .input-group로 간략화 | ||
- | * 폼 : .form-search 삭제 | ||
- | * 폼 : 체크박스와 라디오 버튼 마크업시 감싸는 <div> 필요 | ||
- | * 네비게이션 : .nav-list를 .list-group로 대체 | ||
- | * 네비게이션 바 : .navbar-search 삭제 및 .navbar-form 대체 | ||
- | * 네비게이션 바 : 기본적인 마크업 변경. | ||
- | * .navbar-inner 제거 | ||
- | * .navbar > .nav를 navbar-nav로 변경 | ||
- | * .btn-navbar를 navbar-toggle로 변경 | ||
- | * 모달 : .hide클래스 불 필요. 모달 마크업시 .hide 클래스 제거 요함. | ||
- | * 리스트 그룹 : 모바일에 적합한 리스트 그룹 새로 추가 | ||
- | * 패널 : 내용을 별도로 분리하기 용이한 패널 새로 추가 | ||
- | * 캐러셀 : 기본적인 마크업 변경. .carousel-control 필요 | ||
- | |||
- | 좀 더 자세한 내용은 부트스트랩 깃허브 저장소의 WIP : Bootstrap 3.0을 참고 하세요. | ||
- | |||
- | ^ 누구나 수정하실 수 있습니다. [[http:// | ||
- | |||
- | {{tag> |