부트트랩(Bootstrap)은 브라우저에서 실행됩니다. 웹 페이지의 프론트엔드 부분,
즉 HTML, CSS, 그리고 JavaScript를 사용하여 사용자 인터페이스를 구현할 때 주로 사용됩니다.
사용자의 브라우저에서 실행되며,
반응형 웹 디자인을 통해 다양한 디바이스와 화면 크기에서 잘 작동하도록 디자인되어 있습니다.
01_hello_bootstap
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>1st 부트스트랩 클래스</title>
<!-- TODO : bootstrap css cdn : 일반적인 디자인 -->
<link
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
<style>
div {
background-color: aqua;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
<!-- 1st 부트스트랩 클래스 -->
<!-- 사용법 : class="이름" : 이름: 미리 정의가 되어 있음 -->
<!-- class="container" : 가상 페이지를 만들어서 중앙정렬시켜줌-->
<div class="container">
<h1>안녕하세요 홍길동입니다.</h1>
</div>
</body>
</html>
02_layout_grid
부트스트랩 레이아웃 그리드 시스템 사용법
bootstrap 키워드 사용법 1
class="container" : 가상 페이지 중앙정렬
class="text-center" : 글자 중앙 정렬
bootstrap 키워드 사용법 2
class="container text-center" : 가상페이지 중앙정렬 , 글자 중앙정렬
레이아웃 그리드 기본사용법 : 1) class="미리정의된키워드"
아래 배치(layout) 관련된 키워드
class="row" : 1행
class="col" : 1열
크기를 일정하게 분배해서 만들어짐
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>부트스트랩 레이아웃 그리드 시스템</title>
<!-- TODO : bootstrap css cdn : 일반적인 디자인 -->
<link
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
<!-- TODO : 예제 디자인 샘플 -->
<link
rel="stylesheet"
/>
</head>
<body
class="p-3 m-0 border-0 bd-example bd-example-row bd-example-row-flex-cols"
>
<!-- bootstrap 키워드 사용법 -->
<!-- class="container" : 가상 페이지 중앙정렬 -->
<!-- class="text-center" : 글자 중앙 정렬 -->
<div class="container text-center">
<!-- 기본사용법 : 1) class="미리정의된키워드" -->
<!-- 아래 배치(layout) 관련된 키워드 -->
<!-- class="row" : 1행 -->
<!-- class="col" : 1열 -->
<!-- 크기를 일정하게 분배해서 만들어짐 -->
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
</body>
</html>
03_layout_grid_2
부트스트랩 레이아웃 그리드 시스템 예제 2
다양한 크기의 배치
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>부트스트랩 레이아웃 그리드 시스템 다양한 크기의 배치</title>
<!-- TODO : bootstrap css cdn : 일반적인 디자인 -->
<link
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
<!-- TODO : 예제 디자인 샘플 -->
<link
rel="stylesheet"
/>
</head>
<body
class="p-3 m-0 border-0 bd-example bd-example-row bd-example-row-flex-cols"
>
<!-- 다양한 크기의 배치 -->
<!-- class="container text-center" : 가상의 페이지 중앙정렬, 글자 중앙 정렬이 적용됨 -->
<div class="container text-center">
<!-- 부트스트랩 행 : class="row", -->
<!-- 부트스트랩 행 : class="col", -->
<!-- TODO : 예제 : 1행 2열 -->
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
</div>
<!-- TODO : 예제 : 1행 3열 -->
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
</body>
</html>
04_layout_grid_3
부트스트랩 레이아웃 그리드 시스템 부트스트랩 배치 (행, 열) 크기 변화
부트스트랩 가로 12칸 기준으로 디자인함 : 1칸(임의의 크기로 정해놓음)
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>부트스트랩 레이아웃 그리드 시스템 부트스트랩 배치 (행, 열) 크기 변화</title>
<!-- TODO : bootstrap css cdn : 일반적인 디자인 -->
<link
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
<!-- TODO : 예제 디자인 샘플 -->
<link
rel="stylesheet"
/>
</head>
<body
class="p-3 m-0 border-0 bd-example bd-example-row bd-example-row-flex-cols"
>
<!-- 부트스트랩 키워드 : -->
<!-- class="container text-center" : 가상페이지 중앙정렬 , 글자 중앙정렬 -->
<div class="container text-center">
<!-- 행 : class="row" -->
<!-- 열 : class="col" -->
<!-- TODO : 1행 4열 -->
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
<!-- TODO : 1행 2열 : 1개(8칸), 1개(4칸) -->
<!-- TODO : 부트스트랩 가로 12칸 기준으로 디자인함 : 1칸(임의의 크기로 정해놓음)-->
<div class="row">
<!-- 부트스트랩 배치 (행, 열) 크기 변화 -->
<!-- 사용법 : class="col-숫자" -->
<div class="col-4">Column</div>
<div class="col-2">Column</div>
</div>
</div>
</body>
</html>
05_exam_layout_grid_4
부트스트랩 레이아웃 그리드 시스템 예제문제
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>부트스트랩 레이아웃 그리드 시스템 예제문제</title>
<!-- TODO : bootstrap css cdn : 일반적인 디자인 -->
<link
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
<!-- TODO : 예제 디자인 샘플 -->
<link
rel="stylesheet"
/>
</head>
<body
class="p-3 m-0 border-0 bd-example bd-example-row bd-example-row-flex-cols"
>
<!-- TODO : 가상의 페이지 중앙정렬, 글자 중앙정렬 -->
<div class="container text-center">
<!-- TODO : 1st 행은 3열 -->
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<!-- TODO : 2nd 행은 1열(5칸), 2열(7칸) -->
<div class="row">
<div class="col-5">col5</div>
<div class="col-7">col7</div>
</div>
<!-- TODO : 3rd 행은 1열, 2열(3칸), 3열(4칸), 4열 -->
<div class="row">
<div class="col">col</div>
<div class="col-3">col-3</div>
<div class="col-4">col-4</div>
<div class="col">col</div>
</div>
</div>
</body>
</html>
06_layout_grid_horizontal
부트스트랩 레이아웃 그리드 시스템 열을 가로 중앙 정렬하기
열을 중앙 정렬하기 : class="row justify-content-center"
열을 왼쪽 정렬하기 : class="row justify-content-start"
열을 오른쪽 정렬하기 : class="row justify-content-end"
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>부트스트랩 레이아웃 그리드 시스템 열을 가로 중앙 정렬하기</title>
<!-- TODO : bootstrap css cdn : 일반적인 디자인 -->
<link
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
<!-- TODO : 예제 디자인 샘플 -->
<link
rel="stylesheet"
/>
</head>
<body
class="p-3 m-0 border-0 bd-example bd-example-row bd-example-row-flex-cols"
>
<!-- TODO : 가상의 페이지 중앙정렬, 글자 중앙정렬 -->
<div class="container tetx-center">
<!-- 1행 2열(4칸) -->
<!-- TODO : 열을 중앙 정렬하기 -->
<div class="row justify-content-center">
<div class="col-4">col</div>
<div class="col-4">col</div>
</div>
<!-- TODO : 열을 왼쪽 정렬하기 -->
<div class="row justify-content-start">
<div class="col-4">col</div>
<div class="col-4">col</div>
</div>
<!-- TODO : 열을 오른쪽 정렬하기 -->
<div class="row justify-content-end">
<div class="col-4">col</div>
<div class="col-4">col</div>
</div>
</div>
</body>
</html>
07_layout_grid_vertical
부트스트랩 레이아웃 그리드 시스템 열을 세로 중앙 정렬하기
세로 중앙 정렬 : class="row align-items-center"
세로 위쪽 정렬 : class= "row align-items-start"
세로 아래쪽 정렬 : class="row align-items-end"
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>부트스트랩 레이아웃 그리드 시스템 열을 세로 중앙 정렬하기</title>
<!-- TODO : bootstrap css cdn : 일반적인 디자인 -->
<link
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
<!-- 예제 디자인 샘플 -->
<link
rel="stylesheet"
/>
</head>
<body
class="p-3 m-0 border-0 bd-example bd-example-row bd-example-row-flex-cols"
>
<!-- 기본 사용법 : class="미리정의된키워드" -->
<!-- 1행 3열 -->
<!-- 1행 : class="row" -->
<!-- 1열 : class="col" -->
<!-- 부트스트랩 기본 디자인 : 가로(12칸) -->
<!-- TODO : 가상의 페이지 중앙정렬, 글자 중앙정렬 -->
<div class="container text-center">
<!-- TODO : 세로 중앙 정렬 -->
<div class="row align-items-center">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<!-- TODO : 세로 위쪽 정렬 -->
<div class="row align-items-start">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<!-- TODO : 세로 아래쪽 정렬 -->
<div class="row align-items-end">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
</body>
</html>
08_layout_grid_both
부트스트랩 레이아웃 그리드 시스템 가로세로 정렬하기
가로세로 위쪽/왼쪽 정렬 : class="col align-self-start"
가로세로 중앙 정렬 : class="col align-self-center"
가로세로 아래쪽/오른쪽 정렬 : class="col align-self-end"
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>부트스트랩 레이아웃 그리드 시스템 가로세로 정렬하기</title>
<!-- TODO : bootstrap css cdn : 일반적인 디자인 -->
<link
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
<!-- 예제 디자인 샘플 -->
<link
rel="stylesheet"
/>
</head>
<body
class="p-3 m-0 border-0 bd-example bd-example-row bd-example-row-flex-cols"
>
<!-- 기본 사용법 : class="미리정의된키워드" -->
<!-- 1행 3열 -->
<!-- 1행 : class="row" -->
<!-- 1열 : class="col" -->
<!-- 부트스트랩 기본 디자인 : 가로(12칸) -->
<!-- TODO : 가상의 페이지 중앙정렬, 글자 중앙정렬 -->
<div class="container text-center">
<div class="row">
<!-- TODO : 가로세로 위쪽/왼쪽 정렬 -->
<div class="col align-self-start">col</div>
<!-- TODO : 가로세로 중앙 정렬 -->
<div class="col align-self-center">col</div>
<!-- TODO : 가로세로 아래쪽/오른쪽 정렬 -->
<div class="col align-self-end">col</div>
</div>
</div>
</body>
</html>
09_img_fluid
부트스트랩 원본 이미지 훼손하지 않는 범위에서 늘리는 방법
가로 창크기를 늘렸을때 원본이미지를 훼손하지 않는범위에서 늘어남
class="img-fluid" === max-width : 100%; height:auto
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>부트스트랩 원본 이미지 훼손하지 않는 범위에서 늘리는 방법</title>
<!-- TODO : bootstrap css cdn : 일반적인 디자인 -->
<link
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
</head>
<body>
<!-- TODO : 가상의 페이지 중앙정렬, 글자 중앙정렬 -->
<div class="container">
<!-- .jpg : 이미지 포맷(.png 등) -->
<!-- jpg(이미지 압축), png(이미지 원본) -->
<!-- 프로젝트 : 인터넷 이미지를 다운로드(불법) -->
<!-- 무료 이미지 사이트 : 픽사베이(pixabay) -->
<!-- TODO : class="img-fluid" === max-width : 100%; height:auto -->
<!-- 가로 창크기를 늘렸을때 원본이미지를 훼손하지 않는범위에서 늘어남 -->
<img src="./img/pic_1.jpg" class="img-fluid" alt="사과" />
</div>
</body>
</html>
10_img_thumbnail
부트스트랩 이미지 1px 테두리 모양을 제공 방법
class="img-thumbnail" : 이미지에 둥근 1px 테두리 모양을 제공(회색)
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>부트스트랩 이미지 1px 테두리 모양을 제공 방법</title>
<!-- TODO : bootstrap css cdn : 일반적인 디자인 -->
<link
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
</head>
<body>
<!-- TODO : 가상의 페이지 중앙정렬, 글자 중앙정렬 -->
<div class="container">
<!-- class="img-thumbnail"
: 이미지에 둥근 1px 테두리 모양을 제공(회색) -->
<img src="./img/pic_1.jpg" class="img-thumbnail" alt="사과" />
</div>
</body>
</html>
11_img_float
부트스트랩 이미지 왼쪽, 오른쪽 정렬 방법
이미지 왼쪽 정렬 : class="float-start"
이미지 오른쪽 정렬 : class="float-end"
이미지 중앙 정렬 : class="mx-auto d-block"
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>부트스트랩 이미지 왼쪽, 오른쪽 정렬 방법</title>
<!-- TODO : bootstrap css cdn : 일반적인 디자인 -->
<link
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
</head>
<body>
<!-- TODO : 왼쪽 정렬 -->
<img src="./img/doit.jpg" class="float-start" alt="소년" />
<!-- TODO : 오른쪽 정렬 -->
<img src="./img/doit.jpg" class="float-end" alt="소년" />
<!-- TODO : 중앙 정렬 -->
<img src="./img/doit.jpg" class="mx-auto d-block" alt="소년" />
</body>
</html>
12_exam_img_float
부트스트랩 float 이미지 적용해보기 예시 2
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>부트스트랩 float 이미지 적용해보기 예시2</title>
<!-- TODO : bootstrap css cdn : 일반적인 디자인 -->
<link
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
</head>
<body>
<!-- TODO : 왼쪽 정렬 -->
<img src="./img/cat(L).jpg" class="float-start" alt="왼쪽 배치 고양이" />
<!-- TODO : 오른쪽 정렬 -->
<img src="./img/cat(R).jpg" class="float-end" alt="오른쪽 배치 고양이" />
</body>
</html>
13_table
부트스트랩 테이블 스타일(링크, 정렬) 적용하기
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>부트스트랩 테이블 스타일(링크, 정렬) 적용하기</title>
<!-- TODO : bootstrap css cdn : 일반적인 디자인 -->
<link
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
</head>
<body>
<!-- TODO : 가상의 페이지 중앙정렬, 글자 중앙정렬 -->
<div class="container">
<table class="table table-striped table-hover">
<!-- 제목 -->
<thead>
<!-- TODO : 부트 스트랩 테이블 class="table ..." -->
<tr class="table-dark">
<th>#</th>
<th>First</th>
<th>Last</th>
</tr>
</thead>
<!-- 본문 -->
<tbody>
<tr>
<th>1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th>2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
14_text_color
부트스트랩 글자색 스타일(색상) 적용하기
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>부트스트랩 글자색 스타일(색상) 적용하기</title>
<!-- TODO : bootstrap css cdn : 일반적인 디자인 -->
<link
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
</head>
<body>
<!-- TODO : 가상의 페이지 중앙정렬, 글자 중앙정렬 -->
<div class="container">
<!-- TODO : 부트스트랩 글자색 종류... -->
<!-- class="text-primary" : 파란색 -->
<p class="text-primary">Lorem ipsum dolor sit amet</p>
<!-- class="text-secondary" : 회색 -->
<p class="text-secondary">Lorem ipsum dolor sit amet</p>
<!-- class="text-success" : 녹색 -->
<p class="text-success">Lorem ipsum dolor sit amet</p>
<!-- class="text-danger" : 빨간색 -->
<p class="text-danger">Lorem ipsum dolor sit amet</p>
<!-- class="text-warning" : 노란색 -->
<p class="text-warning">Lorem ipsum dolor sit amet</p>
<!-- class="text-info" : 하늘색 -->
<p class="text-info">Lorem ipsum dolor sit amet</p>
</div>
</body>
</html>
15_text_align
부트스트랩 글자 스타일(정렬) 적용하기
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>부트스트랩 글자 스타일(정렬) 적용하기</title>
<!-- TODO : bootstrap css cdn : 일반적인 디자인 -->
<link
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
</head>
<body>
<!-- TODO : 가상의 페이지 중앙정렬, 글자 중앙정렬 -->
<div class="container">
<!-- TODO : 글자 정렬(왼/중앙/오른쪽) -->
<!-- 중앙정렬 -->
<p class="text-center">Lorem ipsum dolor sit amet</p>
<!-- 왼쪽정렬 -->
<p class="text-start">Lorem ipsum dolor sit amet</p>
<!-- 오른쪽정렬 -->
<p class="text-end">Lorem ipsum dolor sit amet</p>
<!-- TODO : 글자 정렬(왼/중앙/오른쪽) -->
<!-- 대문자 -->
<p class="text-uppercase">Lorem ipsum dolor sit amet</p>
<!-- 소문자 -->
<p class="text-lowercase">Lorem ipsum dolor sit amet</p>
<!-- TODO : 글자크기(font-size) 변경(1~6) -->
<p class="fs-1">Lorem ipsum dolor sit amet</p>
<p class="fs-2">Lorem ipsum dolor sit amet</p>
<p class="fs-3">Lorem ipsum dolor sit amet</p>
<p class="fs-4">Lorem ipsum dolor sit amet</p>
<p class="fs-5">Lorem ipsum dolor sit amet</p>
<p class="fs-6">Lorem ipsum dolor sit amet</p>
</div>
</body>
</html>
16_background_color
부트스트랩 배경색 스타일(색상) 적용하기
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>부트스트랩 배경색 스타일(색상) 적용하기</title>
<!-- TODO : bootstrap css cdn : 일반적인 디자인 -->
<link
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
</head>
<body>
<!-- TODO : 가상의 페이지 중앙정렬, 글자 중앙정렬 -->
<div class="container">
<!-- TODO : 배경색 스타일 적용하기 -->
<!-- 사용법 : bg-secondary : 배경색(회색) -->
<div class="text-white bg-secondary">Lorem ipsum dolor sit amet</div>
<!-- 사용법 : bg-success : 배경색(녹색) -->
<div class="text-white bg-success">Lorem ipsum dolor sit amet</div>
<!-- 사용법 : bg-danger : 배경색(빨간색) -->
<div class="text-white bg-danger">Lorem ipsum dolor sit amet</div>
<!-- 사용법 : bg-warning : 배경색(노란색) -->
<div class="text-dark bg-warning">Lorem ipsum dolor sit amet</div>
<!-- TODO : ※응용 글자 크기,색상 및 배경색 적용 -->
<div class="bg-primary">
<p class="fs-1 text-warning">글자 크기,색상 및 배경색 응용 적용</p>
</div>
</div>
</body>
</html>
17_width_height
부트스트랩 배경색 스타일(사이즈) 적용하기
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>부트스트랩 배경색 스타일(사이즈) 적용하기</title>
<!-- TODO : bootstrap css cdn : 일반적인 디자인 -->
<link
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
</head>
<body>
<!-- TODO : 가상의 페이지 중앙정렬, 글자 중앙정렬 -->
<div class="container">
<!-- TODO : 배경색 스타일(사이즈 세로) 적용하기 -->
<!-- TODO : class="w-25" : w(width)-숫자(25%,50%,75%,100%) -->
<!-- TODO : class="p-3" : p(padding,안쪽여백)-숫자(1 ~ 5) -->
<!-- TODO : class="m-3" : m(margin,바깥여백)-숫자(1 ~ 5) -->
<!-- TODO : ※마진/패딩 : (상(top)/하(bottom)/좌(start)/우(end))※ -->
<!-- TODO : 마진/패딩 조합 : pt-3(padding-top) : 패딩/위쪽 -->
<!-- TODO : 마진/패딩 조합 : pb-3(padding-bottom) 패딩/아래쪽 -->
<!-- TODO : 마진/패딩 조합 : ps-3(padding-start) 패딩/왼쪽 -->
<!-- TODO : 마진/패딩 조합 : pe-3(padding-end) 패딩/오른쪽 -->
<div class="w-25 p-1" style="background-color: #eee">배경색 스타일 적용 w-25 p-1 적용</div>
<div class="w-50 p-3" style="background-color: #eee">Lorem</div>
<div class="w-75 p-5" style="background-color: #eee">Lorem</div>
<div class="w-25 m-1" style="background-color: #eee">Lorem</div>
<div class="w-50 m-3" style="background-color: #eee">Lorem</div>
<div class="w-75 m-5" style="background-color: #eee">Lorem</div>
<div class="w-25 pt-1" style="background-color: #eeb">Lorem</div>
<div class="w-25 pb-3" style="background-color: #eeb">Lorem</div>
<div class="w-75 mb-5" style="background-color: #eec">Lorem</div>
<!-- TODO : 배경색 스타일(사이즈 세로) 적용하기 -->
<!-- TODO : class="h-25" : h(height)-숫자(25%,50%,75%,100%)-->
<!-- TODO : class="d-inline-block" : css(display : (none, inlinem inline-block)) -->
<!-- TODO : d-디스플레이 속성 : (display : (none, inlinem inline-block)) -->
<div style="height: 100px; background-color: rgba(255, 0, 0, 0.1)">
<div
class="h-25 d-inline-block"
style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
>
Height 25%
</div>
<div
class="h-50 d-inline-block"
style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
>
Height 50%
</div>
<div
class="h-75 d-inline-block"
style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
>
Height 75%
</div>
<div
class="h-100 d-inline-block"
style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
>
Height 100%
</div>
<div
class="h-auto d-inline-block"
style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
>
Height auto
</div>
</div>
</div>
</body>
</html>
18_border
부트스트랩 border 테두리(4군데 모두) 스타일 적용하기
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>부트스트랩 border 테두리(4군데 모두) 스타일 적용하기</title>
<!-- TODO : bootstrap css cdn : 일반적인 디자인 -->
<link
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
<!-- 예제 디자인 샘플 -->
<link
rel="stylesheet"
/>
</head>
<body class="p-3 m-0 border-0 bd-example bd-example-border-utils">
<!-- TODO : 가상의 페이지 중앙정렬, 글자 중앙정렬 -->
<div class="container">
<!-- TODO : class="border" : 테두리(4군데 모두) -->
<!-- TODO : 상(top)/하(bottom)/좌(start)/우(end) 조합가능 -->
<span class="border"></span>
<span class="border-top"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>
<span class="border-end"></span>
<!-- 테두리 색깔 : (primary(파란색)) ~ warning(노란색) 등) -->
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
</div>
</body>
</html>
19_exam_border
부트스트랩 border 테두리(4군데 모두) 스타일 예제
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>부트스트랩 border 테두리(4군데 모두) 스타일 예제</title>
<!-- TODO : bootstrap css cdn : 일반적인 디자인 -->
<link
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
<!-- 예제 디자인 샘플 -->
<link
rel="stylesheet"
/>
</head>
<body class="p-3 m-0 border-0 bd-example">
<!-- TODO : 가상의 페이지 중앙정렬, 글자 중앙정렬 -->
<div class="container">
<!-- 테두리 색깔 success(녹색 적용), 패딩 및 마진 아래쪽 간격주기 -->
<div class="border border-success p-2 mb-2">
Lorem ipsum dolor sit amet
</div>
</div>
</body>
</html>
'Visual Studio Code' 카테고리의 다른 글
| [React] 04_chapter 02 (0) | 2023.08.29 |
|---|---|
| [React] chapter_01 (0) | 2023.08.29 |
| [Modern JavaScript] chapter_01 (0) | 2023.08.25 |
| [Node] chapter_01 (0) | 2023.08.25 |
| [JQUERY] chapter_02 (0) | 2023.08.24 |