[CSS] Bootstrap

Bootstrap 이란?

부트스트랩은 전세계적으로 가장 많이 사용되는 오픈소스 CSS 라이브러리 이다.
DOM, CSS의 상속 관계, 선택자, 블럭/인라인, position 등에 대한 완전한 이해 필요

CDN(Contents Delivery Network)을 통해 부트스트랩 css와 자바스크립트 라이브러리를 포함하는 것만으로도 사용이 가능

Bootstrap 시작하기

Bootstrap CDN

부트스트랩의 최신 버전은 4.3.1

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Bootstrap JavaScript

부트스트랩의 일부 컴포넌트들은 이벤트에 반응하는 구조로 디ㅗ어 있어 jQuery를 비롯한 몇몇 자바스크립트 라이브러리를 필요로 한다.

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

코드가 길어진 이유는 integrity와 crossorigin 속성 때문인데 이들은 보안과 관련된 것으로 자바스크립트를 이용한 보안 공격에 대비한 것으로 사용하는 것을 권장한다.

알아둘 사항

일관된 디자인 적용을 위해 기본 HTML 태그들의 기본 CSS속성들을 재정의하거나 수정된 초기값을 사용하고 있다.

• box-sizing
  : 박스 요소들의 일관된 사이즈 계산을 위해 전체 태그에 대해 box-sizing 속성을 border-box로 변경해 사용하고 있다. 이는 일부 서드파티 라이브러리(Google Maps, Google Custom Search Engin 등)에 영향을 미칠 수 있다. 이 경우 필요한 클래스들에 대해 box-sizing을 content-box로 오버라이딩해서 사용해야 한다.

.selector-for-some-widget {
  box-sizing: content-box;
}

• HTML 속성 초기화
  참고 링크

부트스트랩 사용법

<태그 class="bs_class1 bs_class2 ...">

짧고 굵게 배우는 JSP 웹 프로그래밍과 스프링 프레임워크