VSCode_부트스트랩 basic. 그리드 시스템 1
부트스트랩
부트스트랩까지 왔습니다.
부트스트랩은 퍼블리싱이나 프론트 엔드 개발에 유용한
프레임워크입니다.
보다 쉽고 간단하며 직관적으로 페이지를 구성할 수 있게 도와주며
그러기 위해서는 grid system을 잘 이해해야합니다.
기본 그리드
<!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">
<title>Bootstrap</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
border: 1px solid red;
padding: 10px;
}
.row {
margin-bottom: 4px;
margin-top: 4px;
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--
# container 클래스가 하는 일은 전체 레이아웃을 감싸는 역할을 합니다.
# container-fluid클래스를 사용하면 전체 화면을 전부 사용할 수 있습니다.
-->
<div class="container">
<div class="row">
<div class="col-md-4">1번째 박스</div>
<div class="col-md-4">2번째 박스</div>
<div class="col-md-4">3번째 박스</div>
</div>
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div><!-- div.row-->
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
</div>
</div><!-- div.container-->
</body>
</html>
div class="low'>를 이용해 그리드를 나누고
거기서 col-md-?를 이용해 ? 안에 원하는 수를 넣음으로
레이아웃을 원하는 대로 분할하고 배정할 수 있습니다.
위에서 아래로, 왼쪽부터 오른쪽으로 직관적으로 알아서
동적으로 배열이 이루어지기 때문에
부트스트랩을 이용해 퍼블리싱을 한다면 그런 점을 유의하면 되겠습니다.
그리드의 이해
<!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">
<title>그리드 이해 </title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
border: 1px solid red;
}
.row{
margin-bottom: 4px;
margin-top: 4px;
}
.pad10 { padding: 10px; border-color: blue; background-color: #C0C0C0}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8"> .col-md-8
<div class="row">
<div class="col-md-4 pad10">
내부 12개 그리드 중 4개 .col-md-4
</div>
<div class="col-md-8 pad10">
내부 12개 그리드 중 8개 .col-md-8
</div>
</div>
</div>
<div class="col-md-4"> .col-md-4
<div class="row">
<div class="col-md-6 pad10">
내부 12개 그리드 중 6개 .col-md-6
</div>
<div class="col-md-6 pad10">
내부 12개 그리드 중 6개 .col-md-6
</div>
</div>
</div>
</div><!--div.low-->
<div class="row">
<div class="col-md-3">
3
<div class="row">
<div class="col-md-6 pad10">6</div>
<div class="col-md-5 pad10">5</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-4">1</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
</div><!--div.low-->
</body>
</html>
그리드 내부에 그리드를 배정함으로
즉 div class="low"밑에 다시 div class="low"를 상속시킴으로
내부 12개의 그리드 중 다시 12개의 그리드를 세분화시켜 배정할 수 있습니다.
일단은 여기까지 입니다.
Author And Source
이 문제에 관하여(VSCode_부트스트랩 basic. 그리드 시스템 1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@nugoory20/VSCode부트스트랩-basic.-그리드-시스템-1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
