투케이2K
49. (html/css/javascript/jquery) 부트스트랩 (bootstrap) container , col 사용해 그리드 (grid) 레이아웃 만들기 본문
49. (html/css/javascript/jquery) 부트스트랩 (bootstrap) container , col 사용해 그리드 (grid) 레이아웃 만들기
투케이2K 2021. 7. 19. 15:31[ 개발 환경 설정 ]
개발 툴 : Edit++
개발 언어 : html, css, js, jquery
[소스 코드]
<!DOCTYPE HTML>
<!-- 표시 언어 지정 -->
<html lang="ko">
<!-- 헤더 정의 부분 -->
<head>
<title>HTML TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 반응형 뷰 포트를 사용하기 위함 -->
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0">
<!-- Jquery CDN 로드 : 항상 최신 버전 사용 -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<!-- 부트스트랩 CDN 로드 : 항상 최신 버전 사용 : maxcdn -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
<!-- 부트스트랩 CDN 로드 : 항상 최신 버전 사용 : netdna -->
<!-- <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"> -->
<!-- <script src="https://netdna.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script> -->
<!-- 내부 CSS 스타일 지정 -->
<style>
/*
[CSS 요소 설명]
*/
/* [html, body 영역 스타일 지정] */
html, body{
width : 100%;
height : 100%;
margin : 0;
padding : 0;
border : none;
overflow : auto;
}
/* [body 스크롤바 메인 스타일 지정] */
body::-webkit-scrollbar {
width: 10px;
background-color: #c1c1c1;
}
/* [body 스크롤바 thumb 스타일 지정] */
body::-webkit-scrollbar-thumb {
background-color: #444444;
}
/* [col 스타일 지정 실시] */
.col {
background-color: #ffec99;
border: 1px solid #495057;
}
.col-sm-3 {
background-color: #ffec99;
border: 1px solid #495057;
}
</style>
<!-- 내부 JS 스타일 지정 -->
<script>
/*
[JS 요약 설명]
*/
/* [html 최초 로드 및 이벤트 상시 대기 실시] */
window.onload = function() {
console.log("");
console.log("[window onload] : [start]");
console.log("");
};
/* [이벤트 함수 정의] */
function main(){
console.log("");
console.log("[main] : [start]");
console.log("");
};
</script>
</head>
<body>
<!--
[요약 설명]
1. 컨테이너는 CSS에서 배운것 처럼 화면구성요소들을 묶기 위한 틀 입니다
2. 컨테이너는 보통 <div> 태그들을 중첩해 사용하는 형식을 취하며 부트스트랩도 동일합니다
3. container : 반응형으로 동작하며 고정폭을 가지고 있습니다 (자동 마진 크기를 가지고 있습니다)
4. container-fluid : viewport 전체 폭을 모두 차지하는 컨테이너 박스입니다
5. 부트스트랩의 그리드는 flexbox(Flexible Box Layout Module)에 기반하고있습니다
6. flexbox 는 기존의 float, display, position 등을 이용한 박스 배치를 컨테이너 안에서 중심축을 기반으로 일관된 방식으로 배치합니다
7. 부트스트랩의 그리드 시스템은 화면크기에 따라 사용할 수 있는 5개의 옵션을 제공합니다
(.col- (extra small devices - 화면크기 < 576px))
(.col-sm- (small devices - 화면크기 ≥ 576px))
(.col-md- (medium devices - 화면크기 ≥ 768px))
(.col-lg- (large devices - 화면크기 ≥ 992px))
(.col-xl- (xlarge devices - 화면크기 ≥ 1200px))
8. 부트스트랩에서는 기본적으로 em 이나 rem 단위를 사용하지만 그리드 컨테이너의 폭을 계산하는데는 viewport 를 따라 px 을 사용합니다
9. 그리드 제작 도움 사이트 : http://shoelace.io/
-->
<!-- 레아아웃 지정 : 행 정렬 -->
<div class="container mt-5">
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
</div>
<!-- 레아아웃 지정 : 행 정렬 -->
<div class="row mt-5">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
<!-- 레아아웃 지정 : 행 교체 정렬 -->
<div class="container mt-5">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
</body>
</html>
[결과 출력]
[요약 설명]
1. 컨테이너는 CSS에서 배운것 처럼 화면구성요소들을 묶기 위한 틀 입니다
2. 컨테이너는 보통 <div> 태그들을 중첩해 사용하는 형식을 취하며 부트스트랩도 동일합니다
3. container : 반응형으로 동작하며 고정폭을 가지고 있습니다 (자동 마진 크기를 가지고 있습니다)
4. container-fluid : viewport 전체 폭을 모두 차지하는 컨테이너 박스입니다
5. 부트스트랩의 그리드는 flexbox(Flexible Box Layout Module)에 기반하고있습니다
6. flexbox 는 기존의 float, display, position 등을 이용한 박스 배치를 컨테이너 안에서 중심축을 기반으로 일관된 방식으로 배치합니다
7. 부트스트랩의 그리드 시스템은 화면크기에 따라 사용할 수 있는 5개의 옵션을 제공합니다
(.col- (extra small devices - 화면크기 < 576px))
(.col-sm- (small devices - 화면크기 ≥ 576px))
(.col-md- (medium devices - 화면크기 ≥ 768px))
(.col-lg- (large devices - 화면크기 ≥ 992px))
(.col-xl- (xlarge devices - 화면크기 ≥ 1200px))
8. 부트스트랩에서는 기본적으로 em 이나 rem 단위를 사용하지만 그리드 컨테이너의 폭을 계산하는데는 viewport 를 따라 px 을 사용합니다
9. 그리드 제작 도움 사이트 : http://shoelace.io/