[카테캠 선택 강의] 내비게이션 사용기술 정리

Sticky

postion 의 속성인 sticky 를 제대로 사용하기 위해서는 다음 조건이 필요하다.

• scroll
• top bottom left right 중 하나

설정된 위치에 도달하기 전까지는 static 처럼 행동하다 설정된 위치에 다다르면 fixed 처럼 행동한다.

또한 부모영역까지만 적용된다. 

 

간단한 예시를 보자.

 

See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.

 

다음은 부모영역까지만 적용된다에 근거가 되는 예제이다.

 

See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.

 

backdrop-filter

이 어마무시한 CSS 는 무엇인가. 처음봤다. 짜릿하다.

backdrop-filter 는 요소가 차지하는 영역의 배경을 흐리게 처리한다.

See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.

 

만약 backdrop-filter 와 background-color 콤보가 있다면 다음처럼 색이 있는 흐림 영역도 만들어낼 수 있다.

 

See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.

 

 

backdrop-fliter vs filter

그럼 이 두가지의 차이가 무엇인가?

제대로 딱 감이 오는 정리가 없어서 나름대로의 정리를 하자면, backdrop-filter 는 배경색에 대한 blur 처리이고 filter 는 요소 전체에 대한 blur 처리인 것 같다. 다만 backdrop-fliter 로 처리한 blur 가 더 아름다운 UI 라고 생각한다.

 

See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.

 

 

box-shadow

box shadow 의 요소 값은 다음과 같다.

box-shadow 0(x) 0(y) 0(blur 흐림처리) 4px(spread 확산처리) red (색)