Bootstrap이란?
- 웹 디자인용 오픈소스 프레임워크
- HTML, CSS, JS 사용
- 트위터에서 개발
그런데 Framework란?
- 소프트웨어의 생산성을 높이기 위해 개발된 방법
- 반복된 구조나 기능들을 추상화시켜 재사용이 가능하도록 하는 소프트웨어 환경
- 즉, 미리 만들어놓은 기능을 어플리케이션에서 손쉽게 재사용할 수 있도록 해준다
- 따라서 라이브러리에 비해 프레임워크의 주도권이 강함 (전용 문법 多)
Bootstrap의 장점
- 오픈소스
- 디자인 코딩 부담 완화
- Grid disply를 바탕으로 다양한 사이즈와 비율을 지원
- 반응형 웹 대응 쉬움
Bootstrap의 단점
- 기존 코드와 충돌
- 추가 메모리 소요 (부트스트랩 전체 이용시 126kb의 CSS, 29kb의 JS 코드 포함하게됨)
- 디자인 보편화
- 불필요한 class 발생 (DOM이 불필요한 class로 가득 채워짐)
타이포그래피
- 단순히 class 명을 추가하는 것만으로 텍스트 정렬을 구현할 수 있다
<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>
테이블
- 테이블에도 스타일을 추가할 수 있다 (zebra-stripe를 추가)
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>