📃 요약
부트스트랩은 트위터 내부에서 각 개발자 만든 css 디자인을 통일할 방안을 생각하는 중에 만들어진 css 프레임워크임. 핵심은 css 디자인을 쉽게 사용가능하게 하고 팀 내부에서 대체로 통일된 css 디자인을 유지할 수 있음.
요소 기술 :
– Basic : Bootstrap
📃 기술 구현
스펙 :
- vscode - html - css - bootstrap
📃 Bootstrap : 기본 사용법
– CDN 링크
- html 에 CDN 링크를 통해 간단히 사용할 수 있고, npm 설치를 통해 사용할 수 있음. 예제에서는 CDN 링크를 이용함
- CDN : 라이브러리를 인터넷 링크를 통해 제공하는 것
- npm : 라이브러리를 직접 설치해서 사용하는 것, 설치 후 사용할 소스에서 import 해야함
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>
– bootstrap 사용법
- 사용법 : <태그 class="부트스트랩_클래스명 클래스명2 ..." /> 예) <!-- class="container : 일정크기의 페이지를 만들어 중앙정렬시킴 --> <div class="container ">
1) 배치(layout) : 임의의 같은 크기로 가로를 총 12열을 나누고 디자인을 적용함
- 사용법 : 1) class="row" : 1행 2) class="col-숫자" : n열(12열 보다 클수 없음) - 예) class="col-1" : 1열 크기를 1개의 박스 디자인 적용 - 예) class="col-3" : 3열 크기를 1개의 박스 디자인 적용 - 예) class="col" : 동일한 크기로 자동 적용됨 <div class="row" > <div class="col-숫자"> Column </div> <div class="col-숫자2"> Column </div> ... </div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!-- bootstrap css cdn : 일반적인 디자인 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" /> <!-- 예제 디자인 샘플 --> <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet" /> </head> <body class="p-3 m-0 border-0 bd-example bd-example-row bd-example-row-flex-cols"> <div class="container text-center"> <!-- 배치 : 1행 3열 (같은 크기 열) --> <div class="row"> <div class="col">Column</div> <div class="col">Column</div> <div class="col">Column</div> </div> </div> </body> </html>
2) 가로 정렬 : 왼쪽/중앙/오른쪽 박스 정렬
- 사용법 : 1) class="justify-content-center" : 가로 중앙 정렬 2) class="justify-content-start" : 가로 왼쪽 정렬 3) class="justify-content-end" : 가로 오른쪽 정렬 <div> <!-- TODO: 열을 중앙 정렬하기 --> <div class="row justify-content-center"> <div class="col-4">col</div> </div> <!-- TODO: 열을 왼쪽 정렬하기 --> <div class="row justify-content-start"> <div class="col-4">col</div> </div> <!-- TODO: 열을 오른쪽 정렬하기 --> <div class="row justify-content-end"> <div class="col-4">col</div> </div> </div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!-- bootstrap css cdn : 일반적인 디자인 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" /> <!-- 예제 디자인 샘플 --> <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" 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"> <!-- 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>
3) 세로 정렬 : 위/중앙/아래 박스 정렬
- 사용법 : 1) class="align-items-center" : 세로 중앙 정렬 2) class="align-items-start" : 세로 위쪽 정렬 3) class="align-items-end" : 세로 아래쪽 정렬 <div class="container text-center"> <!-- TODO: 세로 중앙 정렬 --> <div class="row align-items-center"> <div class="col">col</div> </div> <!-- TODO: 세로 위쪽 정렬 --> <div class="row align-items-start"> <div class="col">col</div> </div> <!-- TODO: 세로 아래쪽 정렬 --> <div class="row align-items-end"> <div class="col">col</div> </div> </div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!-- bootstrap css cdn : 일반적인 디자인 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" /> <!-- 예제 디자인 샘플 --> <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" 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칸) --> <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>
4) 이미지 크기
- 사용법 : class="img-fluid" : === max-width : 100%; height:auto 의미 가로 창크기를 늘렸을때 원본이미지를 훼손하지 않는범위에서 늘어남 <img src="./img/pic_1.jpg" class="img-fluid" alt="사과">
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!-- bootstrap css cdn : 일반적인 디자인 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" /> </head> <body> <div class="container"> <img src="./img/pic_1.jpg" class="img-fluid" alt="사과"> </div> </body> </html>
5) 이미지 배치 : 좌/우/중앙
- 사용법 : 1) class="float-start" : 좌측 정렬 2) class="float-end" : 우측 정렬 3) class="mx-auto d-block" : 중앙 정렬 <!-- 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="소년">
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!-- bootstrap css cdn : 일반적인 디자인 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" 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>
6) 컴포넌트 : 테이블
- 사용법 : 1) <table class="table"> : 테이블 디자인 적용 2) <table class="table table-striped "> : 테이블 스트라이프 디자인 적용 3) <table class="table table-striped table-hover "> : 테이블 스트라이프 + 마우스커서 위에 위치시 색깔 효과 디자인 적용 4) <tr class="table-dark"> : 테이블 행에(tr) 검은색 적용 <table class="table table-striped table-hover"> <!-- 제목 --> <thead> <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> ... </tbody> </table>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!-- bootstrap css cdn : 일반적인 디자인 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" /> </head> <body> <!-- 부트스트랩 테이블 : class="table" --> <div class="container"> <table class="table table-striped table-hover"> <!-- 제목 --> <thead> <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> <!-- 자동정렬 단축키 : ctrl + alt + l (인텔리제이 단축키) --> </body> </html>
7) 글자색 :
- 사용법 : text-색깔예약어 등 색깔이 있음 (색깔예약어 : primary(파란색), info(하늘색) 등)) 1) class="text-primary" : 파란색 2) class="text-info" : 하늘색
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!-- bootstrap css cdn : 일반적인 디자인 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" /> </head> <body> <!-- TODO: 부트스트랩 글자색 종류 --> <!-- 사용법 : class="container" : 가상페이지 중앙정렬 --> <div class="container"> <!-- 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>
8) 글자 정렬/글자크기 :
글자 정렬
사용법 : text-정렬예약어 등 색깔이 있음
1) class=”text-center” : 글자 중앙 정렬
2) class=”text-start” : 글자 왼쪽 정렬
3) class=”text-end” : 글자 오른쪽 정렬글자 크기
사용법 : fs-숫자 로 사용하며 , 숫자는 1 ~ 6 가지 크기가 미리 정의되어 있음
1) class=”fs-숫자(1 ~ 6)” : 글자 크기(1 ~ 6 크기)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!-- bootstrap css cdn : 일반적인 디자인 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" /> </head> <body> <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>
9) 배경색 :
- 사용법 : bg-색깔예약어 등 색깔이 있음 (색깔예약어 : primary(파란색), warning(노란색) 등)) 1) class="bg-primary" : 파란색 배경색 2) class="bg-warning" : 노란색 배경색
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!-- bootstrap css cdn : 일반적인 디자인 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" /> </head> <body> <div class="container"> <!-- 사용법 : bg-primary : 배경색(파란색) --> <div class="text-white bg-primary"> Lorem ipsum dolor sit amet</div> <!-- 사용법 : 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> </div> </body> </html>
10) 가로/세로크기, 마진/패딩 :
가로 박스 크기
사용법 : class=”w-숫자”
1) class="w-25" : 가로 25% 크기
2) class="w-50" : 가로 50% 크기
3) class="w-75" : 가로 75% 크기
4) class="w-100" : 가로 100% 크기세로 박스 크기
사용법 : class=”w-숫자”
1) class="h-25" : 세로 25% 크기
2) class="h-50" : 세로 50% 크기
3) class="h-75" : 세로 75% 크기
4) class="h-100" : 세로 100% 크기마진 크기 : 바깥쪽 여백
사용법 : class=”m접미사-숫자” : 마진 크기 (숫자 : 1 ~ 5)
- 접미사 : t(top), e(end, right), b(bottom), s(start, left)
예) 1) class="m-1" : 4방향 동일하게 숫자 1크기의 마진(바깥여백)
예) 2) class="mt-1" : 숫자 1크기의 위쪽 마진(바깥여백)
예) 3) class="me-1" : 숫자 1크기의 왼쪽 마진(바깥여백)
예) 4) class="mb-1" : 숫자 1크기의 아래쪽 마진(바깥여백)
예) 5) class="ms-1" : 숫자 1크기의 오른쪽 마진(바깥여백)
- 접미사 : t(top), e(end, right), b(bottom), s(start, left)
패딩 크기 : 안쪽 여백 크기
사용법 : class=”p-숫자” : 마진 크기 (숫자 : 1 ~ 5)
- 접미사 : t(top), e(end, right), b(bottom), s(start, left)
예) 1) class="p-1" : 4방향 동일하게 숫자 1크기의 패딩(안쪽여백)
예) 2) class="pt-1" : 숫자 1크기의 위쪽 패딩(바깥여백)
예) 3) class="pe-1" : 숫자 1크기의 왼쪽 패딩(바깥여백)
예) 4) class="pb-1" : 숫자 1크기의 아래쪽 패딩(바깥여백)
예) 5) class="ps-1" : 숫자 1크기의 오른쪽 패딩(바깥여백)
- 접미사 : t(top), e(end, right), b(bottom), s(start, left)
디스플레이 변경 속성
사용법 : class=”d-디스플레이속성” :
- 디스플레이속성 : block ,inline-block, inline
예) 1) class="d-none" : none 속성
예) 2) class="d-block" : 블럭 속성
예) 3) class="d-inline-block" : 인라인 블럭 속성
예) 4) class="d-inline" : 인라인 속성
- 디스플레이속성 : block ,inline-block, inline
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!-- bootstrap css cdn : 일반적인 디자인 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" /> </head> <body> <div class="container"> <!-- TODO: 가로 예제 --> <div class="w-25 p-3" style="background-color: #eee">Lorem</div> <div class="w-50 p-3" style="background-color: #eee">Lorem</div> <div class="w-75 p-3" style="background-color: #eee">Lorem</div> <div class="w-100 p-3" style="background-color: #eee">Lorem</div> <!-- TODO: 세로 + 인라인블럭 예제 --> <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>
11) 테두리(외곽선)
- 사용법 : class=”border” : 테두리(4군데 모두)
1) class="border" : 테두리(4군데 모두)
2) class="border-top" : 테두리 위쪽
3) class="border-right" : 테두리 오른쪽
4) class="border-bottom" : 테두리 아래쪽
5) class="border-left" : 테두리 왼쪽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!-- bootstrap css cdn : 일반적인 디자인 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" /> <!-- 예제 디자인 샘플 --> <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet" /> </head> <body class="p-3 m-0 border-0 bd-example bd-example-border-utils"> <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>