그리드 보기
반응형 웹 디자인 - 그리드 보기
그리드 보기란 무엇인가요?
많은 웹 페이지가 그리드를 기반으로 디자인되었습니다. 즉, 웹 페이지가 열로 배치됩니다.
그리드 보기를 사용하면 웹 페이지를 디자인하는 데 도움이 됩니다. 이렇게 하면 웹 페이지에 요소를 추가하기가 더 쉬워집니다.
반응형 그리드 보기는 일반적으로 12열, 100% 너비이며 브라우저 창 크기가 조정되면 자동으로 크기가 조정됩니다.
반응형 그리드 보기 만들기
다음으로 반응형 그리드 보기를 만듭니다.
먼저 모든 HTML 요소의 box-sizing 속성이 border-box로 설정되어 있는지 확인하세요.
요소의 너비와 높이 사이에 여백과 테두리가 포함되어 있는지 확인하세요.
다음 코드를 추가하세요:
* {
box-sizing: border-box;
}더 많은 상자 크기 조정 콘텐츠를 보려면 다음을 클릭하세요: CSS3 상자 크기 조정 속성.
다음 예는 두 개의 열을 포함하는 간단한 반응형 웹 페이지를 보여줍니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php中文网</title>
<style>
* {
box-sizing: border-box;
}
.header {
border: 1px solid red;
padding: 15px;
}
.menu {
width: 25%;
float: left;
padding: 15px;
border: 1px solid red;
}
.main {
width: 75%;
float: left;
padding: 15px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="main">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
</html>인스턴스 실행 »
온라인 예를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
위 예에는 다음이 포함되어 있습니다. 두 개의 열.
12열 그리드 시스템을 사용하면 반응형 웹 페이지를 더 효과적으로 제어할 수 있습니다.
먼저 각 열의 백분율을 계산할 수 있습니다: 100% / 12개 열 = 8.33%.
각 열에 클래스를 지정합니다. class="col-"는 각 열의 범위 수를 정의하는 데 사용됩니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php 中文网</title>
<style>
* {
box-sizing: border-box;
}
.header {
border: 1px solid red;
padding: 15px;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</div>
</body>
</html>인스턴스 실행»
"인스턴스 실행" 버튼을 클릭하여 온라인 보기 예
모든 열은 15px 패딩으로 왼쪽으로 부동합니다.
CSS:
[class*="col-"] {
float: left;
padding : 15px;
테두리: 1px 단색 빨간색;
}
float: left;
padding : 15px;
테두리: 1px 단색 빨간색;
}
각 줄을 <div>로 감싸세요. 모든 열 번호의 합은 최대 12여야 합니다.
<div class="row">
<div class="col-3" >...</div>
<div class="col-9">...< /div>
</div>
<div class="col-3" >...</div>
<div class="col-9">...< /div>
</div>
열의 행이 왼쪽으로 부동되고 일반 부동이 추가됩니다.
CSS:
.row:after {
content
인스턴스 실행»온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
content
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php 中文网</title>
<style>
* {
box-sizing: border-box;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</div>
</body>
</html> 인스턴스 실행»온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
