TIL- 2023.11.06

Grid

Grid Items

1. grid-row 속성

• grid-row-start, grid-row-end, grid-column-start, grid-column-end
• span 키워드를 사용하면 셀 갯수를 지정하여 확장할 수 있다

/* 단축속성 */

grid-row : {start 값} / {end 값} 또는 {start 값} / span {값}
grid-column : {start 값} / {end 값} 또는 {start 값} / span {값}

/* ex */
grid-row: 1/3;
/* start: 1, end: 3 */
grid-column: 1/3;
/* start: 1, end: 3 */

 

• 빈 칸에  4를 넣기 위해 grid-auto-flow: row dense; 를 사용한다

2. justify-self, align-self 속성

• container에서 justify-items, align-items와 유사한 속성
• cell 내부에에 빈 공간이 있을 때 사용 가능하다

3. order 속성

• 기본 값인 0에서 시작해서 숫자가 작으면 작을수록 앞에서 배치하고 크면 클수록 뒤에 배치한다

4. z-index 속성

• position, flex, grid 속성을 사용할 때 쌓임순서를 정의하도록 사용할 수 있다

---

Grid Function(함수)

1. repeat(반복 횟수, 반복 값)

• 원하는 속성의 값이 반복하는 것을 간단하게 표현할 수 있다

grid-template-rows: 100px 100px;
/*repeat 함수 사용*/
grid-template-rows: repeat(2, 100px);

2. minmax()

• 행이나 열 길이의 최소값 최대값을 한 번에 지정할 수 있다
• grid-auto-rows / grid-auto-columns와 같은 암시적인 부분에 사용 가능하다.

/* minmax() 함수 */
grid-template-columns: 100px 200px 100px 200px;
grid-template-columns : minmax(100px, 1fr) ,minmax(200px, 1fr);

 

3. fit-content()

• content 너비에 맞춰서 늘어난다.
• content의 너비가 인수보다 더 크면 fit-content의 인수만큼 늘어난다.

grid-template-columns: fit-content(300px) 100px;

---

Grid Units (단위)

1. fr (fraction)

• 공간 너비 비율( 사용 가능한 공간 )

2. min-content / max-content

• min-content: 컨텐츠에서 가장 작은 단위만큼 넓이를 조절한다 (한글은 한 글자, 영어는 한 단어)

• max-content: 컨텐츠단위 만큼 넓이를 조절한다.

• word-break
  • 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로할 때 줄을 바꿀 지 지정한다.
  • normal: 기본 줄바꿈 규칙(기본 값)
  • keep-all: min-content에서 글자 단위로 줄바꿈 처리되는 것을 단어 단위로 줄바꿈 처리 되도록 바꿔준다.
  • break-all: 어떠한 두 문자 사이에서도 줄 바꿈이 발생할 수 있다 

3. auto-fill / auto-fit

• repeat 함수와 같이 사용한다. (repeat의 개수 부분에 사용)
• 행 또는 열을 몇개 사용할지 자동으로 정해준다.
• auto-fit: 지정할 수 있는 최대 너비를 적용
• auto-fill: 지정할 수 있는 최소 너비를 적용

grid-template-columns : repeat(auto-fit, minmax(100px, 1fr);

---

Transform

• transform이 일어나는 기준은 x, y 정중앙

1. transform-origin

• transform의 기준을 설정할 수 있다

/* x값, y값으로 기준 설정 가능 */
transform-origin: x축 y축

 

2. transform: perspective()

• 원근법 적용은 3차원 변환에 적용해야 효과가 있다
• rotate()는 2차원이기 때문에 rotateX() 또는 rotateY()를 사용한다
• perspective를 변환이 일어나는 부모에 적용을 하면 속성으로 사용할 수 있다
• perspective-origin: 원근으로 바라볼 지점을 새로 정해한다

transform: perspective(원근거리) rotateY(회전각도);

perspective: 원근거리;
perspective-origin: x축 y축;

3. transform-style

• 기본 값: flat
• transform-style: preserve-3d를 추가해주면 3차원효과가 적용된 부모의 자식에 3차원 효과가 적용된다

4. backface-visility

• backface-visility: hidden을 사용하면 rotate에서 요소 뒷면을 보이지 않게 해준다. 

---

Column

1. column-count: 개수

• 단(column)을 몇 개로 유지할 것인지 설정한다

2. column-width: 너비

• 각 단 (column) 의 넓이를 설정한다

3. column-rule: 너비 종류 색상

• 단과 단사이에 구분선을 설정한다

4. columns: 너비 개수

• 단축 속성으로 표현 가능

columns: 300px 3;

column-width: 300px;
column-count: 3;

5. column-gap: 너비

• 단과 단 사이에 gap을 설정한다

---

Filter

filter 함수

• blur(): 요소를 blur(흐림) 처리를 할 수 있다. px값이 커질수록 흐려진다
• grayscale(): 요소 무채색으로 처리할 수 있다. 기본값 100%
• invert(): 요소의 색상을 반전시킨다.  기본값 100%
• drop-shadow(x축 y축 흐림정도 색상): 요소의 그림자를 추가한다
• brightness(): 요소의 명도를 지정한다. 기본값 1
• contrast(): 요소의 대비를 조절한다. 기본값 100%
• opacity(): 요소의 투명도를 조절한다. 기본값 100%
• saturate(): 요소의 채도를 지정한다. 기본값 100%
• sepia(): sepia톤(오래된 사진과 같은 바랜색)을 지정한다. 기본값 100%
• hue-rotate(각도): 0도~360도까지 사용, hue rotate에 해당하는 각도의 색상을 사용할 수 있다.
• backdrop-filter: filter와 다르게 해당하는 요소의 배경에 보여지는 부분을 filter 처리한다.