개인 노트 정리) 마크업14 - 코드는 짧고 사연은 길다

The RED 견고한 UI 설계를 위한 마크업
Part 2. CSS
08. 코드는 짧고 사연은 길다

 

# 코드는 짧고 사연은 길다

- 격자를 이용하여 내용의 크기와 위치를 제어하는 방법.

- 특히 셀 병합 기능을 제공.

- 다른 수단에 비해 짧은 코드로 자유도 높은 배치를 구현.

## 실무에서 사용하는 속성

- 다양한 속성들이 있지만 실제로 실무에서 자주 사용하는 속성은 컨테이너에 적용하는 grid와 item에 적용하는 grid-area 라는 속성이 있다.

- 단축속성으로 사용하는 것이 간결하고, 보기도 좋다.

- grid : 트랙의 수와 크기, 컨테이너에 적용.

- grid-area : 아이템의 배치와 병합, 아이템에 적용.

## Grid 용어

- grid container (그리드 컨테이너)
- grid item (그리드 아이템)
- grid line (그리드 라인)
- grid track (그리드 트랙)
- grid cell (그리드 셀), grid area (그리드 영역)
- gap (갭)

## 명시적 그리드와 암시적 그리드

- 명시적 그리드 : 트랙의 크기와 수량을 분명하게 선언. grid-template-rows/columns/areas

- 암시적 그리드 : 명시적 그리드 외부에 배치되어 흐름 방향과 크기를 결정. grid-auto-flow/rows/columns

- gap : 다중 컬럼, 플렉스, 그리드 아이템 사이의 간격.

## grid container 역할

- 트랙의 수량과 크기를 명시. (grid-template-*)

- 아이템 배치 방향. (grid-auto-flow)

- 암시적 트랙 크기. (grid-auto-*)

## grid item 역할

- 아이템의 배치와 병합, 배치 순서. (grid-row-start/-column-start/-row-end/-column-end, grid-area)

## grid container 생성

- display: grid | inline-grid

- 그리드 컨테이너/아이템에 선언하지 않은 모든 grid-* 속성은 초기값으로 설정된다.

- grid 속성으로 컨테이너의 트랙(행/열) 수와 크기를 설정하고 grid-area 속성으로 아이템의 배치와 병합을 설정하기 전까지는 그리드 컨테이너를 생성한 것 만으로 특별한 효용이 없다.

## grid track 생성 (균등)

- grid: <'grid-template-rows'> / <'grid-template-columns'>

- display: grid를 생성한 것만으로는 아무 효과도 없기 때문에 grid 속성을 이용하여 컬럼을 생성.

- 3열의 익명 트랙 단축 문법.

- 셀 크기는 내용에 따라 자동.

.container {
    display: grid;
    grid: '. . .'; /* 익명의 컬럼 3개가 생성 */
}

- 컬럼 트랙을 정확하게 설정하지 않는 방법이기 때문에 실무에서 자주 사용하지 않는다.

## grid track 생성(제어) 실무 사용 확률 99%

.container {
    display: grid;
    grid: 80px 1fr / 120px 1fr; /* <'grid-template-rows'> / <'grid-template-columns'> */
}

- 2열 2행 트랙 단축 문법

- 트랙의 크기와 수량을 명시적으로 제어.

- 실무에서 가장 빈번하게 사용하는 패턴.

- 명시적으로 선언하지 않는 나머지 트랙은 자동.

- fr은 fraction(분수, 분할)의 약자.
- 첫번째 행의 높이가 80px가 적용되고, 나머지행은 1fr 즉, 자동으로 결정되는 높이값. / 첫번째 열의 폭은 120px으로 결정이 되고, 나머지는 1fr로 결정이 된다.

## grid track 생성(반복)

.container {
    display: grid;
    grid: auto / 40px 1fr 2fr 1fr 2fr;
    grid: auto / 40px repeat(2, 1fr 2fr);
}

- auto 값으로 트랙의 크기 임의 지정 가능.

- repeat() 함수로 크기 값을 반복할 수 있다.

- 함수의 첫 번째 인자는 트랙의 수량, 두 번째 인자는 트랙의 크기.

- repeat(<integer [1, 무한]>, <track-list>) // 반복할 횟수, 반복 패턴

- 트랙의 크기가 한정된 경우에 repeat 함수를 사용할 수 있다.

## grid track 생성(방향)

.container {
    display: grid;
    grid: 1fr 2fr / auto-flow; /* column방향으로 컬럼이 진행이 된다. */
    grid: auto-flow / 1fr 2fr; /* 행으로 배치가 된다. */
}

- 배치 방향 설정.

- grid track에서 설정한 방향으로 item들이 배치가 된다.

- auto-flow라는 값을 넣는 위치에 따라서 그 부분의 방향이 결정이 된다.

- auto-flow 값은 grid 단축 속성에서만 사용하는 값의 형태로 grid-auto-flow 속성값의 다른 표기법.

- 슬래시(/)와 함께 교차 축 grid-template-rows/columns 값의 명시가 필수.

## grid item의 배치와 병합

### grid item 배치

.container {
    display: grid;
    grid: auto / repeat(3, 1fr);
}
.item1 { grid-area: 2 / 3; }

- 행 배치 시점 / 열 배치 시점 / 행 배치 종점 / 열 배치 종점 값을 선언하여 아이템의 배치 위치를 결정할 수 있다.

- 값은 시계 반대 방향으로 순환하고 슬래시(/) 구분자로 분리한다.

- 생략한 값은 auto와 같다.

### grid item (배치/병합 실무에서 사용할 확률 높음)

.container {
    display: grid;
    grid: auto / repeat(3, 1fr);
}
.item1 { grid-area: 2 / 2 / span 3 / span 2; }

- span 키워드와 병합할 트랙의 수량을 조합하면 셀을 병합할 수 있다.

- 우리가 grid를 사용하기로 마음먹었다면 분명히 컬럼을 병합할 만한 상황이 있기 때문일 것이다.

- flex에서는 이런한 것을 구현할 수 없기 때문에 이 문법을 알아두는 것이 중요하다.

## grid track/item 정렬

### grid item 정렬(트랙)

.container {
    display: grid;
    grid: auto / repeat(3, auto);
    place-content: end center;
}

- 사실 이 코드는 그렇게 실무에서 많이 사용되는 코드는 아니다.

- 트랙의 크기가 auto인 상태로 컨테이너를 가득 채우지 않는다면 트랙의 위치를 정렬할 수 있다.

### grid item 정렬(아이템 복수)

.container { 
    display: grid;
    grid: auto / repeat(3, 1fr);
    place-items: end center;
    /*<self-position> = center | start | end*/
}

- 실무에서 많이 쓰는 코드는 아니다.

### grid item 정렬(아이템 단수)

.container { 
    display: grid;
    grid: auto / repeat(3, 1fr);
}
.item1 {
	place-self: end center;
}

- 실무에서 많이 사용하지 않는다.

- 셀(복수)의 위치를 정렬할 수 있다.

- grid area 영역 안에서 아이템을 단 하나만 독립적으로 방향을 제어할 수 있다.

### grid dense

- dense 는 밀집한다는 의미이다.

- grid를 자동으로 밀집해서 흐르게할 때 사용한다.

- 비어있는 공간을 매우는 기능이다.

- 채우지 못한 빈 영역이 있으면 흐름 방향을 거슬러 올라 트랙을 채운다.

- dense라는 속성 값은 auto-flow라는 속성 값과 항상 함께 쓰인다.

- Demo : https://t.ly/ZSsq

### Grid auto-fill/fit

- auto-fill 은 힘의 방향이 안쪽으로 작용한다.

- auto-fit 은 바깥쪽으로 잡아 늘리는 방향으로 작용한다.

- 트랙을 채우지 못한 상황에서 트랙의 최대 크기가 auto이면 auto-fill 또는 auto-fit 방식으로 트랙의 크기와 수량을 자동으로 결정한다.

- 자동으로 어떻게 결정될지 정확하게 알기 어렵기 때문에 잘 사용하는 속성은 아니다.