본문 바로가기
국비교육/국비교육

day80 - 1121

Luver Duck 2022. 11. 21. 18:13

부트 스트랩 (Bootstrap)

- 오픈소스 프론트엔트 프레임워크

- 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인 기능을 CSS와 JavaScript로 만들어놓은 것

기본 템플릿

- Option 1 : popper가 포함된 CDN

- Option 2 : popper가 분리된 CDN

 

<!doctype html>
<html lang="ko">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

	<title>Hello, world!</title>
</head>
<body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
</body>
</html>

 

 

그리드 시스템(Grid System)

- 컨테이너, 행, 열을 사용하여 컨텐츠를 레이아웃하고 정렬

중단점(break point)

- 화면 크기에 반응하여 레이아웃의 크기를 변화시킬 특정 크기

그리드의 계층

- 종류

계층 xs sm md lg xl xxl
명칭 Extra small Small Medium Large Extra large Extra extra large

 

- 종단점에 따른 그리드 계층

계층 xs sm md lg xl xxl
계층 범위 < 576px >= 576px >= 768px >= 992px >= 1200px >= 1400px

컨테이너(container)

- 기본적인 레이아웃 요소로 가장 바깥 테두리 영역

- 컨테이너의 종류

container 각 반응형 중단점에서 max-width를 설정하는 컨테이너
container-fluid 모든 중단점에서 width : 100%를 설정하는 컨테이너

- 계층 (container와 container-fluid 비교)

행(row)

- 행은 열의 래퍼(wrapper, 감싸는 것)이다

- 하나의 행은 12개의 열로 나눌 수 있다 (최대공약수의 갯수가 많음)

열(col)

- 열의 종류

col 일반적인 열
col-* 숫자 *만큼 확장(병합)된 크기의 열

- 계층

열 오프셋(offset)

- offset-* 클래스를 적용하면 왼쪽 여백을 *만큼 늘린다

 

** 왼쪽 여백 적용

1) offset-3 클래스를 적용하여 왼쪽 여백의 크기 3

2) col 클래스에 의해 열의 크기는 전체 열 크기인 12에서 왼쪽 여백의 크기인 3을 뺀 9가 된다

 

 

 

** 양쪽 여백 적용

1) offset-3 클래스를 적용하여 왼쪽 여백의 크기 3

2) col-6 클래스를 적용하여 열의 크기 6

3) 전체 열의 크기 12에서 왼쪽 여백의 크기 3, 열의 크기 6을 뺀 나머지 3이 남는 열의 크기

4) 남는 열의 크기와 왼쪽 여백의 크기가 같으므로 열을 중심으로 양쪽 여백이 적용된 것처럼 동작한다

 

 

간격(spacing)

- 종류

m 바깥 여백(margin)
p 안쪽 여백(padding)

- 방향

t 상단(top)
b 하단(bottom)
s 왼쪽(start)
e 오른쪽(end)

- 크기 : 1 ~ 5까지 설정 가능

 

적용 예시

 

 

화면 폭에 따른 그리드 배치 조정

- 클래스에 여러 계층에 대한 설정을 부여하여 화면 폭 변화에 반응하여 배치가 조절되도록 구현

 

- 화면이 클 때는 한 행에 6개의 열 배치

- 화면이 점점 줄어들면 4개, 3개, 2개의 열 배치

 

03.image.html

- 각 <div>의 클래스에 계층 변화에 따른 열 크기를 설정 (계층 뒤의 숫자와 열 갯수의 곱이 12가 되도록 설정)

- Extra large일 떄 col-xl-2로 하여 6개씩 배치되도록 설정 (2 * 6 = 12)

- Large일 때 col-lg-3으로 하여 4개씩 배치되도록 설정 (3 * 4 = 12)

- Medium일 때 col-md-4로 하여 3개씩 배치되도록 설정 (4 * 3 = 12)

- Small일 때 col-sm-6으로 하여 2개씩 배치되도록 설정 (6 * 2 = 12)

<body>
	<div class="row mt-4">
		<div class="mt-3 text-center col-xl-2 col-lg-3 col-md-4 col-sm-6">
			<img class="img-thumbnail" src="https://placeimg.com/200/200/animals">
		</div>
		<div class="mt-3 text-center col-xl-2 col-lg-3 col-md-4 col-sm-6">
			<img class="img-thumbnail" src="https://placeimg.com/200/200/animals">
		</div>
		<div class="mt-3 text-center col-xl-2 col-lg-3 col-md-4 col-sm-6">
			<img class="img-thumbnail" src="https://placeimg.com/200/200/animals">
		</div>
		<div class="mt-3 text-center col-xl-2 col-lg-3 col-md-4 col-sm-6">
			<img class="img-thumbnail" src="https://placeimg.com/200/200/animals">
		</div>
		<div class="mt-3 text-center col-xl-2 col-lg-3 col-md-4 col-sm-6">
			<img class="img-thumbnail" src="https://placeimg.com/200/200/animals">
		</div>
		<div class="mt-3 text-center col-xl-2 col-lg-3 col-md-4 col-sm-6">
			<img class="img-thumbnail" src="https://placeimg.com/200/200/animals">
		</div>
		<div class="mt-3 text-center col-xl-2 col-lg-3 col-md-4 col-sm-6">
			<img class="img-thumbnail" src="https://placeimg.com/200/200/animals">
		</div>
		<div class="mt-3 text-center col-xl-2 col-lg-3 col-md-4 col-sm-6">
			<img class="img-thumbnail" src="https://placeimg.com/200/200/animals">
		</div>
		<div class="mt-3 text-center col-xl-2 col-lg-3 col-md-4 col-sm-6">
			<img class="img-thumbnail" src="https://placeimg.com/200/200/animals">
		</div>
		<div class="mt-3 text-center col-xl-2 col-lg-3 col-md-4 col-sm-6">
			<img class="img-thumbnail" src="https://placeimg.com/200/200/animals">
		</div>
	</div>
</body>

 

- Extra Large일 때

 

- Large일 때

 

- Medium일 때

 

 

정렬

텍스트 정렬

text-center 텍스트 가운데 정렬
text-start 텍스트 왼쪽 정렬
text-end 텍스트 오른쪽 정렬

** https://getbootstrap.kr/docs/5.0/utilities/text/

 

Flex 영역 내 요소 정렬

- 좌우 정렬 : justify-content

justify-content-center 가운데 정렬
justify-content-start 왼쪽 정렬
justify-content-end 오른쪽 정렬

 

- 상하 정렬 : align-items

align-items-center 가운데 정렬
align-items-top 상단 정렬
align-items-bottom 하단 정렬

** https://getbootstrap.kr/docs/5.0/utilities/flex/

 

버튼

- <button> 태그 뿐만 아니라 <a> 태그에도 적용할 수 있다

- 버튼 클래스와 적용되는 스타일

일반 버튼 outline 버튼 : hober시 일반 버튼 스타일
.btn-primary
.btn-outline-primary
.btn-secondary
.btn-outline-secondary
.btn-success
.btn-outline-success
.btn-danger
.btn-outline-danger
.btn-warning
.btn-outline-warning
.btn-info
.btn-outline-info
.btn-light
.btn-outline-light
.btn-dark
.btn-outline-dark
.btn-link    

** 스타일 참고 : https://getbootstrap.kr/docs/5.0/components/buttons/

 

- 크기

 .btn-sm
.btn-md
.btn-lg

** w-100 클래스를 적용하여 래퍼를 꽉 채우는 버튼 생성 가능

 

Bootswatch

- Bootstrap의 테마(완성된 CSS)를 제공

- 공식 사이트 : https://bootswatch.com/

- 테마 CDN 모음 : https://www.jsdelivr.com/package/npm/bootswatch?path=dist&version=5.0.2

  ** Bootswatch의 버전이 반드시 Bootstrap의 버전과 같아야한다

 

Pagination

- https://getbootstrap.kr/docs/5.0/components/pagination/

기본 형태

 

<div class = "row">
	<div class = "col">
		<ul class = "pagination">
			<li class = "page-item"><a class = "page-link" href = "#">&lt;</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">1</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">2</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">3</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">4</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">5</a></li> 
			<li class = "page-item"><a class = "page-link" href = "#">6</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">7</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">8</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">9</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">10</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">&gt;</a></li>
		</ul>
	</div>
</div>

 

페이지 네비게이터 위치 정렬

- <ul> 태그를 감싸는 <div> 태그에 d-flex와 justify-content-* 클래스를 부여하여 정렬 조정

 

 

<div class = "row">
	<div class = "col d-flex justify-content-center">
		<ul class = "pagination">
			<li class = "page-item"><a class = "page-link" href = "#">&lt;</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">1</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">2</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">3</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">4</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">5</a></li> 
			<li class = "page-item"><a class = "page-link" href = "#">6</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">7</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">8</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">9</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">10</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">&gt;</a></li>
		</ul>
	</div>
</div>

 

활성화 / 비활성화

- active 클래스를 부여하여 활성화 상태를, disabled 클래스를 부여하여 비활성화 상태를 표시

 

<div class = "row">
	<div class = "col d-flex justify-content-center">
		<ul class = "pagination">
			<li class = "page-item disabled"><a class = "page-link" href = "#">&lt;</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">1</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">2</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">3</a></li>
			<li class = "page-item active"><a class = "page-link" href = "#">4</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">5</a></li> 
			<li class = "page-item"><a class = "page-link" href = "#">6</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">7</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">8</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">9</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">10</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">&gt;</a></li>
		</ul>
	</div>
</div>

 

크기 조정

- <ul> 태그에 pagination 클래스 부여

 

 

<div class = "row">
	<div class = "col d-flex justify-content-center">
		<ul class = "pagination">
			<li class = "page-item disabled"><a class = "page-link" href = "#">&lt;</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">1</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">2</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">3</a></li>
			<li class = "page-item active"><a class = "page-link" href = "#">4</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">5</a></li> 
			<li class = "page-item"><a class = "page-link" href = "#">6</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">7</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">8</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">9</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">10</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">&gt;</a></li>
		</ul>
	</div>
</div>

 

- <ul> 태그에 pagination과 pagination-sm 클래스 부여

 

 

<div class = "row">
	<div class = "col d-flex justify-content-center">
		<ul class = "pagination pagination-sm">
			<li class = "page-item disabled"><a class = "page-link" href = "#">&lt;</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">1</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">2</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">3</a></li>
			<li class = "page-item active"><a class = "page-link" href = "#">4</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">5</a></li> 
			<li class = "page-item"><a class = "page-link" href = "#">6</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">7</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">8</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">9</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">10</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">&gt;</a></li>
		</ul>
	</div>
</div>

 

- <ul> 태그에 pagination과 pagination-lg 클래스

 

 

<div class = "row">
	<div class = "col d-flex justify-content-center">
		<ul class = "pagination pagination-lg">
			<li class = "page-item disabled"><a class = "page-link" href = "#">&lt;</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">1</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">2</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">3</a></li>
			<li class = "page-item active"><a class = "page-link" href = "#">4</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">5</a></li> 
			<li class = "page-item"><a class = "page-link" href = "#">6</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">7</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">8</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">9</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">10</a></li>
			<li class = "page-item"><a class = "page-link" href = "#">&gt;</a></li>
		</ul>
	</div>
</div>

 

테이블

- https://getbootstrap.kr/docs/5.0/content/tables/

스타일

- .table

 

 

 

- .table table-striped

 

 

 

- .table table-hover

 

 

 

- .table table-bordered

 

 

폼

- https://getbootstrap.kr/docs/5.0/forms/form-control/

 

폼 컨트롤

- <input>이나 <textarea> 태그에 form-control 클래스 부여

- form-control-lg(크게)와 form-control-sm 클래스를 부여하여 크기 조정

 

셀렉트

- <select> 태그에 form-select 클래스 부여

 

'국비교육 > 국비교육' 카테고리의 다른 글

Oracle DB Import  (0) 2022.12.27
day79 - 1118  (0) 2022.11.18
day78 - 1117  (0) 2022.11.18
day77 - 1116  (0) 2022.11.16
day76 - 1115  (0) 2022.11.16

'국비교육/국비교육' Related Articles

티스토리툴바