[Tailwind CSS] 17. sticky top-0 & backdrop-blur

 

tailwind CSS 로고

 

 

요약  

  1. 학습내용 : sticky top-0

 

  2. 학습내용 : backdrop-blur

---

상세
  1. 학습내용 : sticky top-0

 

◼︎ sticky top-0 정의

- position: sticky : 스크롤 위치에 따라 요소가 흘러가다가 특정 임계점에 도달하면 고정(sticky)되는 css

- relative와 fixed 사이의 성격 : 부모 컨테이너 영역 내에서만 고정

sticky top-n : top-0 / top-4 / top-1/2 등

 

◼︎ sticky top-0 용법

return (
    <>
      <header className='sticky top-0'>
        <nav className='flex container max-w-4xl mx-auto px-6 py-3 justify-between items-center'>
          <div className='flex items-center space-x-4'>
            <p className='text-sm text-gray-500'>ㄱㄴㄷㄹㅁ</p>
          </div>
          <div className='flex items-center gap-x-6'>
            <a href="#home" className='hover:text-blue-500 transition-colors'>홈</a>
          </div>
        </nav>
      </header>
    </>
  );

 

- header 태그에 sticky top-0를 넣었다.

 

결과물

 

- header 태그가 상단 top-0에 고정이 되어 스크롤에 따라 올라온 요소들이 겹쳐진다.

=> 배경색에 대한 정의 필요 

---

  2. 학습내용 : backdrop-blur

 

◼︎ backdrop-blur-size 정의

- backdrop-filter : 요소 뒤(배경)에 CSS 필터(blur, brightness 등)를 적용하는 속성ㅇ

- relative와 fixed 사이의 성격 : 부모 컨테이너 영역 내에서만 고정

backdrop-blur : backdrop-blur-lg / backdrop-blur-xl / backdrop-blur-none 

 

◼︎ backdrop-blur 용법

return (
    <>
      <header className='sticky top-0 bg-opacity-90 backdrop-blur-xl'>
        <nav className='flex container max-w-4xl mx-auto px-6 py-3 justify-between items-center'>
          <div className='flex items-center space-x-4'>
            <p className='text-sm text-gray-500'>ㄱㄴㄷㄹㅁ</p>
          </div>
          <div className='flex items-center gap-x-6'>
            <a href="#home" className='hover:text-blue-500 transition-colors'>홈</a>
          </div>
        </nav>
      </header>
    </>
  );

- header 태그에 backdrop-blur-xl 를 넣었다

결과물