[css, js] focus blur 효과(with. clip-path, blur)
css의 clip-path, blur 속성을 사용해 focus blur 효과를 만들어보자! 1. 미리보기 See the Pen by KumJungMin (@kumjungmin) on CodePen. 2. 코드 분석 1) html 전체를 감싸는 부모를 만들기 위해 을 선언한다. section의 자식으로 box1, box2, circle을 생성한다. circle은 미리보기에 있는 돋보기 역할을 한다. 두 box클래스는 같은 이미지와 자식을 가진 html로, 겹쳐서 사용된다. focus focus 2) css (1) (1) 내부 요소 중앙 배치시키기 wrap내부와 box내부의 요소들이 수직, 수평 중앙 배치시키고자 한다. 먼저 display:flex를 설정한다. 그 다음 수평 중앙 정렬을 위해 justify-..
2021. 10. 2.
