그리드 레이아웃이란?
• 반응형 웹 디자인에서 웹 문서 요소를 배치하는 기준
• 웹 사이트 화면을 여러 개의 칼럼(column)으로 나눈 후 웹 요소를 배치
• 화면을 규칙적으로 배열하므로 레이아웃을 일관성 있게 유지할 수 있음
그리드 레이아웃의 특징
• 시각적으로 안정된 디자인
• 업데이트가 편한 웹 디자인 구성
• 요소를 자유롭게 배치
그리드 레이아웃을 만드는 방법
1) 플렉스 박스 레이아웃(플렉서블 박스 레이아웃)
• 수평 방향이나 수직 방향 중 하나를 주축으로 정하고 박스를 배치
• 여유 공간이 생길 경우 너비나 높이를 적절하게 늘리거나 줄일 수 있음
2) CSS 그리드 레이아웃
• 최근에 등장한 CSS 표준
• 수평 방향이나 수직 방향 어디로든 배치 가능
• 마치 레고 블록을 끼워 맞추듯 요소를 배치할 수 있음
플렉스 박스 레이아웃(flex box layout)
• 그리드 레이아웃을 기본으로, 플렉스 박스를 원하는 위치에 배치하는 것.
• 여유 공간에 따라 너비나 높이, 위치를 자유롭게 변형할 수 있음
플렉서블 박스 레이아웃 기본 속성
display 속성
배치 요소들을 감싸는 부모 요소를 플렉스 컨테이너로 지정
flex-direction 속성
플렉스 항목의 배치를 위해 주축과 방향 지정
flex-wrap 속성
• 플렉스 항목을 한 줄 또는 여러 줄로 배치
flex-flow 속성
• 플렉스 배치 방향과 여러 줄 배치를 한꺼번에 지정
• 기본 값은 flex-flow:row no-wrap
플렉스 항목 배치를 위한 속성
justify-content 속성
• 플렉스 항목을 주축 방향으로 배치할 때의 배치 기준
aling-items 속성, align - self 속성
• 교차축을 기준으로 하는 배치 방법 조절
• 교차축에서 특정 항목만 지정하고 싶다면 align-self(해당 항목 자체에 적용) 속성 사용
align-content 속성
• 플렉스 항목이 여러 줄로 표시될 때
• 교차 축 기준의 배치 방법 지정
CSS 그리드 레이아웃
• 플렉스 박스 레이아웃은 주축/교차축 개념이 있지만 CSS 그리드 레이아웃은 양쪽 방향 모두 사용
(플렉스 그리드 레이아웃은 1차원, CSS 그리드 레이아웃은 2차원이라고도 함)
• 줄(row)과 칼럼(column)으로 화면을 구성하고, 줄 사이의 여백, 칼럼 사이의 여백을 조절
CSS 그리드 레이아웃 항목을 배치하는 속성
display 속성
• 배치 요소들을 감싸는 부모 요소를 그리드 컨테이너로 지정
grid-template-columns, grid-template-rows 속성
칼럼/줄의 크기와 개수 지정
• grid-template-columns : 그리드 컨테이너 안의 칼럼 개수와 너빗값
• grid-template-rows: 그리드 컨테이너 안의 줄 개수와 너빗값
상대적인 크기를 지정하는 fr 단위
• 칼럼/줄의 크기를 지정할 때 px 단위는 반응형 웹 디자인에
• 적합하지 않음 -> 상대적인 크기를 지정하는 fr(fraction) 단위사용
값이 반복된다면 repeat() 함수
• 똑같은 값을 여러 번 반복한다면 내장 함수 repeat( ) 함수 사용
자동으로 칼럼 개수를 조절하는 auto-fill, auto-fit
• 칼럼 너비와 함께 auto-fit이나 auto-fill을 지정하면 화면 너비에 따라 칼럼 개수를 조절할 수 있음
• auto-fit : 남는 공간 없이 꽉 채우기
• auto-fill : 칼럼의 최소 너비까지만 표시하고 남는 공간은 그대로 둠
그리드 라인을 사용해 배치하기
• CSS 그리드 레이아웃에는 눈에 보이지 않는 그리드 라인이 포함되어 있음
• 그리드 라인을 사용해 그리드 항목을 배치할 수 있음
'HTML／CSS' 카테고리의 다른 글
| HTML / CSS 반응형 웹과 미디어 쿼리 (0) | 2021.06.17 |
|---|
