1. 부트스트랩 세팅
- 부트스트랩 link
- 부트스트랩 CSS link 코드 <head>에 추가
- 부트 스트랩 JS link 코드 <body> 끝 줄에 추가
Bootstrap
The most popular HTML, CSS, and JS library in the world.
getbootstrap.com
2. 부트스트랩 그리드
- 부트스트랩 그리드 시스템 구성
- 컨테이너 (container)
- 행 (row)
- 열 (column)
- 기본규칙
- 컨테이너 -> 행 -> 열 -> 내용 순으로 클래스가 정렬되어야 함.(컨테이너는 행을 감싸고 행은 열을 감싸고 열은 내용을 감싼다.)
<!-- class 상관관계가 이 순서로 진행되어야 함 -->
<div class="container">
<div class="row">
<div class="col">
입력하는 내용
</div>
</div>
</div>
- 사용법
- 부트스트랩 그리드 는 한줄에 기본적으로 12칸의 열(colnm)이 있음.
- class="col-숫자"는 열 몇 칸을 차지하는 cloumn 인지에 대한 구분ex) <div class="col-3"> -> 3칸짜리 div
- 만약 한 줄에 "col"의 합이 12칸을 넘어가면 다음 줄로 넘어가게 됨.
3. 부트스트랩 반응형 그리드
- 부트스트랩 반응형 설정 구간
- Extra Small (576px 미만) : 모바일
- Small (576px 이상) : 모바일
- Medium (768px 이상) : 타블렛
- Large (992px 이상) : 데스크탑
- Extra Large (1200px 이상) : 와이드 데스크탑
- 컨테이너 (container)
- 부트스트랩 컨테이너는 두가지 종류
- <div class="container"> : 반응형 구간별로 그리드에 고정된 "width"를 설정해줌
- <idv class="container-fluid"> : 항상 "width : 100%;" 설정된 컨테이너
- 열 (column)
- 부트스트랩 반응형 그리드 구간별로 column이 차지하는 칸의 개수도 설정 가능
- 구간별로 설정 예시
- Extra Small = 12칸 모두 차지
- Small = 6칸 차지
- Medium = 4칸 차지
- Large = 3칸 차지
- Extra Large = 2칸 차지
<div class="col-12 col-sm-6 col-md-5 col-lg-3 col-xl-2">
<!-- 특정 구간 class만 지정 시 범위 변경 가능 -->'Cording > HTML & CSS' 카테고리의 다른 글
| [HTML / CSS] 반응형 웹 (Responsive Web) (0) | 2020.01.10 |
|---|---|
| [HTML / CSS] List / List Styling (0) | 2020.01.08 |
| [HTML / CSS] Float / Grid-layout / Clear (0) | 2020.01.08 |
| [HTML / CSS] CSS Positioning (0) | 2020.01.04 |
| [HTML / CSS] 웹디자인 참고 사이트 7선 (0) | 2020.01.02 |
댓글