728x90
반응형
레이아웃 - grid 유형
grid layout은 비교적 직관적이어서 다른 레이아웃보다 사전지식이 덜 필요합니다. 일단 원하는 레이아웃을 먼저 스케치하고 그것을 위해 필요한 속성을 추가는 방식입니다.
이제 flex유형을 사용해서 예시를 만들어 보겠습니다.
1920px * 1080px의 사이즈에 1200px * 1080px 구역 레이아웃을 만들어 보겠습니다.
<!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>레이아웃 - grid 유형</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #E1F5FE;
}
#wrap {
width: 1200px;
margin: 0 auto;
display: grid;
grid-template-areas:
"header header"
"nav nav"
"aside article1"
"aside article2"
"aside article3"
"footer footer"
;
grid-template-columns: 300px 900px;
grid-template-rows: 100px 100px 260px 260px 260px 100px;
}
#header {
background-color: #B3E5FC;
grid-area: header;
}
#nav {
background-color: #81D4FA;
grid-area: nav;
}
#aside {
background-color: #4FC3F7;
grid-area: aside;
}
#article1 {
background-color: #29B6F6;
grid-area: article1;
}
#article2 {
background-color: #03A9F4;
grid-area: article2;
}
#article3 {
background-color: #039BE5;
grid-area: article3;
}
#footer {
background-color: #0288D1;
grid-area: footer;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<aside id="aside"></aside>
<article id="article1"></article>
<article id="article2"></article>
<article id="article3"></article>
<footer id="footer"></footer>
</div>
</body>
</html>작성 방법
- 전체 구역을 만들어주고 각 구역을 하나씩 만들어 줍니다.
- grid 유형은 각 구역마다 주어야하기 때문에 모든 구역을 나눕니다.
- 테이블(표)처럼 가로, 세로가 몇 칸인지 확인 후 구역을 나누어줍니다.
- header 구역, nav 구역, aisde 구역, article1 구역, article2 구역, article3 구역, footer 구역을 만들어줍니다.
- head 태그에 style 태그를 입력해줍니다.
- 구역을 초기화 시키기 위해 전체 구역 *{ }에 margin: 0;, padding: 0;을 줍니다.
- 해당하는 구역에 배경색, grid-area: ; 속성을 줄 수 있도록 태그를 만들어 줍니다.
- 각 영역에 알맞는 배경색, grid-area: ; 속성 안에 이름을 입력해줍니다.
- wrap 구역이 가운데 정령이 될 수 있도록 margin: 0 auto;를 입력해줍니다.
- wrap 구역에 grid 속성을 주기 위해 display: grid;를 입력해줍니다.
- 가로, 세로 몇 칸인지 확인 한 후 grid-template-areas: " "; 속성을 사용해서 grid-area: ; 속성 안에 준 이름을 사용해서 가로, 세로를 나열해줍니다.
- 다음 grid-template-colums: ; 속성과 grid-template-rows: ; 속성을 사용해서 가로와 세로의 크기를 입력해줍니다.
그러면 아래와 같은 레이아웃이 나옵니다!!!
참고
grid-template-columns 속성
- grid-template-columns 속성은 가로의 크기를 지정해주는 속성입니다.
grid-template-rows 속성
- grid-template-rows 속성은 세로의 크기를 지정해주는 속성입니다.
참고 홈페이지
https://dongjin6539.github.io/web2023/layout/index.html
728x90
반응형
