[Day 21] CSS - 그리드 레이아웃, 플렉스 박스 레이아웃, CSS 그리드 레이아웃

?그리드 레이아웃?

: 웹사이트를 여러 개의 칼럼(column)으로 나눈 후 웹 요소를 화면에 맞게 배치하는 것 그리드 레이아웃 특징 - 시각적으로 안정된 디자인 만들기 가능 - 업데이트 쉬움 - 여러 요소 자유롭게 배치 가능 그리드 레이아웃을 만드는 방법 1) 플렉서블 박스 레이아웃(flexible box layout) : 그리드 레이아웃을 기본으로 하며 각 박스를 원하는 위치에 배치. - 플렉스 박스 레이아웃이라고도 함. 2) CSS 그리드 레이아웃(CSS grid layout) : 가로 방향의 줄(row)과 세로 방향의 칼럼(column)으로 화면 구성. - 끼워맞추듯 요소 배치 1. 플렉스 박스 레이아웃 플렉스 박스 레이아웃 용어 - 플렉스 컨테이너(부모 박스)(제일 큰 박스, 작은 박스들을 묶는 박스라 생각히면 편함) - 플렉스 항목(자식 박스)(작은 박스들이라고 생각하면 편함) - 주축(main axis)(가로축이라고 보면 편함) - 교차축(cross axis)(세로축이라...

요청 처리 중입니다...

[Day 21] CSS - 그리드 레이아웃, 플렉스 박스 레이아웃, CSS 그리드 레이아웃

등록된 다른 글