mix-blend-mode 란? 포토샵에서 blend 모드와 유사한데 레이어를 겹쳐서 색상에 대한 효과를 주고 싶을 때 사용한다. mix-blend-mode 사용법 html 구조 div를 여러개 만들어주고 제목(h1)과 이미지(img) 넣기 * div 여러개 생성하는 이유는 색깔에 다른 변화를 확인하기 위해서 !
![[css 효과7.] 배경에 따라 바뀌는 요소 mix-blend-mode](https://mblogthumb-phinf.pstatic.net/MjAyNDA3MjlfMjgy/MDAxNzIyMjMxNDgzMzg1.ADAvhpU8Z3ucoVOFnWGUcdN8r8ycntCwjj44pjLdp4Ug.pkHWq_yjAYYoBABVbhoofRkv5ED11rks_EWq47WwKWog.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_%281%29.jpg?type=w2)
#
cssblend
#
cssmixblendmode
#
css배경효과
#
css색깔효과
#
css효과
#
css효과사용
![[공유] CSS 정리](https://mblogthumb-phinf.pstatic.net/MjAyNDAzMjRfMjc4/MDAxNzExMjU4ODc5NzQ5.x3XJGvNpZNVo1C9-ROFbefy5Oxr_R4crBw1W10ppoM8g.Cw744GmQrQmcnKKaV_iR5yUlc8Hdou9ooA60IovlQ2Ag.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4_-002.jpg?type=w2)
![[웹디자인기능사] 필기 시험 정보 & 핵심 정리](https://mblogthumb-phinf.pstatic.net/MjAyNDAzMjVfMTA4/MDAxNzExMzY5Njg1MjMz.o13HSyoAfbRQZ2ahcawc64gqmAxjwKWRUvjLy-A5gSQg.T8XQEOjBCb3J7OCFYFTgR4R0MFvYQwRnniTSAOGfzAcg.JPEG/%C0%A5%B5%F0%C7%CA%B1%E2%C1%A4%B8%AE.jpg?type=w2)
![[공유] notion 으로 10분만에 포트폴리오 사이트 제작하기 (+단축키)](https://mblogthumb-phinf.pstatic.net/MjAyNDA0MTBfMTgz/MDAxNzEyNjc3NzM1MDE4.vA0_InQlDJeni-nGubGS7FANRfLvgyNFZyjwue6fILcg.Xc00TChWowWOBwMbn6S6HI0nd4bN19fBiUNGA2rFbU8g.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-003.jpg?type=w2)
![[html 2.] html 파일 만들기 & 시맨틱태그로 html 구조짜기 & 특수문자(entity code) 넣기](https://mblogthumb-phinf.pstatic.net/MjAyNDA0MTVfMjAy/MDAxNzEzMTY4MDg0NTAz.S4QHNP9diplib3KrLeCszM-h0Y0AlX4Qqp1rFiCcvPwg.Th8c4CGoxsiuMBW9HyWmMxXyeYNHn7Laf2KvUZ--UXEg.JPEG/006.jpg?type=w2)
![[라이브러리] skrollr 이용한 스크롤 이벤트 효과](https://mblogthumb-phinf.pstatic.net/MjAyNDA1MjFfMTIg/MDAxNzE2MjcwMzg3MDE3.zTJ9-UrcpILcpwnhblpQLwdUPAtAiHUKLO2vxx3AmtUg.KmVEnYVmxns8BEuKMZuCLhnjBFsh-3ks4TEhIZOrI2Eg.JPEG/%C1%A6%B8%F1%C0%BB-%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4_-005.jpg?type=w2)
![[javascript 6.] 자바스크립트 연산자](https://mblogthumb-phinf.pstatic.net/MjAyNDA2MTFfNjMg/MDAxNzE4MDM3MDkzMTcx.CkGhv-wj0pk13uWvusmkH7Yo93OSpRDo6HdIt0FQ6Owg.6WYwKBckCarfJB_pVijx40diVb62nLQwYZw0kP_p27Qg.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_%281%29-006.jpg?type=w2)