반응형
1. 그리드 레이아웃
- 반응형 웹 디자인에서 웹 문서 요소를 배치하는 기준
- 웹 사이트 화면을 여러 개의 컬럼으로 나눈 후 웹 요소를 배치
- 화면을 규칙적으로 배열하므로 레이아웃을 일관성 있게 유지할 수 있음
2. 그리드 레이아웃의 특징
- 시각적으로 안정된 디자인
- 업데이트가 편한 웹 디자인 구성
- 요소를 자유롭게 배치
3. 그리드 레이아웃을 만드는 방법
1) 플렉스 박스 레이아웃(플렉서블 박스 레이아웃)
- 수평 방향이나 수직 방향 중 하나를 주축으로 정하고 박스를 배치
- 여유 공간이 생길 경우 너비나 높이를 적절하게 늘리거나 줄일 수 있음
2) CSS 그리드 레이아웃
- 최근에 등장한 CSS표준
- 수평 방향이나 수직 방향 어디로든 배치 가능
- 마치 레고 블록을 끼워 맞추듯 요소를 배치할 수 있음
4. Flexbox 관련 사이트
http://flexboxfroggy.com/#ko
http://www.flexboxdefense.com
5. CSS Grid Layout Module Level 1
URL : w3.org/TR/css-grid-1
반응형
'개발 및 관리 > HTML, CSS, Javascript, DOM' 카테고리의 다른 글
HTML TABLE, IFRAME (0) | 2022.05.19 |
---|---|
HTML 기본 테그 (0) | 2022.05.19 |
뷰포트(viewport), 미디어 쿼리 (0) | 2022.04.02 |
CSS 고급선택자 - 화면 구성시 가장 참조가 될 듯 하다, 테스트파일 포함 (0) | 2022.04.02 |
이미지와 그라데이션 효과로 배경 꾸미기 (0) | 2022.04.02 |