Grid

gird는 2차원(양방향) 레이아웃 메서드이다. row(행), column(열)을 사용하여 요소들을 배치하고 정렬한다.

하나의 그리드는 columns, rows 로 구성되며, 각 행과 열 사이에 공백이 있는데 이 공백을 gutters 라고 한다.

사용법

display: grid 속성을 적용하면 해당 요소는 gridbox가 된다.

속성

grid-template-columns

컬럼의 개수와 크기를 지정한다. 예) grid-template-columns: 300px 300px 300px;
한 줄에 300px 짜리 3개까지 그릴 수 있다. fr단위를 사용하게 되면 공간을 균등하게 분배한다.
예) grid-template-columns: 1fr 1fr 1fr; (=== repeat(3, 1fr))
그리드 박스 의 크기를 3등분 하여 33%씩 크기를 갖는다.

grid-gap

gutters의 크기를 지정한다. 브라우저에 따라 접두사(-)지원이 달라 gap와 grid-gap 둘 다 적용하는게 좋다.

grid-auto-rows

자식 요소들의 높이를 지정할 수 있다.

minmax() 함수를 사용하여 트랙의 최소 및 최대 크기를 설정할 수 있다. 예) minmax(100px, auto) 최소 크기는 100px 이고 최대 크기는 auto로 콘텐츠에 들어맞게 확장된다.

라인 기반 배치

grid-column-start, grid-column-end, grid-row-start, grid-row-end 이러한 속성으로 시작 라인과 끝 라인을 지정하여 사물을 배치할 수 있다.

약칭 속성

• grid-column
• grid-row

시작 라인과 끝 라인을 한 번에 지정할 수 있으며 슬래시(/)로 구분한다.

사용 예시

header {
  grid-column: 1 / 3;
  grid-row: 1;
}

article {
  grid-column: 2;
  grid-row: 2;
}

aside {
  grid-column: 1;
  grid-row: 2;
}

footer {
  grid-column: 1 / 3;
  grid-row: 3;
}

코드들을 적용하면 위 사진처럼 배치가 되는데 전체를 감싼 태그의 속성으로 display: grid; grid-template-columns: 1fr 3fr; 로 지정이 되어있다.

그래서 가로 3등분 상태이고 header에 column을 1 / 3 → 1부터 3 까지니까 가로 전체를 차지한다 row는 1 로 주어 1번째 줄에 배치한다.

aside와 article은 2번쨰 줄에 위치하게 row를 2 로 주었고 aside같은 경우는 가로 3등분 중 1번째에 위치하게 하기위해 1로 지정, article은 2번째에 지정하기위해 2로 주었고 현재 페이지에선 2/3 과 같은 효과를 볼 수 있다.

footer설명은 같으므로 생략

float

float은 한 요소가 보통 흐름으로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치 되어야함을 지정합니다. → 즉, float을 적용한 요소의 부모 요소 박스 모델 크기에서 좌, 우로 배치됨

float 속성을 적용하게되면 inline, inline-block, table-row, ..등 대부분의 지정값들이 display: block 속성으로 바뀌어 적용된다.

공식

자손에 float 속성을 적용하면 부모의 overflow 속성에 hidden 키워드를 적용한다.

중요한점

float을 적용한 부모의 height값은 0 이다.

float 으로 인해 레이아웃이 일그러질때 , 태그 하나를 추가하고 태그 속성으로 clear: both 를 사용한다.

속성

left

요소가 자신을 포함하는 블록의 좌측에 배치한다. (부모 요소에서 좌측)

right

요소가 자신을 포함하는 블록의 우측에 배치한다. (부모 요소에서 우측)

none

요소가 부동하지 않아야함을 나타낸다.

inline-start

요소가 자신의 포함 블록의 시작쪽에 부동해야 함을 나타낸다. 즉, ltr(left to right) 스크립트 상에서 왼쪽 그리고 rtl(right to left) 스크립트 상에서는 오른쪽.

inline-end

요소가 자신의 포함 블록의 끝쪽에 부동해야 함을 나타낸다. 즉, ltr 스크립트 상에서 오른쪽 그리고 rtl 스크립트 상에서는 왼쪽.