filter 속성 이미지나 요소의 효과를 설정하여 채도, 블러, 밝기, 투명도 등 적용 filter : _________; blur(__px) 요소 블러처리 0px 기본, px 커질 수록 블러 효과 커짐 brightness(__%) 밝기 조정 0% 어두운, 100% 기본, 200% 2배 밝은 saturate(__%) 채도 조정 0% 무채색, 100% 기본, 200% 2배 채도 contrast(__%) 대비 조정 0% 회색, 100% 기본, 200% 2배 대비 grayscale(__%) 회색조 변경 0% 기본, 100% 회색 hue-rotate(__deg) 색상 회전 0deg 기본, 360deg 한바퀴 회전 invert(__%) 색상 반전 0% 기본, 100% 반전 sepia(__%) 세피아톤 변경 0% 기본, 100% 세피아 opacity(__%) 투명도 조정 0% 투명, 100% 불투명 여러 필터 동시에 적용하기 (한 칸씩 띄우고 작성) filter : blur(10px) bri...
![[css 효과5.] 이미지, 배경 필터 효과 설정하기 (filter, backdrop-filter)](https://mblogthumb-phinf.pstatic.net/MjAyNDA2MThfNTcg/MDAxNzE4NjgxODM5Nzg0.hU8LUHmMlUdml0WYd30uLH3FAc3zYsibJImU-Yu9qE8g.M5QKyeyMujO-I83R6euDFywOE7G0sASsJWHgREPSW98g.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB-031.jpg?type=w2)
#
cssbackdropfilter
#
css효과
#
css필터효과
#
css필터
#
css투명도
#
css채도
#
css이미지효과
#
css이미지필터
#
css배경효과
#
css배경필터
#
css밝기
#
cssfilter
#
cssblur
#
fff
![[css 13.] flex 사용하여 레이아웃 배치하기 (부모-자식 속성 정리)](https://mblogthumb-phinf.pstatic.net/MjAyNDA0MjZfMjc3/MDAxNzE0MDYyMDY5NjAx.CltmOANlUKlZqm9_-2LdKZLO6wj4bKewUWBWP7vjX68g.CxM6n7TEug-b1aNb0MRvPJpVheRUPnGW3UzrGoA825Ug.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB-024.jpg?type=w2)
![[css 효과2.] text stroke, gradient, 텍스트 말줄임](https://mblogthumb-phinf.pstatic.net/MjAyNDA2MTJfNiAg/MDAxNzE4MTgwMTA4NDI2.qGxn8MdjzyBROdNDhsBDaC01zUlyzgymiFj6IS8sz_Ag.qrhawKcxqT0bBaYaXdcC53um0LpEbXb5iZ1LE0C36ckg.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB-028.jpg?type=w2)
![[웹디자인기능사] 실기 유형별 정리 & 실기문제 다운로드](https://mblogthumb-phinf.pstatic.net/MjAyNDA0MDVfMTg0/MDAxNzEyMzI3ODA2NDQ4.7rMuWTzCRr7MS8mazPz0c2HOlWJzy2qrm-IsvhrIxcUg.0_P399COOowkDXNjv-VFFmSchmhtTuhzQbjfAIlyr7Ag.JPEG/%BD%C7%B1%E2.jpg?type=w2)
![[javascript 10.] 자바스크립트 함수 종류 (콜백, 즉시실행, 타이머)](https://mblogthumb-phinf.pstatic.net/MjAyNDA2MjBfMTgg/MDAxNzE4ODg4NDQ2MDg0.xSB2hZ_FPzyZYu_e6Lr1rUGL47tO-evI0z7D0PzjL5wg.0Oe6Jc7hQZMAy9RMLpP2Y5R2QXaD98VK1oJVTauCzt8g.JPEG/%C1%A6%B8%F1%C0%BB-%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB-_1_-010.jpg?type=w2)
![[css 효과6.] 간단한 스크롤 효과 설정 scroll-snap](https://mblogthumb-phinf.pstatic.net/MjAyNDA3MjlfMjgg/MDAxNzIyMjE3MDIwMTk4.QeUc-POijkAgAkm9dTHM1Dq-KCoFnZXR7dib7NHpu0kg._-geb76I7qJm4qnwLKufcmw6LlWzkrUHKVqHwC8ficAg.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB-032.jpg?type=w2)
![[플러그인] bxslider 슬라이드 사용법, 옵션 정리, 커스텀](https://mblogthumb-phinf.pstatic.net/MjAyNDA0MzBfMTg4/MDAxNzE0NDY3Njk4MjA4.ruzxwmRJxNTlzfC9bgzYufopGpnJLjBuiWL77V7-ozog.PJxwOb9t_9MIC4JLoFYmLKoyt9-np-yEs_4qry0pu6Eg.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4_-003_%281%29.jpg?type=w2)