QUOTE THE DAY
“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
-
이글슨 (Eagleson)
반응형
grid layout
그리드는 그리드를 선언하는 요소와 하위의 자식 요소들로 구성됩니다.
그리드를 구성하는 자식요소들을 "아이템" 이라고 하며, 자식 요소들의 태그 종류에 관계 없이, 그리드 바로 하위의 자식요소들만 아이템이 됩니다.
그리드 선언은 css 속성으로 아래와 같이 시작합니다.
display : grid;
그리드 속성 선언 만으로는 자식 아이템들에 아무런 영향을 미치지 않습니다.
추가 그리드 속성이 정의되지 않으면 "display: grid;" 는 "display: block;" 과 같습니다.
레이아웃 grid 유형 (예제)
<!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>레이아웃1 - grid</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #FFF3E0;
}
#wrap {
width: 1200px;
margin: 0 auto;
display: grid;
grid-template-areas:
"header header"
"nav nav"
"aside section"
"footer footer"
;
grid-template-columns: 400px 800px;
grid-template-rows: 100px 100px 780px 100px;
}
#header {
background-color: #FFE0B2;
grid-area: header;
}
#nav {
background-color: #FFCC80;
grid-area: nav;
}
#aside {
background-color: #FFB74D;
grid-area: aside;
}
#section {
background-color: #FFA726;
grid-area: section;
}
#footer {
background-color: #FF9800;
grid-area: footer;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<aside id="aside"></aside>
<section id="section"></section>
<footer id="footer"></footer>
</div>
</body>
</html>
결과
grid와 flex의 차이점
flex box는 한 줄로 된 행 혹은 열 방향의 레이아웃과 같이 일차원의 레이아웃을 염두에 두고 설계되었지만,
grid는 행과 열 모두를 염두에 둔 2차원적 레이아웃을 고려해서 설계되었습니다.
grid와 flex 선택을 고민할 때 다음 사항 체크!
- 레이아웃을 조정할 때 오직 가로 행 혹은 열 만이 고려 대상이라면 flex 사용
- 레이아웃을 조정할 때 가로 행과 세로 열 모두 염두에 두어야 한다면 grid 사용
- 콘텐츠가 중심이면 flex box, 레이아웃이 중심이면 grid 사용
반응형
