안녕하세요. 명월입니다.
이 글은 부트스트랩에서 레이아웃 설정에 대한 글입니다.
링크 - https://getbootstrap.com/docs/4.3/layout/overview/
사실 부트스트랩의 사양서는 제가 작성한 글보다는 직접 bootstrap document를 보는 것이 정확하나 저는 좀 더 예제를 포함해서 저는 이렇게 사용한다라고 추가 설명하는 글입니다.
실제 프로젝트에서 작업하시는 것이라면 제 예제보다는 document를 참조하세요.
먼저 우리가 웹 페이지를 만들 때, 보통 header, main, footer의 형식으로 만듭니다. 꼭 이게 절대적인 것은 아닙니다만, 제 경험으로는 대부분의 웹 페이지의 디자인은 header, main, footer이지 않을까 싶습니다.
보통 header에는 사이트의 타이틀과 메뉴가 들어가고 main에는 페이지의 내용 그리고 footer에는 제작자, 연락처 등등이 들어가지 않을까 싶습니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Layout Test</title>
</head>
<body>
<!-- 해더 영역 // 네비게이션과 검색 박스, 모바일의 경우는 토글 버튼이 있다. -->
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- 타이틀 -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- 모바일의 경우 토클 메뉴 버튼 -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- 메뉴 -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<!-- 검색 박스 -->
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<!-- 메인 min-height는 내가 넣어서 최소 높이 설정을 했다. 푸터가 화면 하단에 생길수 있도록... -->
<div class="container-fluid" style="min-height: calc(100vh - 136px);">
hello world
</div>
<!-- 하단 푸터이다. 가운데 정렬를 했다. -->
<footer style="text-align:center">
<p class="about">
<a href="."><i class="fa fa-home"></i> Home</a> |
<a href="." rel="nofollow">About</a> |
<a href="." rel="nofollow">Contact</a> |
<a href="." rel="nofollow">Terms of Use</a> |
<a href="." rel="nofollow">Privacy Policy</a>
</p>
<p>© Copyright 2000 - 2019 nowonbun.tistory.com </p>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
헤더 링크 - https://getbootstrap.com/docs/4.3/components/navbar/
레이아웃 링크 - https://getbootstrap.com/docs/4.3/layout/overview/
부트스트랩을 이용하니 기본 틀이 순식간에 만들어 졌다. 정말 부트스트랩을 소개하면서 작성하고 있지만 개발자가 디자인 영역까지 작성할 수 있다니 정말 예전보다 개발 환경이 좋아진 것같습니다.
전체적인 틀은 확인 했고 세부적인 레이아웃을 확인하겠습니다.
일단은 부트스트립은 윈도우 너비크기로 총 5단계로 나누었습니다.
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
「~575.98px」 구간은 옛날 스마트폰입니다.(구 IPhone 5/5S 정도의 구간입니다.) 저의 경우는 이 구간을 따로 만들지 않고 「576px~767.98px」 구간과 합쳐서 만듭니다.
「576px~767.98px」 구간도 역시 스마트폰 구간인다.. 최신 액정이 큰 스마트폰이라고 생각하면 됩니다. 「768px~991.98px」는 타블렛 구간입니다. 조금 10.1형의 타블렛은 「992px~1199.98px」의 구간에 들어갈 수 있습니다.
「992px~1199.98px」의 구간은 구 노트북, 신 타블렛 구간입니다.
최근의 PC 해상도는 1920이 대세이기 때문에 「1200px~」구간보다 훨씬 큰 영역이네요..
정리하면 다음과 같습니다.
| 구간 | 디바이스 영역 |
|---|---|
| 「~575.98px」 | 구 스마트 폰 |
| 「576px~767.98px」 | 신 스마트 폰 |
| 「768px~991.98px」 | 타블렛 |
| 「992px~1199.98px」 | 10.1형의 해상도가 높은 타블렛, 구 노트북, PC |
| 「1200px~」 | 데스크탑 |
개인적으로 저는 5구간이 좀 복잡하게 느껴져서 3구간으로 나누어서 작업을 많이 합니다. 그러나 부트스트립은 그리드가 5분할이기 때문에 반드시 3분할로 사용하는 건 아닙니다.
@media (max-width: 767.98px) { ... }
@media (min-width: 768px) and (max-width: 991.98px) { ... }
@media (min-width: 1200px) { ... }
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Layout Test</title>
</head>
<body>
<style>
@media (max-width: 767.98px) {
.test-span{
background-color:red;
}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
.test-span{
background-color:blue;
}
}
@media (min-width: 1200px) {
.test-span{
background-color:green;
}
}
</style>
<div class="container-fluid">
<span class="test-span">hello world</span>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
여기까지 부트스트랩의 레이아웃에 대한 소개였습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Open source > Bootstrap' 카테고리의 다른 글
| [Bootstrap] Scrollspy (0) | 2019.09.02 |
|---|---|
| [Bootstrap] 모달 (Modal) (2) | 2019.07.19 |
| [Bootstrap] Breadcrumbs(웹 네비게이션) 디자인과 Paging 디자인 (0) | 2019.07.17 |
| [Bootstrap] 메뉴 바 ( Navbar ) (0) | 2019.07.16 |
| [Bootstrap] Form-control ( Html input object ) (0) | 2019.07.13 |
| [Bootstrap] Color (색상) (0) | 2019.07.12 |
| [Bootstrap] 그리드(Grid) (0) | 2019.07.11 |
| [Bootstrap] HTML 디자인 프레임워크 부트스트랩 소개. (0) | 2019.07.10 |