Bootstrap

2023. 02. 22.

프론트엔드 프레임워크

이미 작성되어있는 프론트 요소들을 가져다 쓰거나 반응형을 쉽게 구현할 수 있다.

Class로 컨트롤 하기

클래스명을 이용하여 CSS를 조정할 수 있다.

<div class="d-flex justify-content-center parent">
  <div class="m-3 p-3 child">1</div>
  <div class="m-3 p-3 child">2</div>
  <div class="m-3 p-3 child">3</div>
  <div class="m-3 p-3 child">4</div>
</div>

위처럼 클래스를 주면 아래처럼 CSS를 준 것과 같다.

.parent {
	display: flex;
	justify-content: center;
}

.child {
	margin: 3px;
	padding: 3px;
}

따라서 위와 같은 CSS를 쓰지 않아도 저러한 클래스명을 준 것만으로 아래와 같은 결과물이 나온다.

Grid

Container

container 클래스를 주면 화면 넓이에 따른 고정폭의 넓이를 제공한다.

기본 container 외에 -sm -md -lg 등의 옵션을 붙여 또 다른 넓이를 가지게 할 수 있다.

container-fluid 클래스를 주면 화면 넓이 100%의 폭을 가진다.

Row & Col

컨테이너 내부에 배치하는 행, 열의 개념

Col은 12grid를 col-숫자 만큼의 영역으로 나누어 사용한다.

이는 컨테이너 내부를 12개의 섹션으로 나누어 숫자만큼 차지하게 하는 것이다.

예시)

<div class="container">
        <div class="row">
          <div class="col-1">col-1</div>
          <div class="col-1">col-1</div>
          <div class="col-1">col-1</div>
          <div class="col-1">col-1</div>
          <div class="col-1">col-1</div>
          <div class="col-1">col-1</div>
          <div class="col-1">col-1</div>
          <div class="col-1">col-1</div>
          <div class="col-1">col-1</div>
          <div class="col-1">col-1</div>
          <div class="col-1">col-1</div>
          <div class="col-1">col-1</div>
        </div>
        <div class="row">
          <div class="col-4">col-4</div>
          <div class="col-4">col-4</div>
          <div class="col-4">col-4</div>
        </div>
        <div class="row">
          <div class="col-6">col-6</div>
          <div class="col-6">col-6</div>
        </div>
        <div class="row">
          <div class="col-12">col-12</div>
        </div>
        <div class="row">
          <div class="col-6">col-6</div>
          <div class="col-6">col-6</div>
          <div class="col-6">col-6</div>
        </div>
      </div>

반응형을 위한 복합사용

모바일의 경우 768px 이하 → col-sm 적용

태블릿은 768~992px → col-md 적용

데스크탑은 992px 이상 → col-lg 적용

<div class="container">
  <div class="row">
		<div class="col-lg-4 col-md-6 col-sm-12">1</div>
		<div class="col-lg-4 col-md-6 col-sm-12">2</div>
		<div class="col-lg-4 col-md-6 col-sm-12">3</div>
		<div class="col-lg-4 col-md-6 col-sm-12">4</div>
		<div class="col-lg-4 col-md-6 col-sm-12">5</div>
		<div class="col-lg-4 col-md-6 col-sm-12">6</div>
	</div> 
</div>

위처럼 적용하면 모바일의 경우 한줄에 1개로 6줄, 태블릿의 경우 한줄에 2개로 3줄, 데스크탑 화면에서는 한 줄에 3개로 2줄을 표현하게 된다.