웹 개발/HTML, CSS3 css filter 속성으로 이미지 블러처리 구현하기 오늘은 css filter 속성을 사용해 배경 블러처리 구현하는 방법에 대해 정리해보겠습니다. .container { display: flex; } .box { width: 100px; height: 100px; background: no-repeat url("./img_1.png") 0 / cover; } .box + .box { margin-left: 20px; } 해당 경로에 이미지는 아무 이미지나 넣어주면 됩니다. 그런 상태로 실행시키면 아래처럼 노출되는데요. filter 속성 블러처리는 시각적인 효과를 주기 위해서 많이 사용하고 있지만 브라우저 지원 범위가 좁아서 많이 사용하지는 못하는데요. 이 글에서는 filter 속성을 사용해서 블러처리를 구현해보려고 합니다. .container { disp.. 2020. 11. 18. 페이지 스크롤 다운 애니메이션 (feat. Animation of scroll) 오늘은 페이지 스크롤 다운 애니메이션을 어떻게 만드는지에 대해서 알아보려고 합니다. 페이지 스크롤 다운 애니메이션이 뭘까? 이것처럼 스크롤을 내릴 때 효과를 줘서 fadein, slidein, slideup 과 같은 동작을 할 수 있게 하는 애니메이션 입니다. 직접 자바스크립트를 사용해서 개발할 수 도 있지만 똑똑하신 분들이 만들어 놓은 라이브러리가 굉장히 많기 때문에 오늘은 그 라이브러리를 사용하는 방법에 대해서 정리해보려고 합니다. 페이지 스크롤 다운 애니메이션 라이브러리 WOW.js Animate.css * AOS kissui scrolltrigger 여기서 AOS를 사용하는 방법을 정리해보겠습니다. 사이트를 가보면 아래와 같이 다양한 페이지 스크롤 다운 애니메이션 종류들을 확인하실 수 있습니다. .. 2020. 6. 13. CSS Grid 이해하고 사용하기 이 글은 CSS Grid에 대한 이해를 돕는 글입니다. 자세한 속성과 사용법에 대해서는 참고 사이트 확인해주세요. Grid 가 나오는 이유는 무엇일까? Grid를 도대체 왜 사용해야하는지 알아야 어떤 상황에 어떻게 사용할지 정해지기 때문에 알아보겠습니다. 결론부터 말씀드리면 기존에 float를 이용해서 레이아웃을 만들 때는 수직 즉, 세로 방향에 대해서 만들기 어려움이 있었습니다. 이런 어려움을 해소시키기 위해서 나온 것이 *flex *입니다. Flexbox를 이용해서 레이아웃을 작성하게 되면 수평 혹은 수직 구조를 작성할 때 보다 쉽게 작성할 수 있었습니다. 하지만 수평과 수직 구조를 동시에 작성하기에는 Flexbox를 이용하는데에도 한계가 있었습니다. .flex_container { width: 50.. 2020. 6. 13. 이전 1 다음
