whatisthis?
CSS 그리드( grid ) 실습 예제 본문
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#grid{
border:5px solid pink;
display:grid;
grid-template-columns: 2fr 1fr;
}
div{
border:5px solid gray;
}
</style>
</head>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>
</html>
CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나,
크기와 위치 및 문서 계층 구조의 관점에서
HTML 기본 요소로 작성된 CONTROL 간의 관계를 정의하는 데 아주 탁월하다.
테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있다.
하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있다.
예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼,
실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있다.
GRID 에서는 테이블이라 생각했을때, 가로 값이 column(열), 세로값이 row(행) 이 된다.
즉, grid-template-columns에서는 열의 값을 설정해 주는 것이다,
행은 ㅡ (가로로) / 열은 세로로 읽음
ㅡ 1행 ㅣ ㅣ ㅣ
ㅡ 2행 A열 B열 C열
ㅡ 3행
따라서, 한 행은 가로로 되어있으므로 column값은 가로 길이가 된다.
반대로, row는 세로로 되어있으므로 한 row의 값은 세로 길이가 된다,
이는 table에서 width(너비, 즉 가로) / height(높이, 즉 세로)를 설정해 주는 것과 같다.
| <div class="wrapper"> <div class="one">One</div> <div class="two">Two</div> <div class="three">Three</div> <div class="four">Four</div> <div class="five">Five</div> <div class="six">Six</div> </div> |
grid를 사용할 떄는 부모요소 div와 자식요소 div들이 필요하다,이때 자식요소들을 감싸는 wrapper역할을 하는 div에 display: grid를 적용해준다.
grid-template-columns
grid-gap
grid-auto-rows 등 다양한 속성을 적용할 수 있다.
이때 사용하는 단위인 fr단위에 대해서 알아보자.
만약, grid-template-columns: 1fr 1fr로 적용하였다면?
두 자식요소인 div는 1:1 비율로 화면에 꽉 차도록 되어있을 것이다.
추가로, 예제에서와 같이 grid-template-columns: 2fr 1fr 로 적용했다면
2:1 비율로 (그러나 화면에 꽉 차게 맞춤으로) 되어있을 것이다.
| <div class="wrapper"> <div class="one">One</div> <div class="two">Two</div> <div class="three">Three</div> <div class="four">Four</div> <div class="five">Five</div> <div class="six">Six</div> </div> |
위에서 언급한 예시에서는, 자식 요소 div가 무려 6개나 있다.
이때, columns(열)을 3개로 하고 싶다면,
다음과 같이 설정하면 된다.
grid-template-columns: 1fr 1fr 1fr (1:1:1비율로 설정됨)
이를 조금 간략하게 작성해보면
grid-template-columns: repeat(3, 1fr); 이 된다.
+) GRID 활용 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#wrapper{
border:5px solid blue;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.one{
border:5px solid gray;
grid-column: 1 / 3;
grid-row: 1;
}
.two{
border:5px solid gray;
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.three{
border:5px solid gray;
grid-column: 1;
grid-row: 2 / 5;
}
.four{
border:5px solid gray;
grid-column: 3;
grid-row: 3;
}
.five{
border:5px solid gray;
grid-column: 2;
grid-row: 4;
}
.six{
border:5px solid gray;
grid-column: 3;
grid-row: 4;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
</body>
</html>
'WEB STUDY > HTML,CSS' 카테고리의 다른 글
| CSS float 속성 (0) | 2021.09.03 |
|---|---|
| CSS 미디어쿼리 (media Query) 실습 예제 (0) | 2021.09.01 |
| CSS의 단위 - 절대단위 / 상대단위 (0) | 2021.08.27 |
| CSS - link href를 이용해야하는 이유 <캐싱> (0) | 2021.08.24 |
| 생활코딩 WEB2 - css 편 (3/3) (0) | 2021.08.23 |
