TIL Day-32

🎨 CSS

Grid Functions

• repeat(횟수, 너비)

• minmax(최솟값, 최댓값)

• fit-content(제한너비)

위의 함수는 Grid containter에서 사용

명시적인 행과 열을 만들어주는
grid-template-row,
grid-template-columns

암시적인 행과 열을 지정해주는
grid-auto-rows,
grid-auto-columns
속성들을 사용

Grid Units

• fr: 사용이 가능한 공간너비 비율

• min-content: grid item이 가질 수 있는 최소너비

  • 한글 적용시 word-break: keep-all; 사용 가능

• max-content: grid item이 가질 수 있는 최대너비
  
  

• 자동으로 행과 열의 갯수를 만들어 내는 단위 repeat함수와 함께 사용

  • auto-fit: 지정할 수 있는 최대 너비를 우선 적용
  • auto-fill: 지정할 수 있는 최소 너비를 우선 적용

Transform 3D

• transform: 변환 효과

• transform-origin: 요소의 변환 기준점을 설정, 기본값 50% 50%

• perspective: 원근거리 설정

  • 함수: 요소 자체에 부여
  • 속성: 요소 상위에 부여

• perpective-origin: 원근거리 기준점을 변경, 기본값 50% 50%

• backface-visibility: 요소의 뒷면 설정

  • visible
  • hidden

Columns

다단(Multi-Columns)

• column-count: 단의 갯수를 지정, 기본값 auto(1)

• column-width: 개별 단의 최적의 너비를 지정, 기본값 auto

  • 단축 속성
  • columns: column-width(너비) column-count(갯수)

• column-rule: 단과 단 사이의 구분선, 너비 종류 색상

  • 개별 속성
  • column-rule-width: 너비 지정
  • column-rule-style: 종류 지정
  • column-rule-color: 색상 지정

• column-gap: 단과 단 사이의 너비 지정, gap속성으로 대체해서 사용 가능

@supports

특정한 css기능이 동작하는 브라우저에서 지원이 가능한지에 따라서
특정한 스타일을 사용할 수 있도록 만들어주는 규칙
기능 쿼리 (feature query)

• 브라우저가 display: grid를 지원하는 경우 동작

@supports (display: grid) {
  div {
   display: grid;
  }
}

• 브라우저가 display: grid를 지원하지 않는 경우 동작

@supports not (display: grid) {
div {
    folat: right;
  }
}

@media

반응형 레이아웃을 만들 때 사용
사용 형식은 아래와 같다

@meia 타입 and (기능) { 스타일 }

---

오늘의 마무리

🖤 Grid Functions와 Units, Transform 3D, Columns 등 CSS 심화에 대해서 실습을 통해 보다 쉽게 공부해 보았다.
🖤 더불어 @supports와 @media 등 CSS의 동작 규칙을 설정하는 기능들에 대해서 공부해 볼 수 있었다.
🖤 CSS 고수가 되는 그날까지 퐈이아🔥