반응형
Notice
Recent Posts
Recent Comments
Link
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
Tags more
Archives
Today
Total
관리 메뉴

짧은코딩

부트스트랩 사용법(1) 본문

HTML, CSS

부트스트랩 사용법(1)

5_hyun 2022. 5. 5. 23:30
반응형

https://getbootstrap.com/docs/5.1/getting-started/introduction/

 

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

getbootstrap.com

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!--부트스트랩 코드-->
</head>
<body>
<h1>hello world</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!--부트스트랩 코드-->
</body>
</html>

 

Grid

반응형 웹도 지원해준다. 보통은 md를 많이 사용한다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--부트스트랩 코드-->
    <style>
        .b{
            border: solid 1px black;
        }
    </style>
</head>
<body>
    <h1>grid system</h1>
    <div class="container">
        <div class="row">
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!--부트스트랩 코드-->
</body>
</html>

.container하고 tab 누르면 <div class="container"></div>이렇게 완성

12개의 column으로 구성되었다는 것이 부트스트랩의 기본 개념이다.
12개의 column중에 4개 column씩을 hello가 할당

=>가로 하나가 12개의 column으로 이루어져있는데 각각 4개씩 차지해서 칸을 만들어준다는 개념이다.

 

 

-결과

 

 

-한 줄 더 추가

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--부트스트랩 코드-->
    <style>
        .b{
            border: solid 1px black;
        }
    </style>
</head>
<body>
    <h1>grid system</h1>
    <div class="container">
        <div class="row">
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
        </div>
        <div class="row">
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!--부트스트랩 코드-->
</body>
</html>
<div class="container">
        <div class="row">
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
        </div>
    </div>

첫번째 혹은 두번째로 해도 결과는 똑같이 나온다.

 

-결과

 

-앞을 비우고 싶은 경우

<div class="container">
        <div class="row">
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
        </div>
        <div class="row">
            <div class="col-md-4 offset-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
        </div>
    </div>

offser-md를 하면 앞에 4개가 비어있는 것이다. 따라서 두번째 세번째만 써주면된다.

 

-결과

 

-여백을 없애는 법

<div class="container-fluid">
        <div class="row">
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
        </div>
        <div class="row">
            <div class="col-md-4 offset-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
        </div>
    </div>

 

-결과

 

-창 사이즈 조절 시

<div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-sm-6 b">hello</div>
            <div class="col-md-3 col-sm-6 b">hello</div>
            <div class="col-md-3 col-sm-12 b">hello</div>
        </div><div class="row">
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
        </div>
        <div class="row">
            <div class="col-md-4 offset-md-4 b">hello</div>
            <div class="col-md-4 b">hello</div>
        </div>
    </div>

 

  •  전체 화면 결과

 

  • 가로가 768px보다 작은 경우

768px 미만일 때는 sm으로 넘어가서 12개의 column중 6 6이 첫줄에 나오고 나머지 6이 두번째 줄에 나온다,

 

  • 가로가 576px보다 작은 경우

 

576px보다 작아지면 하나씩만 나온다.

 

 

KBD

<kbd>hello</kbd>

 

-결과

 

 

사진 넣기

   .container
        .row
            .col-md-4*3

 

이렇게하면

<div class="container">
        <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-4"></div>
            <div class="col-md-4"></div>
        </div>
    </div>

이렇게된다. 단축해서 쓸 수 있다.

 

-사진 

<div class="container">
        <div class="row">
            <div class="col-md-4">
                <img src="상어.jpeg">
            </div>
            <div class="col-md-4">
                <img src="상어.jpeg">
            </div>
            <div class="col-md-4">
                <img src="상어.jpeg">
            </div>
        </div>
    </div>

사진이 이렇게 겹쳐나온다.

 

해결책

 <div class="container">
        <div class="row">
            <div class="col-md-4">
                <img class="img-fluid" src="상어.jpeg">
            </div>
            <div class="col-md-4">
                <img src="상어.jpeg">
            </div>
            <div class="col-md-4">
                <img src="상어.jpeg">
            </div>
        </div>
    </div>

img 태그에 class="img-fluid"를 넣으면 넓이게 따라 움직이라는 것이 된다.

 

-결과

 

 

<div class="container">
        <div class="row">
            <div class="col-md-4">
                <img class="img-fluid rounded" src="상어.jpeg">
            </div>
            <div class="col-md-4">
                <img class="img-fluid rounded circle" src="상어.jpeg">
            </div>
            <div class="col-md-4">
                <img class="img-fluid img-thumbnail" src="상어.jpeg">
            </div>
        </div>
    </div>

rounded를 추가하면 모서리가 원형이된다.

rounded circle을 하면 타원형이 된다.

img-thumbnail을 하면 액자같이 테두리가 생긴다.

 

-결과

반응형
저작자표시

'HTML, CSS' 카테고리의 다른 글

CSS-사진 크기 조절  (0) 2022.05.09
부트스트랩 사용법(2)  (0) 2022.05.06
CSS-반응형 웹  (0) 2022.05.04
CSS-가상 셀렉터, flexbox  (0) 2022.05.04
CSS-Positon, float/display, 박스 요소 정렬  (0) 2022.05.03
'HTML, CSS' Related Articles more
Comments