Grid란?
Grid는 웹페이지의 구역을 나눌 때 사용하는 최신 기술입니다.
div vs span
div와 span은 어떠한 의미도 갖고 있지 않은 태그로 개발자는 이 태그들을 사용해 관련 있는 정보를 하나로 묶어 구역을 형성할 수 있습니다. 블록 레벨로 묶고 싶을 경우는 div를 인라인 레벨로 묶고 싶을 경우는 span을 사용하시면 됩니다. div와 span은 grid를 사용할 때 자주 사용하는 태그이니 꼭 기억해주시길 바랍니다.
Grid 사용하기
Grid를 사용하기 위해서는 두가지 행위를 해야합니다. 먼저, 태그들을 감싸는 태그를 추가하고 이 태그의 display 속성의 값을 grid로 설정해야합니다. 그리고 grid-template-columns와 grid-template-rows 속성을 추가해야합니다. 이때, grid-template-columns는 열의 개수를 grid-template-rows는 행의 개수를 지정합니다. grid-template-columns와 grid-template-rows의 값으로는 크기를 지정합니다. 화면의 크기와 상관없이 고정된 값을 원할 경우 px을 화면의 크기에 따라 변하는 값을 원할 경우 fr을 사용하시면 됩니다.
grid의 크기까지 설정을 마치셨다면 이제 display가 grid로 설정된 태그 내부에 태그들을 삽입해 사용하시면 됩니다.
아래의 코드에서 example은 ex1, ex2, ex3를 감싸는 태그이기 때문에 display의 값이 grid입니다. 그리고 3개의 태그가 존재하기 때문에 grid-template-columns 속성에 3개의 크기 값을 지정했습니다. ex1, ex2, ex3 중 ex2는 ex2-1과 ex2-2를 감싸는 태그이기도 합니다. 따라서, ex2의 display도 grid로 설정하였고 ex2-1, ex2-2 두 개의 태그가 존재하기 때문에 grid-template-rows 속성에 2개의 크기 값을 지정했습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#example{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
}
#ex2{
display:grid;
grid-template-rows: 2fr 1fr;
</style>
</head>
<body>
<div id="example">
<span id="ex1"></span>
<span id="ex2">
<div id="ex2-1"></div>
<div id="ex2-2"></div>
</span>
<span id="ex3"></span>
</div>
</body>
</html>
Grid 예제
Header과 Menu가 있는 부분을 제외하고 아래의 사진과 같이 4개의 구역으로 나누어보겠습니다.
편의상 구역 2-1과 구역 2-2를 묶어 구역 2로 생각하겠습니다. 먼저, 구역들을 감싸는 역할을 할 태그가 필요합니다. 태그를 새로 만들고 그 태그의 display 속성 값을 grid로 지정해주세요. 구역1, 구역2, 구역3 총 3개의 구역으로 나누어져있습니다. 그러므로 grid-template-columns의 값에 3개의 크기값을 지정해주세요. 이후, html코드로 display가 grid인 태그 내부에 3개의 태그를 새로 입력해주시면 됩니다. 구역 2를 구역2-1과 구역2-2로 나눌 때도 grid-template-columns 대신 grid-template-rows를 사용한다는 점을 제외하고는 동일하게 진행하시면 됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#header{
font-size:30px;
text-align:center;
}
ul{
display:table;
text-align:center;
background-color:lightblue;
width:100%;
margin-bottom:0px;
}
li{
display:inline;
margin-right:30px;
}
#article{
display:grid;
height:300px;
grid-template-columns:1fr 1fr 1fr;
}
#art1{
background-color:ivory;
text-align:center;
}
#art2{
text-align:center;
display:grid;
grid-template-rows:2fr 1fr;
}
#art2-2{
background-color:ivory;
}
#art3{
background-color:ivory;
text-align:center;
}
</style>
</head>
<body>
<div id="header">
Header
</div>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
</ul>
<div id="article">
<span id="art1">구역 1</span>
<span id="art2">
<div id="art2-1">구역 2-1</div>
<div id="art2-2">구역 2-2</div>
</span>
<span id="art3">구역 3</span>
</div>
</body>
</html>
'Programming > HTML5 & CSS3' 카테고리의 다른 글
| [CSS] 미디어쿼리 사용하는 법 (0) | 2021.02.04 |
|---|---|
| [CSS] 배치 형태 - position (0) | 2021.01.31 |
| [CSS] 배치 형태 - display (0) | 2021.01.30 |
| [CSS] 다단 만드는 법 (0) | 2021.01.29 |
| [CSS] 글자 스타일 (0) | 2021.01.28 |
