서리 낀 유리를 위한 backdrop-filter
backdrop-filter를 사용해 다른 콘텐츠 위에 겹쳐진 요소에 서리 낀 유리 효과를 만듭니다.
서리 낀 유리를 위한 backdrop-filter은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
backdrop-filter란 무엇입니까?
backdrop-filter는 요소 자체가 아니라 요소 뒤의 영역에 그래픽 효과를 적용합니다. 필터링된 배경이 보이려면 요소에 어느 정도의 투명도가 있어야 합니다(알파가 1보다 작은 배경 또는 배경 없음).
반투명 유리 효과
전형적인 반투명 유리 패턴입니다.
<div class="bg-wrapper">
<div class="glass-card">Frosted Glass Card</div>
</div>
-webkit-backdrop-filter 접두사
Safari에는 -webkit-backdrop-filter 접두사가 필요합니다. 브라우저 간 지원을 위해 표준 속성과 함께 항상 포함하십시오.
사용 가능한 필터 함수
backdrop-filter는 filter와 동일한 함수를 지원합니다: blur(), brightness(), contrast(), grayscale(), saturate(), hue-rotate(), sepia(), drop-shadow().
<div class="bg-wrapper">
<div class="modal-overlay"></div>
</div>
어두운 반투명 유리
오버레이와 모달에 사용할 수 있는 어두운 변형입니다.
<div class="bg-wrapper">
<div class="dark-glass">Dark Frosted Panel</div>
</div>
쌓임 맥락 요구 사항
backdrop-filter는 쌓임 맥락을 생성합니다. 요소는 배경 위에서 합성되어야 합니다. 즉, 쌓임 순서에서 다른 콘텐츠보다 위에 있어야 합니다(z-index가 반드시 필요하다는 뜻은 아니며 페인트 순서가 중요합니다).
backdrop-filter의 성능
강한 backdrop-filter: blur()는 비용이 큽니다. 브라우저가 배경을 별도의 렌더링 과정에서 그리도록 만들기 때문입니다. 모바일 성능을 위해 흐림 값을 20px 이하로 사용하십시오. 자주 다시 페인트되는 콘텐츠에는 사용하지 마십시오.
반투명 오버레이가 있는 모달
반투명 유리 오버레이가 있는 모달 대화 상자입니다.
<div class="modal-backdrop">
<div class="modal">Modal Content</div>
</div>
유리 효과가 적용된 고정 내비게이션
반투명 유리 효과가 적용된 고정 내비게이션 바입니다.
<div class="bg-wrapper">
<nav class="navbar">Sticky Nav</nav>
</div>
브라우저 지원
backdrop-filter는 Chrome 76 이상, Firefox 103 이상, Safari 9 이상(webkit)에서 지원됩니다. 항상 -webkit- 접두사를 포함하십시오. 최신 데이터는 caniuse.com에서 확인하고 지원하지 않는 브라우저에는 불투명한 대체 수단을 제공하십시오.
불투명한 대체 수단
backdrop-filter를 지원하지 않는 브라우저를 위해 불투명한 배경을 대체 수단으로 제공하십시오.
<div class="bg-wrapper">
<div class="glass">Fallback-aware glass panel</div>
</div>
빠른 확인
backdrop-filter가 표시되려면 요소에 무엇이 있어야 합니까?
요약
backdrop-filter는 요소 뒤에 있는 대상에 필터 효과를 적용합니다. 효과가 보이려면 요소에 투명도가 있어야 합니다. 전형적인 반투명 유리 효과는 blur() + saturate()를 사용합니다. Safari를 위해 항상 -webkit-backdrop-filter를 포함하십시오. @supports를 사용하여 불투명한 대체 수단을 제공하십시오.
자주 묻는 질문
“서리 낀 유리를 위한 backdrop-filter” 강의는 무료인가요?
네 — “서리 낀 유리를 위한 backdrop-filter” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“서리 낀 유리를 위한 backdrop-filter”에서 뭘 배우나요?
backdrop-filter를 사용해 다른 콘텐츠 위에 겹쳐진 요소에 서리 낀 유리 효과를 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“서리 낀 유리를 위한 backdrop-filter” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- filter: blur, brightness, contrast, grayscale
- 서리 낀 유리를 위한 backdrop-filter
- 레이어 혼합을 위한 mix-blend-mode
- isolation 속성