웹 프로그래밍/HTML+CSS
가변 그리드 레이아웃
0_TLS
2024. 11. 16. 15:27
웹 사이트의 레이아웃을 정할 때 자주 사용하는 기준 = '그리드 시스템'
그리드 시스템: 화면을 몇개의 칼럼으로 나누어 요소들을 배치하는 것
그리드 시스템은 화면 너비를 특정 값으로 고정해놓고 그 안에 표시할 요소들의 너비 값을 지정하면 너비가 항상 일정하게 표시되기 때문에 원하는 레이아웃을 쉽게 만들 수 있다.
= pc용 사이트만 만들때는 이 방법이 편리
반면
어떤 기기에서도 동일한 레이아웃을 가지면서 기기의 특성에 맞게 웹 문서가 표현되려면 문서 안의 각 요소의 너비를 픽셀과 같은 고정 값이 아니라 백분율과 같은 가변 값으로 지정하면 됨.
-> 가변 그리드 레이아웃
<variable-grid_layout.html>
<!DOCTYPE html>
<html lang = 'ko'>
<head>
<meta charset="utf-8">
<title>애완견 돌보기</title>
<style>
#wrapper{
width: 96%;
margin: 0 auto;
}
header{
background-color: #069;
padding: 10px;
overflow: hidden;
}
header h1{
width: 40%;
float: left;
font-size: 2.5em;
font-family: "돋움", "굴림";
color: #fff;
}
header nav{
width: 60%;
float: right;
}
nav ul{
list-style-type: none;
margin-top: 30px;
}
nav ul li{
display: inline;
padding-top: 10px;
margin-right: 20px;
}
nav ul li a, nav ul li a:visited{
font-family: "돋움", "굴림";
font-size: 1em;
color: white;
text-decoration: none;
}
section{
border: 5px solid #333;
overflow: hidden;
}
article{
width: 29.17%;
height: auto;
float: left;
margin-right: 1.5625%;
margin-bottom: 20px;
margin-top: 20px;
padding: 0.5%;
border: 1px dotted #333;
border-radius: 10px;
}
article:first-child{
margin-left: 2.083%;
}
article h3{
background: url(images/note.png) no-repeat left center;
padding-left: 30px;
}
dl{
margin: 10px;
}
dt{
font-weight: bold;
}
aside{
clear: both;
width: 93.75%;
margin: 10px auto;
padding: 10px;
background-color: #99cc33;
}
footer{
padding: 10px;
background-color: #333;
color: white;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>애완견 종류</h1>
<nav>
<ul>
<li><a href = "#">애완견 종류</a></li>
<li><a href = "#">입양하기</a></li>
<li><a href = "#">건강돌보기</a></li>
<li><a href = "#">더불어살기</a></li>
</ul>
</nav>
</header>
<article>
<section>
<h3>활달한 강아지</h3>
<dl>
<dt>요크셔 테리어</dt>
<dd>생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나 집에 들어온 침입자를 어쩌구저쩌구</dd>
<dt>말티즈</dt>
<dd>애정이 많고 활발한 성격을 어쩌구 저쩌구</dd>
<dt>폭스테리어</dt>
<dd>가정에서 키우기에 적합한 품종이다. 보호본능이 강하고 정이 많다. 하지만 사냥을 하면 어쩌구 저쩌구</dd>
</dl>
</section>
</article>
<article>
<section>
<h3>온순한 강아지</h3>
<dl>
<dt>요크셔 테리어</dt>
<dd>생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나 집에 들어온 침입자를 어쩌구저쩌구</dd>
<dt>말티즈</dt>
<dd>애정이 많고 활발한 성격을 어쩌구 저쩌구</dd>
<dt>폭스테리어</dt>
<dd>가정에서 키우기에 적합한 품종이다. 보호본능이 강하고 정이 많다. 하지만 사냥을 하면 어쩌구 저쩌구</dd>
</dl>
</section>
</article>
<article>
<section>
<h3>사납지만 복종적인 강아지</h3>
<dl>
<dt>미니어쳐핀셔</dt>
<dd>생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나 집에 들어온 침입자를 어쩌구저쩌구</dd>
<dt>말티즈</dt>
<dd>애정이 많고 활발한 성격을 어쩌구 저쩌구</dd>
<dt>폭스테리어</dt>
<dd>가정에서 키우기에 적합한 품종이다. 보호본능이 강하고 정이 많다. 하지만 사냥을 하면 어쩌구 저쩌구</dd>
</dl>
</section>
</article>
<aside>
<h3>건강한 강아지는</h3>
<ul>
<li>코가 젖어있고 눈꼽이 없어야합니다.</li>
<li>털에 윤기가 있는 것을 골라야 합니다.</li>
<li>입에서 고약한 냄새가 나면 병이 있다는 증거입니다.</li>
<li>가장 활발하게 움직이는 녀석을 고르는게 좋습니다.</li>
</ul>
</aside>
<footer>
<p>Copyright 2012 funnycom</p>
</footer>
</body>