[CSS]css 레이아웃(4) - grid
HTML의 레이아웃 배치시 다음과 같은 상황에서 사용된다.
- 페이지를 여러 섹션으로 나눌 때
- 콘텐츠를 문서 계층 구조의 관점으로 정의할 때
글의 순서는 다음과 같다.
1. Grid 기본 사용법
1) columns 설정
2) rows 설정
+height: 100vh 설정
2. Grid 활용 예시
1) columns, rows 설정
2) 배치하기
- grid area 설정
- grid-template-areas 설정
1. Grid 기본 사용법
ex) <h1> 태그의 콘텐츠1과 <em> 태그의 콘텐츠2의 레이아웃을 배치하길 원할 경우
step1) grid를 사용할 콘텐츠들 <div> 태그로 묶어주기
<div>
<h1>contents1</h1>
<em>contents2</em>
</div>
※ <div>를 모른다면 아래 포스팅 참고
[CSS]css 태그 - div / span
두 태그는 HTML 레이아웃 배치에 사용되는 것으로 디자인적으로 컨텐츠를 묶어줄 때 사용되는 무색무취의 태그다. 차이점 는 block level element 은 inline level element 라는 점이다 ※ blck/inline을..
hyemco.tistory.com
step2) <div> 태그 id나 class 생성하고 display:grid; 입력
<style>
.grid{
display:grid;
}
</style>
<div class="grid">
<h1>contents1</h1>
<em>contents2</em>
</div>※ id, class 선택자를 모른다면 아래 포스팅 참고
[CSS]css 시작 - style 속성,<style> 태그 / 선택자
HTML이 웹페이지를 만들기 위한 가장 기본적 언어라면, CSS는 웹페이지를 시각적으로 아름답게 꾸미는 디자인에 관한 언어라고 볼 수 있다. HTML 내부에서 CSS효과는 1. style 속성 2. 안녕하세요 반갑
hyemco.tistory.com
1) columns 설정
다음과 같이 레이아웃을 배치하고자 할 때 grid-template-columns:비율;
<style>
.grid{
display:grid;
grid-template-columns:1fr 1fr 1fr;
}
</style>
<div class="grid">
<div>contents1</div>
<div>contents2</div>
<div>contents3</div>
</div>
※ 비율 설정
1fr 1fr 1fr - 1:1:1 비율
50px 2fr 1fr - 50px (전체-50px)2:1 비율
50px 1fr 50px - 50px :1(양쪽 100px 제외한 모두):50px 비율
2) rows 설정
다음과 같이 레이아웃을 배치하고자 할 때 grid-template-rows:비율;
<style>
.grid{
display:grid;
grid-template-rows:1fr 1fr 1fr;
}
</style>
<div class="grid">
<div>contents1</div>
<div>contents2</div>
<div>contents3</div> </div>
+ height:100vh;
grid-template-rows:비율; 설정하면 아래와 같다.
여기에 height:100vh; 를 추가하면, 아래와 같이 전체화면을 사용할 수 있다
<style>
.grid{
display: grid;
grid-template-rows:1fr 1fr 1fr;
height: 100vh;
}
</style>
스크롤바가 생기지 않게 하려면, <body>의 margin 값을 0으로 설정하면 된다.
<style>
body{
margin:0;
}
</style>
2. Grid 활용 예시
아래와 같이 레이아웃을 배치하고자 한다. (columns : 3 / rows : 4)
1) columns, rows 설정
grid-template-columns:50px 1fr 1fr;
grid-template-rows:20% 1fr 1fr 15%;
<style>
.grid{
display:grid;
grid-template-columns:50px 1fr 1fr;
grid-template-rows:20% 1fr 1fr 15%;
height:100vh;
}
</style>
<div class="grid">
<h6>TITLE</h6>
<div>SECTOR1</div>
<div>SECTOR2</div>
<div>SECTOR3</div>
<div>SECTOR4</div>
<div>SECTOR5</div>
<div>SECTOR6</div>
</div>
※ 비율 조정으로 다양한 레이아웃을 만들어 볼 수 있으니 직접 만들어보면서 각자 생각하는 레이아웃을 만들어보면 좋을 것 같다.
2) 배치하기
위에서 만들어둔 레이아웃에 아래와 같이 요소들을 배치해야한다.
- grid area 설정
각각의 콘텐츠에 class 생성하고 grid area를 설정해 준다.
.class 이름 {
grid area: 콘텐츠 이름
} .head{
grid-area: TITLE;
}
.item1{
grid-area: SECTOR1
}
.item2{
grid-area: SECTOR2;
}
.item3{
grid-area: SECTOR3;
}
.item4{
grid-area: SECTOR4;
}
.item5{
grid-area: SECTOR5;
}
.item6{
grid-area: SECTOR6;
}
- grid-template-areas 설정
위에서부터 차례대로 레이아웃마다 배치되어야 될 요소들의 이름을 입력해 준다. (빈 칸은 "." 혹은 "none을 입력한다.)
.grid{
grid-template-areas:
"TITLE TITLE TITLE"
"SECTOR1 SECTOR2 SECTOR2"
"SECTOR1 SECTOR3 ."
"SECTOR4 SECTOR5 SECTOR6";
}
※ 각 영역이 잘보이도록 본문에서 다루지 않은 코드(gap)가 쓰였다. (아래 전체 코드에서 확인 가능하다.)
마지막으로 덧붙이면, grid-template을 사용하면 한번에 rows, columns, areas 설정을 할 수있다.
그러나 편리하라고 만든 단축 속성임에도 불구하고 코드 가독성이 좋지않아 개인적으로는 이후 수정시에도 어려움이 따를 것 같다는 생각이 들어 설명을 하지 않았다.
(궁금한 분이 있다면 "grid-template 단축 속성"에 대해 검색하면 쉽게 찾을 수 있을 것이다.
전체 코드
<style>
.grid{
display:grid;
grid-template-columns:30% 1fr 1fr; /*열 설정*/
grid-template-rows:20% 1fr 1fr 15%; /*행 설정*/
height:100vh; /* 전체화면 설정*/
grid-template-areas:
"TITLE TITLE TITLE"
"SECTOR1 SECTOR2 SECTOR2"
"SECTOR1 SECTOR3 ."
"SECTOR4 SECTOR5 SECTOR6";
gap:10px; /*grid 영역 사이 간격*/
}
.head{
grid-area: TITLE;
}
.item1{
grid-area: SECTOR1
}
.item2{
grid-area: SECTOR2;
}
.item3{
grid-area: SECTOR3;
}
.item4{
grid-area: SECTOR4;
}
.item5{
grid-area: SECTOR5;
}
.item6{
grid-area: SECTOR6;
}
.contents{
border:5px solid red;
} /*시각적으로 잘 보이기 위해 빨간 테두리*/
body{
margin:0;
} /*전체화면 사용시 스크롤 없애기*/
</style>
<body>
<div class="grid">
<h1 class="contents head">TITLE</h1>
<div class="contents item1">SECTOR1</div>
<div class="contents item2">SECTOR2</div>
<div class="contents item3">SECTOR3</div>
<div class="contents item4">SECTOR4</div>
<div class="contents item5">SECTOR5</div>
<div class="contents item6">SECTOR6</div>
</div>
</body>