목차
그리드 컨테이너
display 속성 값을 grid나 inline-grid로 지정하면 해당 요소가 그리드 컨테이너가 된다. grid로 지정하면 컨테이너가 블록 요소로 처리되고, inline-grid로 지정하면 인라인 요소로 처리된다.
grid-template-rows / grid-template-columns
그리드 템플릿을 행 또는 열 방향으로 짤 수 있는 속성이다. 속성 값으로는 트랙 크기를 지정하고, 공백으로 구분한다. 값의 개수에 따라 행 또는 열의 개수가 된다. 첫 번째 값이 첫 번째 행/열의 트랙 크기다.
속성 값은 고정 사이즈, % 단위 모두 허용하고, % 단위는 부모 요소의 길이에 비례한다. 특정 공간을 고정시키고 남은 공간을 유연하게 활용할 때 fr(fraction) 단위를 사용할 수 있다. 1fr 2fr로 지정하면 첫 트랙의 크기는 1/3, 두 번째 트랙의 크기는 2/3으로 유연하게 적용된다.
.grid-container {
display: grid;
grid-template-columns: 50px 5rem 1fr 1fr;
grid-template-rows: 25px 50px;
}
grid-auto-rows / grid-auto-columns
기본 값을 주면 자동으로 균등하게 배분하여 트랙 크기를 지정한다.
repeat()
repeat() 함수를 사용하여 같은 값을 반복적으로 지정할 수 있다. 함수의 첫 값은 반복할 횟수, 다음 값은 크기다. 콤마로 구분한다.
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
min() / max(), minmax()
min()과 max() 함수는 함수의 값으로 준 값 중에 가장 작은/큰 값으로 지정한다. 값은 콤마로 구분한다.
/* 100px과 50% 중 더 큰 값 선택 */
max(100px, 50%);
minmax() 함수는 최소 값과 최대 값을 각각 지정한다. 값은 콤마로 구분한다.
그리드는 너무 작아질 때를 대비해서 최소 값과 최대 값을 지정하는 것이 필요하다. 특히 콘텐츠의 길이에 따라 최대 길이와 최소 길이를 줄 수 있는 값이 max-content와 min-content다.
.grid-containter {
grid-template-column: repeat(3, minmax(max-content, 1fr));
}
그리드 아이템 - 라인 기반 배치
그리드 컨테이너 안에 포함된 자식(직계) 요소가 그리드 아이템이 된다. float, clear, vertical-align 속성을 사용할 수 없다.
grid-row-start, grid-column-start, grid-row-end, grid-column-end
라인을 기준으로 그리드 아이템을 배치할 수 있다. 행이나 열의 시작과 종료 라인 번호를 값으로 지정한다.
/* 그리드 아이템 1의 위치를 4번째 행, 3번째 열에 배치한다. */
.grid-item1 {
grid-row-start: 4;
grid-column-start: 3;
grid-row-end: 5;
grid-column-end: 4;
}
/* 한 칸만 차지한다면 start 또는 end 중 하나만 지정해도 된다. */
.grid-item1 {
grid-row-start: 4;
grid-column-start: 3;
}
.grid-item1 {
grid-row-end: 5;
grid-column-end: 4;
}
라인 값으로 음수를 줄 수 있다. 마지막 라인부터 -1, -2, -3, ...이다. 모바일과 데스크탑 버전에서 그리드의 행이나 열 개수가 다를 때 가장 마지막 행/열을 선택할 때 음수 값을 사용할 수 있다.
grid-row, grid-column
단축 속성이다. 시작 값과 끝나는 값을 / 기호로 구분하여 지정한다.
/* 그리드 아이템 2의 위치를 4번째 행부터 두 칸 걸치고, 4번째 열에 배치한다. */
.grid-item2 {
grid-row: 4 / 5;
grid-column: 4;
}
grid-area
row-start / row-end / col-start / col-end 순으로 값을 지정하는 단축 속성이다.
span
몇 개의 행을 차지할지 지정할 수 있는 값이다. span + 공백 + 차지할 행 개수 순으로 지정한다.
/* 1번째 행부터 3칸을 차지하고, 4번째 열에 배치 */
.grid-item3 {
grid-row: 1 / span 3
grid-column: 4;
}
영역 겹침
그리드 아이템은 서로 겹칠 수 있다. position: absolute;와 비슷하다. 나중에 마크업한 아이템이 위로 올라온다.
그리드 아이템 - Name 기반 배치
각 그리드 아이템의 grid-area 속성 값에 이름을 지정하고, 그리드 컨테이너의 grid-template-areas 속성 값에 아이템 이름을 나열하면 나열한 대로 그리드에 적용한다.
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-template-areas:
'item1 item1 item1 item2'
'item1 item1 item1 item6'
'item4 item5 item5 item3'
'item7 item5 item5 item3';
}
/* 각 아이템에 이름 지정 */
.grid-item1 {
grid-area: item1;
}
...
.grid-item7 {
grid-area: item7;
}
셀을 비우려면 해당 영역에 .을 입력한다. 단, 그리드 아이템은 박스 형태이기 때문에 모양을 무너트릴 수 없다.
그리드 정렬
콘텐츠 정렬
- align-content: 세로 정렬
- justify-content: 가로 정렬
- place-content: 단축 속성. 세로 정렬 값과 가로 정렬 값을 공백으로 구분하여 지정한다. 하나의 값만 지정하면 두 값 모두 동일하게 적용한다.
아이템 정렬
- align-items: 세로 정렬
- justify-items: 가로 정렬
- place-items: 단축 속성. 세로와 가로 정렬 값을 공백으로 구분하여 지정한다.
개별 아이템 정렬
- align-self: 세로 정렬
- justify-self: 가로 정렬
- place-self: 단축 속성. 세로와 가로 정렬 값을 공백으로 구분하여 지정한다.
CSS 애니메이션(Transition)
CSS 애니메이션은 2가지 종류가 있다. transition과 @keyframes가 있다. 오늘은 transition 애니메이션을 가볍게 다뤄봤다.
transition 속성은 애니메이션을 적용할 요소에 직접 할당한다. :hover에 애니메이션을 적용하고 싶다면 :hover가 아니라 :hover를 적용하는 요소에 할당한다.
- transition-property: 애니메이션을 적용할 속성을 지정한다.
- transition-duration: 애니메이션 지속 시간. s, ms 단위를 사용한다.
- transition-timing-function: 애니메이션 가속도/감속도. 진행되는 속도의 형태를 지정한다. linear(균등한 속도), ease(기본 값. 가속 후 감속), ease-in(가속), ease-out(감속) 등을 속성 값으로 지정할 수 있다.
- transition-delay: 시퀀스 애니메이션. 애니메이션이 순차적으로 진행된다.
:hover 상태 선택자를 사용하면, 마우스로 접근할 때만 애니메이션이 적용된다. 자바스크립트를 사용해서 클래스를 동적으로 넣었다 빼는 방식으로 사용하는 게 접근성 측면에서 더 좋은 방법이다.
오늘 하루를 돌아보며
그리드를 왜 플렉시블 레이아웃의 끝판왕이라고 하는지 알겠다. 세상 편하다. 자유도가 높아서 반응형으로 만들기 좋을 것 같다. 네임 기반 그리드를 사용하면 레이아웃 변경이 정말 뚝딱! 된다. 너무 간단하고 쉽다. 하지만 아직 subgrid를 배우지 않았다는 사실.... 오늘 배운 것을 빨리 익혀서 내일 배울 subgrid를 더 잘 이해할 수 있도록 해야겠다.
아직 네임 기반 그리드를 익스플로러 11에서 지원하지 않아서 현업에서는 잘 사용하지 않는다고 한다. 아쉽다.
