프로젝트 CSS 배운점 정리

inset

https://developer.mozilla.org/en-US/docs/Web/CSS/inset

inset 기능을 쓰면 내가 원하는 만큼 채울 수있다.

Position & inset

inset을 사용하면 다양하게 쓸 수 있는데

div로 양 끝을 감싸고 relative를 선언하고
안쪽에는 fixed & inset 0을 선언하면 relative가 포함된 div 안에서 처리가 된다.

<div className = "relative">
<div className = "absolute inset-0 bg-black bg-opacity-40" />
</div>

만약에 absolute 대신에 fixed를 쓴다면 전체를 감쌀 수 있다.

<div className = "relative">
<div className = "fixed inset-0 bg-black bg-opacity-40" />
</div>

pointer-events

pointer-events를 사용하면 pointer를 삭제해줄 수 있다.

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

transition

transition-timing-function:

기본값은 ease입니다.
ease : cubic-bezier( 0.25, 0.1, 0.25, 1 )과 같습니다.
linear : cubic-bezier( 0, 0, 1, 1 )과 같습니다.
ease-in : cubic-bezier( 0.42, 0, 1, 1 )과 같습니다.
ease-out : cubic-bezier( 0, 0, 0.58, 1 )과 같습니다.
ease-in-out : cubic-bezier( 0.42, 0, 0.58, 1 )과 같습니다.
step-start : steps( 1, start )와 같습니다.
step-end : steps( 1, end )와 같습니다.
steps( n, start|end ) : n단계로 나누어서 변화시킵니다. start 또는 end를 입력하지 않음녀 end로 처리합니다.
cubic-bezier( n, n, n, n ) : n에는 0부터 1까지의 수를 넣습니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

backdrop

https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

tailwindcss 임의의 값 추가

해당 테마에 맞추어서 추가를 해줄 수 있다.
color에 적용했으니 컬러를 사용할 때는 bg-gray-500이었다면
bg-pageBG 이런식으로 먹이면 된다.

tailwindcss 클래스 추가

.class명을 의미한다.

이런식으로 footer에 선언을 하고 그 아래에 사용할 수 있다.

Hover 선언

  .focus-div {
    color: red;
  }
  .focus-div:hover {
    
    color: blue;
  }
  

class명과 붙어있어야 작동한다.