CSS Grid 사용하기

호수·2022년 9월 19일

Grid

부모 컨테이너 요소안에서 내부 자식 요소들의 위치를 X축과 Y축 방향 모두를 이용해 배치하는 내부 디스플레이타입의 하나

grid-container 적용 속성

.container {
	display :grid;
}

grid-template-columns

열방향 그리드 트랙 사이즈를 설정

.container{
	display:grid;
    grid-template-columns: 1fr 1fr 1fr // 1:1:1 비율로 그리드 열 방향 트랙 설정
}

grid-template-rows

행방향 그리드 트랙의 사이즈를 설정

.container{
	display:grid;
  	grid-template-columns: 1fr 1fr 1fr // 1:1:1 비율로 그리드 열 방향 트랙 설정
	grid-template-rows: repeat(3, 1fr); // 1fr 비율로 3번 반복해서 행 방향 트랙 설정
}

repeat() 함수

grid-track 의 사이즈를 좀 더 간단한 형태로 표현하도록 도와주는 CSS 함수

.container{
	display:grid;
	grid-template-rows: repeat(3, 1fr); // 1fr 비율로 3번 반복해서 행 방향 트랙 설정
}

minmax() 함수

최소와 최대 사이의 범위를 설정하는 함수
최소와 최대값을 의미하는 두 가지 인자를 가짐

.container{
  display:grid;
  grid-template-columns: repeat(3, minmax(50px, 150px)); // 최소50px 최대150px 3번 반복
}

auto-fill 과 auto-fit

만약 repeat 함수를 사용할 때, 반복되는 카운트를 고정하지 않고 컨테이너의 넓이에 따라 가능한 많은 그리드 컬럼을 배치하고 싶다면 사용하는 키워드 값

auto-fill : 자동 채움(auto-fill)을 설정하면 컨테이너 영역을 자동으로 반복하여 채움
auto-fit : 자동 채움(auto-fill)을 자동 맞춤(auto-fit)으로 설정하면 그리드 컨테이너 내부에 빈 트랙이 존재할 경우 그 공간을 나눠 맞춤

.container{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, auto)); // 
  /* grid-template-columns: repeat(auto-fit, minmax(50px, auto)); */
	
}

gap

셀과 셀사이의 간격을 설정할 때 사용 할 수 있는 속성

.container{
  display:grid;
  grid-template-columns: repeat(3, minmax(50px, 150px));
  row-gap: 10px;
  column-gap : 30px;
  /* gap : 10px 30px; 축약속성*/
}

flex 에서도 gap 속성을 사용할 수 있음

gap 속성은 익스플로러 미지원

grid-item 적용 속성

그리드 아이템의 영역(grid area) 설정


.container .item:nth-child(1){
  grid-column-start : 1; // 그리드 열 1번부터
  grid-column-end : 3; // 3번 전까지 병합
  grid-row-start : 1; // 그리드 행 1번부터
  grid-row-end : 3; // 3번 전까지 병합

grid-area 와 grid-template-areas

grid-area : 그리드 영역의 이름을 설정함
grid-template-areas : 그리드 영역의 범위를 시각적으로 표현함

body{
  display:grid;
  grid-template-columns: 1fr 2fr;
  grid-template-areas:
    'header header'
    'aside main'
    'footer footer'
}
header{
  grid-area:header;
  background-color: pink;
}
main{
  grid-area:main;
  background-color: royalblue;
}
aside{
  grid-area:aside;
  background-color: lightgreen;
}
footer{
  grid-area:footer;
  background-color: aquamarine;
}

그리드 아이템의 Z축 설정하기

z-index 속성을 grid 안에서도 사용 할 수 있음
grid 안에서는 굳이 position 속성을 사용하지 않더라도 z-index를 사용하여 화면에 보여지는 우선순위를 설정할 수 있음

CSS transition, transform

transition

transition CSS 속성값이 변할 때, 값의 변화가 일정 시간에 걸쳐 일어나도록 하는 것

transition: all 2s;

transition의 속성

위에서 사용된 transition 은 축약속성이며 사용되는 속성들은 다음과 같다.
1.transition-delay : transition 이 일어날 때 얼마만큼 기다렸다가 실행할지
2.transition-duration : transition 이 일어나는 지속시간
3.transition-property : 어떤 속성에 transition 효과를 줄지 설정
4.transition-timing-function : transition 의 진행 속도를 설정

timing-function 속성값 : ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps(int, start|end), cubic-bezier(n, n, n, n), initial, inherit

transition 사용법

transform

transform은 html 요소를 여러 형태로 변형할 때 사용하는 속성

다양한 속성들이 존재 하나 가장 많이 사용하는 scale, rotate, translate, skew , origin

-scale : 요소의 크기를 변환 시킬 때 사용하는 속성

rotate : 요소를 회전을 시켜주는 속성
translate : Object를 x,y축 지점으로 이동을 시켜주는 속성
skew : 비틀기 또는 외곡을 주어 형태를 변형시키는 속성
transform-origin transform 되는 Object의 기준점을 변경할 때 사용
- 기본 transform-origin은 center, center

tansform VS position

position 속성을 통해 원하는 좌표로 요소로 이동할 수 있으며 tansform을 사용해서도 좌표를 이동할 수 있다. 그렇다면 언제 사용해야할까?

웹페이지 렌더링

브라우저는 파싱 -> 스타일 계산 -> 레이아웃 -> 페인트 -> 컴포지팅 과정을 거침

page reflow & repaint

브라우저는 html 구조상의 변화 혹은 스타일의 변화가 있을 때 reflow, repaint 라는 과정을 거치게 됨
브라우저의 각 단계별 렌더링 과정들은 반드시 전 단계의 데이터가 필요
- reflow : 레이아웃(너비, 높이 등) 변경 시 영향 받는 모든 노드(자식, 부모)의 수치를 다시 계산하여 렌더 트리를 재생성하는 작업 (렌더 트리 : 브라우저가 html을 분석하여 트리형태의 구조로 재해석한 것)
- repaint : reflow 과정이 끝난 후 재생성된 렌더 트리를 다시 그리는 작업으로 수치와 상관없는 스타일 변경시에는 reflow 과정을 생략한 repaint 작업만 수행

만약 css를 통해 레이아웃이 바뀌는 애니메이션을 구현할 경우 브라우저는 매 프레임마다 reflow, repaint 과정을 수행해야함.
때문에 reflow, repaint 현상은 브라우저에 상당한 부담이 됨

@Keyframe

@keyframes은 애니메이션이 만들어지는 부분
from 속성이나 0% 속성에 설정한 스타일부터 to 속성이나 100% 속성에 설정한 스타일로 점차 변경되면서 애니메이션이 재생
0%과 100% 사이에는 여러 개의 중간 속성을 설정할 수 있음

@keyframes animation-name {
/* 애니메이션의 시작 프레임 */
from {                      
	styles;
}
/* 애니메이션의 종료 프레임 */
to {
	styles;
}


@keyframes animation-name {
/* 애니메이션의 시작 프레임 */
0% {
	styles;
}
50% {
	styles;
}
/* 애니메이션의 종료 프레임 */
100% {
	styles;
}

transition과 animation의 차이점

transition 과 animation 은 요소 상태에 대한 의존 여부에 대해 차이를 갖는다

transition 은 요소의 상태가 변경되어야 애니메이션을 실행할 수 있다.

animation 속성은 요소의 상태 변화와 관계없이 애니메이션을 실행할 수 있다.

Animation 적용

CSS3 애니메이션을 이용하면 여러 개의 CSS 스타일을 부드럽게 전환시킬 수 있음

animation의 단일 속성들

animation-name
- 애니메이션을 재생(호출) 하기 위해서는 반드시 이름을 정의해야함
- name은 @keyframes 속성에서 설정한 이름과 동일하게 사용
- 이름에는 영문 소문자, 숫자, 문자열, 언더바(_), 하이픈(-)을 사용
- 영문 대문자, 숫자, 특수문자는 사용할 수 없음
- 여러 개의 animation-name 을 동시에 나열할 경우 ,를 사용
animation-duration
- 애니메이션의 시작부터 종료까지의 총 지속 시간을 설정
- duration 값은 양수로 지정해야함
animation-iteration-count
- 애니메이션을 재생하는 횟수를 지정할 때 사용
- iteration-count 속성의 기본 값은 1이며, 0으로 값을 지정할 경우 애니메이션이 재생되지 않음
- infinite 값을 설정할 경우 애니메이션을 무한 반복시킴
animation-direction
- 애니메이션의 재생 방향을 설정
- 기본 값은 from 또는 0%에 설정된 스타일에서 to또는100%에 설정된 스타일대로 재생하는 normal
- 반대로는 reverse
- 순방향 시작, 순방향-역방향 번갈아 재생 alternate
- 역방향 시작, 역방향-역방향 번갈아 재생 alternate
animation-timing-function
- @keyframes 사이의 재생 속도를 조절하는 속성으로, transion-timing-function 속성과 유사한 결과를 제공
- timing-function 속성의 종류로는 ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n, n, n, n) 등이 있음

animation-delay

애니메이션 시작을 지연시키는 옵션
기본 값은 애니메이션이 지연 없이 시작되는 0 또는 now
값이 음수일 경우 지정된 시간이 지난 뒤의 장면부터 지연 없이 애니메이션


animation-delay: 0;             /* 바로 재생 */
animation-delay: now;           /* 바로 재생 */
animation-delay: 1.5s;          /* 지연 재생 */
animation-delay: -500ms;        /* 지정 시간 이후 프레임부터 바로 재생 */

animation-play-state
- 재생여부를 설정할 경우 play-state 속성을 사용
- 속성값이 running일 경우 애니메이션을 재생하고, paused일 경우 애니메이션을 정지

오늘은 애니메이션 파트를 배웠는데 아무래도 시각적으로 움직이는 것들이다 보니 재미있었다.
다만 병원진료를 위해 조퇴해서 자율학습시간을 날려서 아쉬울 뿐이다.

호수

인포테인먼트에서 동작하는 웹 어플리케이션을 개발합니다.