1. ⭐부트스트랩 레이아웃 구조 이해

부트스트랩 기본 레이아웃 구조 이해

1. jombotron

대형전광판이란 의미로 웹사이트의 대형 광고영역을 제작 시 사용하는 이름입니다.

부트스트랩 클래스명칭으로 사용하여 디자인을 적용할 수 있습니다.

<div class="jumbotron">
	<h1>광고</h1>
</div>

기본 클래스 명칭으로 사용 시 형태를 확인하고 아래와 같이 사용자 지정클래스를 적용하기도 해봅시다.

.jumbotron {background:aqua;}

jumbotron 영역에 배경색상이 사용자 직접 명령어를 통해 달라진 것을 확인할 수 있습니다.

 

2. text-center

요소 안 인라인 내용을 가운데 정렬할 수 있습니다. (동일한 방법으로 왼쪽/오른쪽 정렬도 진행해 봅시다)

<div class="text-center">
	<h1>광고</h1>
</div>

 

3. container or container-fluid

반응형 웹 유동형 컨테이너 또는 항상 폭 100%를 유지하는 컨테이너

사용목적에 따라 컨테이너 영역을 위 두개중 골라서 사용할수 있습니다.

<div class="container">
  <p>contents test</p>
</div>

이미지출처) w3schools : container의 max-width 기준 표

<div class="container-fluid">
  <p>contents test</p>
</div>

 

4. row or col

다양한 영역에서 행과 열을 쉽게 구분할 수 있습니다.

행 구분하기

<div class="row"></div>

열 구분하기

열은 항상 1행 기준 12열에 맞추어 제작합니다.

아래 열 그리드 클래스를 활용하여 반응형에 따른 레이아웃을 설정할 수도 있습니다.

• .col-숫자 (화면너비 576px 미만)
• .col-sm-숫자 (화면 너비 576px 이상)
• .col-md-숫자 (화면 너비 768px 이상)
• .col-lg-숫자 (화면 너비 992px 이상)
• .col-xl-숫자 (화면 너비 1200px 이상)

▼ 다양한 col 영역 처리 클래스

<div class="col-4"></div>

<div class="col-lg-5 col-sm-8"></div>

<div class="col-lg-5 col-8"></div>

 

5. 테이블

class="table" 선언 만으로 레이아웃에 일정한 크기로 보기좋게 들어가는 표를 확인할 수 있습니다.

<!--기본(white design)-->
<table class="table">나머지 태그 동일</table>

<!--기본(black design)-->
<table class="table table-dark">나머지 태그 동일</table>

<!--스프라이프 배경색(tbody)-->
<table class="table table-striped">나머지 태그 동일</table>

<!--모든 방향 테두리 추가(tbody)-->
<table class="table table-bordered">나머지 태그 동일</table>

<!--모든 방향 테두리 제거-->
<table class="table table-borderless">나머지 태그 동일</table>

<!--마우스 올렸을 시 배경색 변경(tbody)-->
<table class="table table-hover">나머지 태그 동일</table>

<!--크기 변경(테이블 크게)-->
<table class="table table-lg">나머지 태그 동일</table>

<!--크기 변경(테이블 작게)-->
<table class="table table-sm">나머지 태그 동일</table>

 

추가적인 디자인 표를 표현하고 싶다면 아래 상황별 클래스를 활용해보세요.

.table-primary	파란 색:중요한 작업을 나타냅니다.
.table-success	녹색:성공한 작업 또는 긍정적인 작업을 나타냅니다.
.table-danger	빨간 색:위험하거나 잠재적으로 부정적인 조치를 나타냅니다.
.table-info	연한 파란 색 중립 정보 변경 또는 작업을 나타냅니다.
.table-warning	주황색:주의가 필요한 경고를 나타냅니다.
.table-active	회색: 가리키는 색상을 테이블 행 또는 테이블 셀에 적용합니다.
.table-secondary	회색:조금 덜 중요한 동작을 나타냅니다.
.table-light	연한 회색 테이블 또는 테이블 행 배경
.table-dark	진한 회색 테이블 또는 테이블 행 배경

반응형웹 테이블

테이블을 가지고 있는 부모 요소에 해당 이름을 입력 시 반응형 적용 시 가로스크롤로 표시되는 표를 볼 수 있습니다.

.table-responsive-sm	576px
.table-responsive-md	768px
.table-responsive-lg	992px
.table-responsive-xl	1200px

<div class="table-responsive-sm">          
  <table class="table">
  </table>
</div>