반응형
1. 그리드 시스템
1) 그리드 시스템
① BootStrap 그리드 시스템은 일련의 컨테이너, 행, 열을 사용하여 콘텐츠를 레이아웃화하고 정렬함.
② 작동 원리
- 6개의 반응형 중단점(중단점은 미디어쿼리의 min-width 기준)
- 컨테이너는 콘텐츠를 중앙에 배치 후에 양 옆을 채우는 방식
- 행은 열의 래퍼
- 열은 매우 유연함. 12개의 열까지 나눌 수 있음.
③ BootStrap 반응형 다단레이아웃 구성표
2) 모든 중단점
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>모든 중단점</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<style>
.row {
margin-bottom: 15px;
}
[class*='col'] {
padding-top: 15px;
padding-bottom: 15px;
background-color: darkblue;
border: 2px solid white;
color: white;
}
</style>
</head>
<body>
<div class="container">
<!--row : 행 생성-->
<div class="row">
<!--col : 열 생성-->
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<!--col-8 : 8개의 열 병합-->
<div class="col-8">col-8</div>
<!--col-4 : 4개의 열 병합-->
<div class="col-4">col-4</div>
</div>
</div>
</body>
</html>
3) 가변길이 그리드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가변 길이 그리드</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<style>
.row {
margin-bottom : 15px;
}
[class*='col'] {
padding-top: 15px;
padding-bottom: 15px;
background-color: darkblue;
border: 2px solid white;
color: white;
}
</style>
</head>
<body>
<div class="container">
<!--justify-content-md-center : 콘텐츠 가운데 정렬-->
<div class="row justify-content-md-center">
<div class="col col-lg-2">1 of 3</div>
<!--col-중단점-auto : 가변길이 열 생성--->
<div class="col-md-auto">Variable width content</div>
<div class="col col-lg-2">3 of 3</div>
</div>
<div class="row">
<div class="col">1 of 3</div>
<div class="col-md-auto">Variable width content</div>
<div class="col col-lg-2">3 of 3</div>
</div>
</div>
</body>
</html>
4) 수평 중첩
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>수평 중첩</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<style>
.row {
margin-bottom : 15px;
}
[class*='col'] {
padding-top: 15px;
padding-bottom: 15px;
background-color: darkblue;
border: 2px solid white;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<!--수평 중첩 : col-sm* 열을 사용하여 화면이 작아지면
수평으로 중첩되도록 열 사이즈 조절
태블릿 이상 다단 구성
모바일 이하 1단 구성-->
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
</body>
</html>
5) 섞기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>섞기</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<style>
.row {
margin-bottom : 15px;
}
[class*='col'] {
padding-top: 15px;
padding-bottom: 15px;
background-color: darkblue;
border: 2px solid white;
color: white;
}
</style>
</head>
<body>
<div class="container">
<!--섞기 : 필요에 따라 서로 다른 클래스의 열을 조합하여 사용-->
<div class="row">
<!--모바일 이하 1단
태블릿 이상 2단-->
<div class="col-md-8">col-md-8</div>
<div class="col-6 col-md-4">col-6 col-md-4</div>
</div>
<div class="row">
<!--모바일 이하 2단
태블릿 이상 3단-->
<div class="col-6 col-md-4">col-6 col-md-4</div>
<div class="col-6 col-md-4">col-6 col-md-4</div>
<div class="col-6 col-md-4">col-6 col-md-4</div>
</div>
<div class="row">
<!--모든 너비에서 2단-->
<div class="col-6">col-6</div>
<div class="col-6">col-6</div>
</div>
</div>
</body>
</html>
6) 행렬
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>행렬</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<style>
.row {
margin-bottom : 15px;
}
[class*='col'] {
padding-top: 15px;
padding-bottom: 15px;
background-color: darkblue;
border: 2px solid white;
color: white;
}
</style>
</head>
<body>
<!--한행의 열의 개수 2개로 설정-->
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<!--한행의 열의 개수 3개로 설정-->
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<!--한행의 열의 개수 가로길이에 따라 자연스럽게 조절-->
<div class="container">
<div class="row row-cols-auto">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
</body>
</html>
* 맨 아래 열의 '개수'가 창 크기에 따라 달라지는걸 볼 수 있음
7) 예제 – grid-006.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>toolbar-button</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<style>
body {
padding-top: 70px;
}
</style>
</head>
<body>
<!--navbar : 네비게이션 바 선언-->
<!--navbar-dar : 네비게이션 바 스타일-->
<!--bg-dark : 네비게이션 바 배경색-->
<!--fixed-top : 고정형 네비게이션 바 선언-->
<!--navbar-expand : 화면크기에 따라 네비게이션 바 가로표출할지, 세로표출할지 결정-->
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-lg">
<div class="container">
<!--navbar-brand : 네비게이션 바 제목 설정, 홈 버튼-->
<a href="#" class="navbar-brand">BootStrap</a>
<!--navbar-toggler : collapse플러그인 toggle 기능 추가-->
<!--data-bs-toggle="collapse" : 콘텐츠 숨김-->
<!--data-bs-target : 콘텐츠 숨길 대상 설정-->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbar-content">
<!--navbar-toggler-icon : 콘텐츠 숨길 시 버튼 생성-->
<span class="navbar-toggler-icon"></span>
</button>
<!--네비게이션 바 콘텐츠 영역, collapse 플러그인-->
<div class="collapse navbar-collapse" id="navbar-content">
<!--navbar-nav : 네비게이션 바 콘텐츠 선언-->
<!--me-auto : 좌우 마진 자동 설정-->
<ul class="navbar-nav me-auto">
<!--navbar-item : 네비게이션 바 콘텐츠-->
<!--dropdown : 드롭다운 목록 선언-->
<li class="nav-item dropdown">
<!--nav-link : 네비게이션 바 링크 선언-->
<!--dropdown-toggle : 드롭다운 목록 숨김-->
<a href="" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">HTML5</a>
<!--dropdown-menu : 드롭다운 영역 설정-->
<div class="dropdown-menu">
<!--dropdown-item : 드롭다운 콘텐츠-->
<a href="#" class="dropdown-item">Geolaction</a>
<a href="#" class="dropdown-item">Drag and Drop</a>
<!--dropdown-divider : 드롭다운 나눔 줄 추가-->
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Motion</a>
</div>
</li>
<li class="nav-item"><a href="#" class="nav-link">CSS3</a></li>
<li class="nav-item"><a href="#" class="nav-link">ECMAScript5</a></li>
<li class="nav-item"><a href="#" class="nav-link">Node.js</a></li>
<li class="nav-item"><a href="#" class="nav-link">API</a></li>
</ul>
<!--form-inline : inline 폼 선언-->
<form action="" class="form-inline">
<!--form-control : 폼 input박스 스타일 적용-->
<input type="text" class="form-control" placeholder="Search">
</form>
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">Node.js</a></li>
<li class="nav-item"><a href="#" class="nav-link">API</a></li>
</ul>
</div>
<!--네비게이션 바 콘텐츠 영역, collapse 플러그인-->
</div>
</div>
<!--container-fluid class : fluid layout 제공, 화면크기에 맞게 레이아웃 변경-->
<!-- <div class="container-fluid"> -->
<!--container class : fixed layout 제공, 가로길이 960px로 고정-->
<div class="container">
<div class="row">
<!--모바일 이하 열 3개 병합 표출
태블릿 이상 열 4개 병합 표출-->
<div class="col-3 col-sm-4">
<h1>Bluberry</h1>
<p>북아메리카를 비롯한 북반구 전역에 분포하는 식물 및 열매. 북아메리카 등지에서 품종개량 등을 활발하게 한다.
이름과 달리 딸기, 라즈베리, 블랙베리 등의 베리류와는 전혀 관계가 없는 진달래과 식물로,
진달래과에 속하는 베리로는 크랜베리(넌출월귤), 월귤(링곤베리), 빌베리 등이 있다.</p>
<p>북아메리카를 비롯한 북반구 전역에 분포하는 식물 및 열매. 북아메리카 등지에서 품종개량 등을 활발하게 한다.
이름과 달리 딸기, 라즈베리, 블랙베리 등의 베리류와는 전혀 관계가 없는 진달래과 식물로,
진달래과에 속하는 베리로는 크랜베리(넌출월귤), 월귤(링곤베리), 빌베리 등이 있다.</p>
<p>북아메리카를 비롯한 북반구 전역에 분포하는 식물 및 열매. 북아메리카 등지에서 품종개량 등을 활발하게 한다.
이름과 달리 딸기, 라즈베리, 블랙베리 등의 베리류와는 전혀 관계가 없는 진달래과 식물로,
진달래과에 속하는 베리로는 크랜베리(넌출월귤), 월귤(링곤베리), 빌베리 등이 있다.</p>
</div>
<!--모바일 이하 열 9개 병합 표출
태블릿 이상 열 6개 병합 표출-->
<div class="col-9 col-sm-6">
<h1>Bluberry</h1>
<p>북아메리카를 비롯한 북반구 전역에 분포하는 식물 및 열매. 북아메리카 등지에서 품종개량 등을 활발하게 한다.
이름과 달리 딸기, 라즈베리, 블랙베리 등의 베리류와는 전혀 관계가 없는 진달래과 식물로,
진달래과에 속하는 베리로는 크랜베리(넌출월귤), 월귤(링곤베리), 빌베리 등이 있다.</p>
<p>북아메리카를 비롯한 북반구 전역에 분포하는 식물 및 열매. 북아메리카 등지에서 품종개량 등을 활발하게 한다.
이름과 달리 딸기, 라즈베리, 블랙베리 등의 베리류와는 전혀 관계가 없는 진달래과 식물로,
진달래과에 속하는 베리로는 크랜베리(넌출월귤), 월귤(링곤베리), 빌베리 등이 있다.</p>
<p>북아메리카를 비롯한 북반구 전역에 분포하는 식물 및 열매. 북아메리카 등지에서 품종개량 등을 활발하게 한다.
이름과 달리 딸기, 라즈베리, 블랙베리 등의 베리류와는 전혀 관계가 없는 진달래과 식물로,
진달래과에 속하는 베리로는 크랜베리(넌출월귤), 월귤(링곤베리), 빌베리 등이 있다.</p>
</div>
</div>
</div>
</body>
</html>
2. 테이블
1) 테이블
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반응형 테이블</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<style>
h1 {
margin-bottom: 50px;
}
a {
color: white;
}
</style>
</head>
<body>
<h1>슈퍼푸드</h1>
<!--table-responsible : 반응형 표 영역 설정-->
<div class="table-responsive">
<!--table : 표 생성-->
<table class="table">
<tr>
<th>이름</th>
<th>효능</th>
<th>링크</th>
</tr>
<tr>
<th>블루베리</th>
<td>북아메리카를 비롯한 북반구 전역에 분포하는 식물 및 열매</td>
<td><button class="btn btn-primary"><a href="#">더 보기</a></button></td>
</tr>
<tr>
<th>마늘</th>
<td>이집트가 원산지인 여러해살이 외떡잎식물</rd>
<td><button class="btn btn-primary"><a href="#">더 보기</a></button></td>
</tr>
<tr>
<th>호두</th>
<td>원래 이름은 호도로, 생긴 게 복숭아</rd>
<td><button class="btn btn-primary"><a href="#">더 보기</a></button></td>
</tr>
<tr>
<th>카카오</th>
<td>Cacao 속명 테오브로마는 그리스어 신과 음식의 합성어다.</rd>
<td><button class="btn btn-primary"><a href="#">더 보기</a></button></td>
</tr>
</table>
</div>
</body>
</html>
2) 테이블
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table striped</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<style>
h1 {
margin-bottom: 50px;
}
a {
color: white;
}
</style>
</head>
<body>
<h1>슈퍼푸드</h1>
<!--table-responsive : 반응형 표 영역 설정-->
<div class="table-responsive">
<!--table : 표 생성-->
<!--table-striped : 표에 스트라이프 행 추가-->
<!--table-dark : 어두운 테마의 테이블 생성-->
<!--table-success : 초로색 테마의 테이블 생성-->
<table class="table table-success table-striped">
<tr>
<th>이름</th>
<th>효능</th>
<th>링크</th>
</tr>
<tr>
<th>블루베리</th>
<td>북아메리카를 비롯한 북반구 전역에 분포하는 식물 및 열매</td>
<td><button class="btn btn-primary"><a href="#">더 보기</a></button></td>
</tr>
<tr>
<th>마늘</th>
<td>이집트가 원산지인 여러해살이 외떡잎식물. 아스파라거스목 수선화과 부추아과 부추속에 속한다.</td>
<td><button class="btn btn-primary"><a href="#">더 보기</a></button></td>
</tr>
<tr>
<th>호두</th>
<td>원래 이름은 호도로, 생긴 게 복숭아 씨앗과 닮았는데 오랑캐 나라에서 들어온 복숭아</td>
<td><button class="btn btn-primary"><a href="#">더 보기</a></button></td>
</tr>
<tr>
<th>카카오</th>
<td>Cacao 속명 테오브로마는 그리스어 신과 음식의 합성어다.</td>
<td><button class="btn btn-primary"><a href="#">더 보기</a></button></td>
</tr>
</table>
</div>
</body>
</html>
3) 테이블
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table bordered</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<style>
h1 {
margin-bottom: 50px;
}
a {
color: white;
}
</style>
</head>
<body>
<h1>슈퍼푸드</h1>
<!--table-responsive : 반응형 표 영역 설정-->
<div class="table-responsive">
<!--table : 표 생성-->
<!--table-striped : 표에 스트라이프 행 추가-->
<!--table-dark : 어두운 테마의 테이블 생성-->
<!--table-success : 초로색 테마의 테이블 생성-->
<!--table-bordered : 테이블 테두리 생성-->
<table class="table table-bordered">
<tr>
<th>이름</th>
<th>효능</th>
<th>링크</th>
</tr>
<tr>
<th>블루베리</th>
<td>북아메리카를 비롯한 북반구 전역에 분포하는 식물 및 열매</td>
<td><button class="btn btn-primary"><a href="#">더 보기</a></button></td>
</tr>
<tr>
<th>마늘</th>
<td>이집트가 원산지인 여러해살이 외떡잎식물. 아스파라거스목 수선화과 부추아과 부추속에 속한다.</td>
<td><button class="btn btn-primary"><a href="#">더 보기</a></button></td>
</tr>
<tr>
<th>호두</th>
<td>원래 이름은 호도로, 생긴 게 복숭아 씨앗과 닮았는데 오랑캐 나라에서 들어온 복숭아</td>
<td><button class="btn btn-primary"><a href="#">더 보기</a></button></td>
</tr>
<tr>
<th>카카오</th>
<td>Cacao 속명 테오브로마는 그리스어 신과 음식의 합성어다.</td>
<td><button class="btn btn-primary"><a href="#">더 보기</a></button></td>
</tr>
</table>
</div>
</body>
</html>
4) 테이블
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table hover</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<style>
h1 {
margin-bottom: 50px;
}
a {
color: white;
}
</style>
</head>
<body>
<h1>슈퍼푸드</h1>
<!--table-responsive : 반응형 표 영역 설정-->
<div class="table-responsive">
<!--table : 표 생성-->
<!--table-striped : 표에 스트라이프 행 추가-->
<!--table-dark : 어두운 테마의 테이블 생성-->
<!--table-success : 초로색 테마의 테이블 생성-->
<!--table-bordered : 테이블 테두리 생성-->
<!--table-hover : 테이블에 hover시 색상변경-->
<table class="table table-hover">
<tr>
<th>이름</th>
<th>효능</th>
<th>링크</th>
</tr>
<tr>
<th>블루베리</th>
<td>북아메리카를 비롯한 북반구 전역에 분포하는 식물 및 열매</td>
<td><button class="btn btn-primary"><a href="#">더 보기</a></button></td>
</tr>
<tr>
<th>마늘</th>
<td>이집트가 원산지인 여러해살이 외떡잎식물. 아스파라거스목 수선화과 부추아과 부추속에 속한다.</td>
<td><button class="btn btn-primary"><a href="#">더 보기</a></button></td>
</tr>
<tr>
<th>호두</th>
<td>원래 이름은 호도로, 생긴 게 복숭아 씨앗과 닮았는데 오랑캐 나라에서 들어온 복숭아</td>
<td><button class="btn btn-primary"><a href="#">더 보기</a></button></td>
</tr>
<tr>
<th>카카오</th>
<td>Cacao 속명 테오브로마는 그리스어 신과 음식의 합성어다.</td>
<td><button class="btn btn-primary"><a href="#">더 보기</a></button></td>
</tr>
</table>
</div>
</body>
</html>
반응형
'💻 1. 웹개발_Front end > 1-6 Bootstrap' 카테고리의 다른 글
| [BootStrap] 06. 수직 목록 (0) | 2021.09.23 |
|---|---|
| [BootStrap] 05. 기타 요소 (0) | 2021.09.23 |
| [BootStrap] 03. 툴바 (0) | 2021.09.23 |
| [BootStrap] 02. 레이아웃 (0) | 2021.09.23 |
| [BootStrap] 01. BootStrap 시작하기 (0) | 2021.09.23 |
댓글