(12-3) 그리드 레이아웃 익히기

(12-3) 그리드 레이아웃 익히기

*웹 문서는 화면 너비에 따라 재정렬해야 함 -> 재정렬의 기본이 되는 레이아웃을 그리드 레이아웃이라고 함

∴ 그리드 레이아웃: 웹 사이트를 여러 열로 분할하고 메뉴/텍스트/이미지와 같은 웹 요소를 화면에 맞게 정렬

1. 그리드 레이아웃의 3가지 특징

'추천 관련글,

① 시각적으로 안정적인 디자인 만들기

② 업데이트가 용이한 웹 디자인 구성 가능 (페이지 구조 먼저 생성 -> 나중에 내용 입력 가능)

③ 요소를 자유롭게 배치할 수 있습니다(일반적으로 다음과 같은 블록 수준 요소

또는

한 줄에 하나의 요소만 배치할 수 있습니다. 단, 여러 항목을 그리드 레이아웃으로 한 줄에 배치할 수 있음)

2. 그리드 레이아웃 생성 방법

유연한 상자 레이아웃
(플렉스박스 레이아웃)

-그리드 레이아웃 기반
– 원하는 위치에 따라 각 상자를 배치
-여유 공간이 있으면 그에 따라 너비와 높이를 늘리거나 줄입니다.

– 가로 또는 세로 방향 중 하나를 주축으로 하여 박스 배치

CSS 그리드 레이아웃

– 이것은 새로운 CSS 표준입니다.

– 가로 또는 세로 방향으로 배치 가능(레고 브릭을 조립한 것처럼 요소 배치)

(12-4) flexbox 레이아웃 알기

1. flexbox 요소의 위치에 대한 속성

2. 속성 표시

-플렉스 컨테이너 지정(상위 상자)

3. Flex Direction 속성

– 플렉스 컨테이너에 플렉스 항목을 배치할 주축과 방향을 지정합니다.

4. Flex Wrap 속성

– 플렉스 컨테이너의 총 너비보다 플렉스 항목이 더 많은 경우 -> 줄 바꿈 여부를 지정합니다.

5. Flex Flow 속성

– 플렉스 방향과 플렉스 랩 속성을 함께 지정 -> 플렉스 요소의 래핑 방향을 결정하거나 래핑

-기본값: 행 랩핑

6. 콘텐츠 속성 정당화

– 주축의 플렉스 요소 간 정렬 방법 지정

7. align-items 속성(한 줄에)

-justify-content는 주요 축에 항목을 정렬하고 align-items는 측면 축에 플렉스 항목을 정렬합니다.

8. 자신을 정렬

– 특정 요소만 다르게 디자인하고 싶은 경우

-align-items는 플렉스 컨테이너를 지정하는 선택기에 지정되고 align-self는 플렉스 항목을 지정하는 선택기에 지정됩니다.

9. 콘텐츠 속성 정렬

– 여러 줄인 경우

– 교차 축 정렬

-align-items는 단일 행에 대한 교차축 정렬이고 align-content는 여러 행에 대한 교차축 정렬입니다.