CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나눌 때 사용한다. 사용방법이 간단하기도 하고 대부분의 주요 브라우저에서 지원하는 기술이기 때문에 웹프론트엔드 개발자라면 반드시 알아두는 것이 좋다.
그렇다면 이 그리드라는 기술은 어떻게 사용할까? 다음의 코드를 보자.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#grid{
border:5px solid pink;
display:grid;
grid-template-columns: 150px 1fr;
}
div{
border:5px solid gray;
}
</style>
</head>
<body>
<div id = "grid">
<div>NAVIGATION </div>
<div>ARTICLE</div>
</div>
</body>
</html>
body태그 안의 div에 주목하자. div태그는 아무것도 표현을 하지는 않지만 다른 요소 여럿을 묶어 다른 요소들과 구분하는 용도로 쓰인다. 레이아웃 하고 싶은 요소들의 가장 바깥쪽에 div태그로 감싸주고 id값을 주자. (자식 엘리먼트를 다루기 위해서 부모 엘리먼트로 감싸줌) 그렇게 하면 이제 안쪽에 있는 요소들을 레이아웃 할 수 있다. (안쪽의 요소들은 필요시 div태그로 레이아웃할 부분을 구분해주자!) 위의 코드에서는 아주 간단히 VEGETABLE과 CREAM 이 둘을 구분하여 레이아웃할 것이다.
<style>
#grid{
border:5px solid pink;
display:grid;
grid-template-columns: 150px 1fr;
}
div{
border:5px solid gray;
}
</style>
id값을 주고 display: grid; 를 써줌으로써 grid를 정의해준다. 그리고 나서 각각의 요소를 행(row)과 열(column)을 정의해줘야 한다. 여기서는 두개의 요소를 2개의 열로 정의하기 위해 grid-template-columns: 200px 1fr; 여기서 200px는 절대적인 크기표현, 1fr은 상대적인 크기표현이라고 보면된다. 예를 들어 1fr 2fr이라고 적는다면 1:2 비율로 레이아웃이 결정된다. 이제 결과를 확인해보자.
다음과 같이 깔끔하게 두 요소가 2개의 열(column)로 레이아웃되었다. 참고로 1fr은 상대적 크기표현이라 했는데 비교할 상대적 크기표현이 없으므로 웹사이트창을 확대하고 축소함에 따라 따라움직인다.
'WEB > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] #11.Media Query (반응형 웹디자인) (0) | 2021.12.10 |
|---|---|
| [HTML/CSS] #10.flexbox (0) | 2021.12.10 |
| [HTML/CSS] #8.박스 모델 (0) | 2021.12.05 |
| [HTML/CSS] #7.선택자 (tag, class, id) (0) | 2021.12.01 |
| [HTML/CSS] #6.CSS 기본 문법 (0) | 2021.11.30 |
