그리드 레이아웃(grid layout)이란, 웹 사이트를 여러 개의 컬럼(column)으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것
플렉스 박스 레이아웃에서 사용하는 용어
① 플렉스 컨테이너(부모박스) : 플렉스 박스 레이아웃을 적용할 대상을 묶는 요소
② 플렉스 항목(자식박스) : 플렉스 박스 레이아웃을 적용할 대상. 그림에서 1~6까지 작은 박스들이 모드 해당함.
③ 주축(main axis) : 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향. 기본적으로 왼쪽에서 오른쪽이며, 수평 방향으로 배치함.
④ 교차축(cross axis) : 주축과 교차하는 방향을 말하며 기본적으로 위에서 아래로 배치함.
플렉스 박스 항목을 배치하는 속성
① 플렉스 컨테이너를 지정하는 display 속성
플렉스 박스 레이아웃을 만들려면, 먼저 웹 콘텐츠를 플렉스 컨테이너로 묶어주어야 함. 이 때 특정 요소가 플렉스 컨테이너로 동작하려면 display속성을 이용해 이 부분에 플렉스 박스 레이아웃을 적용하겠다고 지정해야 함.
② 플렉스 방향을 지정하는 flex-direction 속성
③ 플렉스 항목의 줄을 바꾸는 flex-wrap 속성
④ 배치 방향과 줄 바꿈을 한꺼번에 지정하는 flex-flow 속성
...생략...
<style>
#opt1 { flex-flow: row wrap; } /*왼쪽에서 오른쪽, 여러 줄*/
#opt2 { flex-flow: row nowrap; } /*왼쪽에서 오른쪽, 한 줄*/ ⑤ 주축 정렬 방법을 지정하는 justify-content 속성
⑥ 교차축 정렬 방법을 지정하는 align-items 속성
⑦ 특정 항목만 정렬 방법을 지정하는 align-self 속성
...생략...
<style>
.container {
display: flex; /*플렉스 컨테이너 지정*/
align-items: center; /*교차축의 중앙에 배치*/
}
#box1 { align-self: flex-start; }
#box3 { align-self: stretch; }
...생략...
<div class="container">
<div class="box" id="box1"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box" id="box3"><p>3</p></div>
<div class="box"><p>4</p></div>⑧ 여러 줄일 때 교차축 정렬 방법을 지정하는 align-content 속성
...생략...
<style>
.container {
float:left;
width:200px;
height:150px;
display:flex; /* 플렉스 컨테이너 지정 */
flex-flow: row wrap; /* 왼쪽에서 오른쪽, 여러 줄 표시 */
border:1px solid #222;
background-color:#eee;
margin:30px;
}
...생략...
#opt1{ align-content: flex-start; } /* 교차축 시작점 기준 */
#opt2{ align-content: flex-end; } /* 교차축 끝점 기준 */
#opt3{ align-content: center; } /* 교차축 중앙 기준 */
#opt4{ align-content: space-between; } /* 시작점과 끝점 배치 후 중간 항목은 같은 간격으로 배치 */
#opt5{align-content: space-around; } /* 전체 항목을 같은 간격으로 배치 */
#opt6{ align-content: stretch; /* 항목을 늘려 교차축에 가득 차게 배치 */
⑨ 플렉스 레이아웃을 활용해 항상 중앙에 표시하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>세로로 중앙에 배치하기</title>
<style>
* {
margin:0;
box-sizing: border-box;
}
body {
background:url('../12/images/bg5.jpg') no-repeat left top fixed;
background-size:cover;
display: flex;
justify-content: center;
align-items: center;
min-height:100vh;
}
button {
background-color:#ccc;
font-size: 1.2em;
padding:1em 2em;
border:none;
border-radius:5px;
box-shadow:1px 1px 2px #fff;
}
</style>
</head>
<body>
<button>클릭!</button>
</body>
</html>
