[CSS] 속성(z-index, filter 등), Grid

css 속성

css 변수 root

css파일에 :root 가상클래스를 만들어 유지보수를 손쉽게 할 수 있다.(색상, 폰트)

:root {
  --color-black: ##0D0D0D;
}

 

vmin

Viewport의 가로와 세로 길이 중 짧은 길이

vmax

Viewport의 가로와 세로의 길이 중 긴 길이

 

z-index

z축 정렬. 형제 요소의 z-index끼리 비교하여 숫자가 크면 앞 작으면 뒤에 배치

- auto 기본값

- -1(음수) 가장 아래(부모 요소 뒤로 감)

 

filter

- blur() 블러

- brightness() 밝기

- contrast() 대비

- drop-shadow() object에 그림자 주기

- grayscale() 흑백

- hue-rotate(0deg~360deg) 색상 변경

- invert() 색반전

- opacity() 불투명도

- saturate() 채도 변경

- sepia() 세피아

 

animation(링크)

animation(duration timing-fuction delay iteration-count  direction fill-mode play-state name)

animation(duration timing-fuction delay name)

animation(duration name)

 

animation-duration 지속 시간

animation-timing-fuction 속도 조절(linear/ ease/ ease-in/ ease-out/ ease-in-out/ cubic-bezier)

animation-delay 애니메이션 시작 전 지연시간

animation-iteration-count 반복 횟수

animation-direction 반복 방향(normal/ reverse/ alternate/ alternate-reverse)

animation-fill-mode 애니메이션 시작/끝 상태 제어(none/ forwards/ backwards/ both)

animation-play-state 일시 정지/ 재생 상태(paused/ running)

animation-name 이름

@keyframes 'animation name' {

}

 

linear-gradient(방향, 색1, 색2, ...)

:선형 그라데이션

방향 기본값 위 → 아래

(방향/각도, 색상1, 색상2) to right, to bottom right, 70deg

 

repeating-linear-gradient

: 선형 그라디언트 반복

스트라이프나 색상 혼합

 

radial-gradient

: 방사형 그라데이션

(색상1, 색상2) 가운데- 바깥

 

conic-gradient

:원뿔형 그라데이션

 

fr

: 비율. fraction

 

 

Grid 속성

두 방향(가로-세로) 레이아웃 시스템(2차원)

* 부모요소에 적용(GRID CONTAINER)

display: grid;

 

그리드 형태 정의

grid-template-rows 행의 배치

grid-template-columns 열의 배치

: px, fr, repeat(3,1fr), repeat(auto-fill, minmax(20px, auto)) 등이 들어감

repeat(반복횟수, 반복값)

minmax(최솟값, 최댓값)

auto-fill 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채움(반복횟수에서 사용)

auto-fit 남는 공간 채우기(stretch)(반복횟수에서 사용)

 

grid-auto-columns: minmax(100px, auto)

grid-auto-rows

: 그리드 형태를 자동으로 정의. grid-template-rows/columns와 비슷한데 개수를 미리 알 수 없는 경우에 사용

범위만 입력해줌

grid-auto-flow: dense;

:자동 배치. 순서 상관 없이 빈 셀을 채움

 

grid-template-areas

영역 이름으로 그리드 정의

행마다 ""따옴표로 나누고 셀마다 띄어쓰기로 분리하여 이름을 붙여줄 수 있다.

.container {
  grid-template-areas:
    "header header header"
    "   a    main    b   "
    "   .     .      .   "
    "footer footer footer";
}

grid-area 요소와 grid 영역을 매칭

.header { grid-area: header; }
.sidebar-a { grid-area: a; }
.main-content { grid-area: main; }
.sidebar-b { grid-area: b; }
.footer { grid-area: footer; }
/* 이름에 따옴표 붙이지 않음 */

 

정렬

justify-items

가로 방향 정렬(row축) (stretch, start, center, end)

align-items

세로 방향 정렬(column축) (stretch, start, center, end)

place-items

세로-가로 한번에 정렬 (align-items justify-items 순서로 작성, 하나만 쓰면 둘 모두에 적용)

 

justify-content

아이템 그룹 가로 정렬

(stretch, start, center, end, space-between, space-around, space-evenly)

grid 아이템들의 너비를 모두 합한 값이 grid 컨테이너 너비보다 작을 때 통째로 정렬

align-content

아이템 그룹 세로 정렬

(stretch, start, center, end, space-between, space-around, space-evenly)

grid 아이템들의 높이를 모두 합한 값이 grid 컨테이너 높이보다 작을 때 통째로 정렬

place-content

아이템 그룹 세로-가로 한번에 정렬

(align-content justify-content 순서로 작성, 하나만 쓰면 둘 모두에 적용)

 

간격

row-gap 행의 간격

column- gap 열의 간격

gap

gap 값이 하나면 행과 열에 같은 값 적용, 값이 둘이면 행 열 순서로 적용

 

초기에는 앞에 grid-를 붙여서 사용(grid-row-gap, grid-column-gap, grid-gap)

브라우저 호환성을 높이기 위해 초기 사용 방식과 동시에 적어주기도 함(같은 기능을 두번 기재)

.container {
  gap: 20px;
  grid-gap: 20px;
}

 

 

* 자식요소에 적용(GRID ITEM)

각 셀의 영역 지정

grid-row-start(시작위치)

grid-row-end(끝위치)

grid-row(시작위치 / 끝위치)

grid-column-start(시작위치)

grid-column-end(끝위치)

grid-column(시작위치 / 끝위치)

 

끝위치에 span을 사용하여 시작에서 몇 칸을 차지할 지 설정할 수 있음

끝위치를 생략하면 한 칸

.item {
  grid-column: 1 / span 2; /* 1에서 시작해서 2칸 차지 */
  grid-row: 1 / span 3; /*1에서 시작해서 3칸 차지 */
}

 

정렬

justify-self

개별 아이템 가로 정렬

(stretch, start, center, end)

align-self

개별 아이템 세로 정렬

(stretch, start, center, end)

place-self

개별 아이템 세로-가로 한번에 정렬

(align-self justify-self 순서로 작성, 하나만 쓰면 둘 모두에 적용)

 

order

배치 순서

시각적 나열 순서를 결정. html 구조는 바뀌지 않음. 숫자가 작을수록 앞에 배치

.item {
  order: 3;
}

 

z-index

z축 정렬. 숫자가 클수록 위로 올라옴

 

 

 

 

* 참고

https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자

 

2022.10.31

코스 S1U6