CSS Grid 사용하기

한호수 (The Lake)·2022년 9월 19일
CSSgrid
0
post-thumbnail

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일 경우 애니메이션을 정지

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

profile
한호수 (The Lake)
항상 근거를 찾는 사람이 되자
이전 포스트

[TIL] CSS Selector

다음 포스트

[TIL] CSS 실무 테크닉

0개의 댓글