본문 바로가기
HTML/CSS

[HTML/CSS] bootstrap Grid, border

by teamnova 2023. 6. 12.
728x90

안녕하세요. 오늘은 bootstrap을 이용하여 편리하게 공간을 분배해보겠습니다.

 

- 완성

 

 

- bootstrap 셋팅

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">

bootstrap을 쓸 수 있도록 추가해줍니다.

 

 

- grid (class 속성)

      <div class="row">
        <div class="col-8">col-8</div>
        <div class="col-3">col-3</div>
        <div class="col-1">col-1</div>
      </div>

grid 적용 후

class 속성값으로 row, col을 사용합니다.

row한 줄을 12칸으로 나눠 8칸, 3칸, 1칸을 차지한다는 뜻입니다. 

 

 

- border (class 속성)

      <div class="row">
        <div class="col-8 border border-success">col-8</div>
        <div class="col-3 border-bottom border-danger">col-3</div>
        <div class="col-1 border border-info border-start-0 rounded-end">col-1</div>
      </div>

border 적용 후

눈에 보이지 않으므로 테두리를 설정해봅니다. 

border-success는 저 이름의 색상이 정해져있습니다. 아래 border-danger도 마찬가집니다. 

아래 테두리만할지, 전체테두리인지 등을 설정해줍니다. 

자세한 값은 공식홈페이지를 참고해주세요

 

 

- Color and background 속성

배경색 설정

12칸을 나눠서 이런 예시도 만들 수 있습니다. 

 

 

- 전체 코드

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=s, initial-scale=1.0">
    <title></title>
        integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <div class="container text-center">
            <div class="row">
                <div class="col-8 border border-success">col-8</div>
                <div class="col-3 border-bottom border-danger">col-3</div>
                <div class="col-1 border border-info border-start-0 rounded-end">col-1</div>
            </div>
        </div>
        <br>
        <h2>12명의 과일 선호도</h2>
        <div class="row col-8 text-bg-danger">사과 8</div>
        <div class="row col-3 text-bg-warning">바나나 3</div>
        <div class="row col-1 text-bg-success">수박 1</div>
    </div>
</body>