...
728x90
반응형
레이아웃 grid 유형으로 만들기
grid 방식으로 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>레이아웃21 - grid 유형</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #FFF3E0;
}
#wrap {
width: 1200px;
margin: 0 auto;
display: grid;
grid-template-areas:
"header header"
"nav nav"
"aside section"
"footer footer"
;
grid-template-columns: 400px 800px;
grid-template-rows: 100px 100px 780px 100px;
}
#header {
background-color: #FFE0B2;
grid-area: header;
}
#nav {
background-color: #FFCC80;
grid-area: nav;
}
#aside {
background-color: #FFB74D;
grid-area: aside;
}
#section {
background-color: #FFA726;
grid-area: section;
}
#footer {
background-color: #FF9800;
grid-area: footer;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<aside id="aside"></aside>
<section id="section"></section>
<footer id="footer"></footer>
</div>
</body>
</html>grid layout은 비교적 직관적이어서 다른 레이아웃보다 사전지식이 덜 필요합니다.
display : grid를 적용하여 만들고자 하는 레이아웃을 칸칸이 쪼개어 크기를 설정해주어 만들어주면 됩니다.
레이아웃 코드 해석하기
위의 레이아웃을 예로 들면 칸칸을 쪼개어 보았을 때, 세로로 4줄 가로로 2줄이 나오게 됩니다.
grid-template-area : header header // nav nav // aside section // footer footer (// 줄 바꿈)의 형식으로 나누어준 칸의 영역에 들어갈 요소를 선택해줍니다.
grid-template-columns : 400px 800px 두칸으로 설정해주고,
grid-template-rows : 100px 100px 780px 100px 네칸으로 설정해줍니다.
728x90
반응형