반응형
목차
글 시작에 앞서 visual studio에서 bootstrap 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바랍니다
(https://scribblinganything.tistory.com/298)
HTML - Bootstrap 사용해서 공간 배치하기 (Container)
Web에서 Frontend 디자인에서 레이아웃을 설정하는 것은 어려운 일입니다. 사이즈를 고정하면 웹브라우져의 화면에 따라 유연하게 반응하기 어렵습니다. Container 클래스 값을 적용하는 것만으로 쉽게 배치 문제를 해결할 수 있습니다.
Container 클래스의 종류는 아래와 같습니다.
- container
- container-sm
- container-md
- container-md
- container-xl
Bootstrap의 Container를 사용하면 Browser의 Pixel(픽셀) 값(크기)에 따라 유연하게 변경할 수 있습니다.
크기에 따른 동적 변화값은 아래와 같습니다.
| 특성명 | 576 픽셀 이하 | 576 픽셀 이상 | 768 픽셀 이상 | 992 픽셀 이상 | 1200 픽셀 이상 |
| container | 100% | 540px | 720px | 960px | 1140px |
| container-sm | 100% | 540px | 720px | 960px | 1140px |
| container-md | 100% | 100% | 720px | 960px | 1140px |
| container-lg | 100% | 100% | 100% | 960px | 1140px |
| container-xl | 100% | 100% | 100% | 100% | 1140px |
코딩 예제를 통해 바로 이해해보도록 하겠습니다.
예제 코드 구현하기
코드>>
<!DOCTYPE html>
<html lang="en">
<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>https://scribblinganything.tistory.com/</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid border p-3 my-3" style="background-color:AliceBlue;">
<h1>container-fluid</h1>
<p>TEST TEST TEST TEST TEST</p>
</div>
<div class="container border" style="background-color:AntiqueWhite;">
<h1>container</h1>
<p>TEST TEST TEST TEST TEST</p>
</div>
<div class="container-sm border" style="background-color:Chocolate;">container-sm</div>
<div class="container-md border" style="background-color:CornflowerBlue;">container-md</div>
<div class="container-lg border" style="background-color:DarkGoldenRod;">container-lg</div>
<div class="container-xl border" style="background-color:DarkGreen;">container-xl</div>
</body>
</html>반응형
결과>>
주석>>
결과와 같이 container 속성에 따라 사이즈가 정해지고 웹브라우저의 크기 변화에 맞추어 크기가 조절됩니다. 속성 값은 아래와 같습니다.
container-fluid 는 픽셀 크기에 상관없이 항상 100% 사이즈를 유지합니다.
containter는 항상 15픽셀로 오른쪽 왼쪽 패딩을 기본으로 가집니다.
속성에서 추가 설명을 하자면 boarder는 container의 외부선을 그어줍니다.
p-x는 내부 패딩(padding)값입니다.
my-x는 외부 마진(margin)값입니다.
반응형
'웹관련프로그래밍(web programming) > Bootstrap(부트스트랩)' 카테고리의 다른 글
| [Bootstrap]HTML 버튼,라벨,입력창 오른쪽 정렬/배치, 위, 아래 놓기 (0) | 2021.11.05 |
|---|---|
| HTML - Bootstrap 사용해서 공간(레이아웃) 배치하기 (Grid) (0) | 2021.10.13 |
| Bootstrap 팝업창(modal, dialog box) 만들기 (크기 조절) (0) | 2021.10.09 |
| 부트스트랩 - 말풍선(Tooltip) 만들기 (예제로 쉽게 이해하기) (0) | 2021.10.08 |
| Bootstrap(부트스트랩)예제 가져와서 Visual Studio에서 실행하고 웹브라우져에서 확인하기(browser) (0) | 2021.07.16 |