그리드 시스템 (grid system)이란?
그리드 시스템이란 화면을 몇 개의 칼럼 (column)으로 나누어 요소를 배치하도록 하는 시스템입니다. 그리드 시스템은 화면을 단순하게 만들면서 동시에 배열을 규칙적으로 할 수 있다는 장점이 있습니다.
고정 그리드 레이아웃 (fixed grid layout)
고정 그리드 (fixed grid)란 말그대로 그리드의 너비를 픽셀 (px)로 고정하는 것을 의미합니다. 예를 들어 그리드의 너비를 360px로 입력하였다면 화면의 크기와 상관없이 해당 그리드는 너비 360px을 유지합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Fixed Grid Layout</title>
<style>
.layout {
width:960px;
margin:0 auto;
}
header {
width:960px;
height:100px;
background-color:rgb(125,125,250);
text-align: center;
}
section {
float:left;
width:600px;
height:300px;
background-color:rgb(125,250,250);
text-align: center;
padding: 70px 0 0 0;
}
aside {
float:right;
width:360px;
height:300px;
background-color: rgb(0,255,125);
text-align: center;
padding: 70px 0 0 0;
}
footer {
clear:both;
width:960px;
height:100px;
background-color: rgb(100,100,255);
text-align: center;
}
</style>
</head>
<body class="layout">
<header>
<h2>고정 그리드 레이아웃 (fixed grid layout)</h2>
<p>너비 (width) : 960px (fixed)</p>
</header>
<section>
<h2>본문</h2>
<p>너비 (width) : 600px (fixed)</p>
</section>
<aside>
<h2>사이드바</h2>
<p>너비 (width) : 360px (fixed)</p>
</aside>
<footer>
<h2>푸터</h2>
<p>너비 (width) : 960px (fixed)</p>
</footer>
</body>
</html>
예전에는 웹에 접속할 수 있었던 기기가 PC 뿐이었지만, 요즘에는 스마트폰, 태블릿 PC 등 다양한 기기를 사용하여 웹에 접속합니다. 그리고 그 기기들은 화면의 크기가 서로 많이 다릅니다. PC의 크기에 맞춰 레이아웃을 만들면 스마트폰이나 태블릿 PC에서는 화면이 한 눈에 들어오지 않아 보는데 불편함이 많을 것입니다.
가변 그리드 레이아웃 (fluid grid layout)
고정 그리드 레이아웃의 문제점을 해결하기 위해 가변 그리드 레이아웃을 사용할 수 있습니다. 고정 그리드 레이아웃은 픽셀 값으로 그리드의 너비를 고정시켜놓는다면 가변 그리드 레이아웃은 백분율을 이용하여 화면 너비에 대해 각 그리드의 너비 비율을 정할 수 있습니다. 그래서 화면의 크기 변화에 따라 그리드의 크기도 같이 변하게 됩니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Fluid Grid Layout</title>
<style>
.layout {
width:100%;
margin:0 auto;
}
header {
width:100%;
height:100px;
background-color:rgb(125,125,250);
text-align: center;
}
section {
float:left;
width:60.25%;
height:300px;
background-color:rgb(125,250,250);
text-align: center;
padding: 0.073% 0 0 0;
}
aside {
float:right;
width:39.75%;
height:300px;
background-color: rgb(0,255,125);
text-align: center;
padding: 0.073% 0 0 0;
}
footer {
clear:both;
width:100%;
height:100px;
background-color: rgb(100,100,255);
text-align: center;
}
</style>
</head>
<body class="layout">
<header>
<h2>가변 그리드 레이아웃 (fluid grid layout)</h2>
<p>너비 (width) : 100%</p>
</header>
<section>
<h2>본문</h2>
<p>너비 (width) : 60.25%</p>
</section>
<aside>
<h2>사이드바</h2>
<p>너비 (width) : 39.75%</p>
</aside>
<footer>
<h2>푸터</h2>
<p>너비 (width) : 100%</p>
</footer>
</body>
</html>
'IT공부 > HTML + CSS + Javascript' 카테고리의 다른 글
| HTML 기초 4 - select 태그와 datalist 태그의 차이점 (0) | 2021.01.02 |
|---|---|
| HTML 기초 3 - map, area 태그를 활용하여 하나의 이미지에 링크 여러개 달기 (0) | 2020.12.31 |
| HTML 기초 2 - table(표) 만들기 (thead, tbody, tfoot, col, colgroup 태그) (0) | 2020.12.30 |
| HTML 기초 1 - HTML 문서의 기본구조 (0) | 2020.12.29 |
방구석 세계인
관심분야 : 외국어 학습, 프로그래밍, 책 리뷰 등...