728x90
Bootstrap ?
부트스트랩은 전세계적으로 가장 많이 사용되는 오픈소스 CSS 라이브러리이다.
부트스트랩을 기반으로 하는 다양한 응용 라이브러리가 있다.
DOM, CSS의 상속관계, 선택자, 블럭/인라인, position 등에 대한 완전한 이해 필요.
react, vue 와 같은 프론트엔드 프레임워크에서 기본 Bootstrap 을 사용하는 방법도 있지만
jQuery 사용에 따른 문제점이나 기타 프레임워크 구조를 일관되게 적용하기 위해
해당 프레임워크용으로 별도 제작된 Bootstrap 플러그인을 사용하기도 한다.
react-bootstrap, bootstrap-vue 등이 이에 해당한다
시작하기
1. Bootstrap CDN
외부 스타일시트를 <head></head> 사이에 추가 하면 바로 부트스트랩을 사용할 수 있다.
<!-- 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">
2. Bootrap 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>
사용법
부트스트랩에서는 다음과 같은 버튼을 제공하는데 버튼사용을 위해서는 btn 이라는 클래스를 기본으로 하고
btn-success 와 같이 추가적인 클래스를 함께 사용해 디자인을 적용하는 방식이다.
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
728x90
'HTML&CSS' 카테고리의 다른 글
| [CSS] background에 fade color 배경에 페이드컬러 넣기 (0) | 2023.05.14 |
|---|---|
| [CSS] 스크롤 스냅 - 자바스크립트 없이 css로 풀페이지 만들기 Scroll Snap (0) | 2023.05.13 |
| [CSS] 크기 단위 px, em, rem (0) | 2023.05.12 |
| [HTML] 시멘틱 마크업이란? Semantic Markup (0) | 2023.05.11 |
| [CSS] 버튼 오버 효과주기 (마우스호버mousehover) (0) | 2023.04.28 |
댓글