CSS backdrop-filter:blur를 활용한 예제소스 이번 포스팅에서는 CSS의 backdrop-filter:blur 속성을 활용하여 간단하지만 매력적인 메뉴바를 구현하는 방법을 소개합니다. 이 메뉴바는 현대카드를 베이스로 작업하여 이미지와 컨셉을 활용했습니다. backdrop-filter:blur 속성을 사용함으로써 메뉴바에 심플하면서도 매력적인 느낌을 더해줍니다. 1. 폰트가져오기 처음 두 줄의 코드는 구글 폰트를 가져오기 위한 것입니다. 웹페이지에서 사용할 폰트를 미리 연결하여 사용할 수 있도록 하는 코드입니다. 2. 메뉴바 … Read more

제이쿼리(jQuery)를 활용하여 스크롤에 반응하는 인터렉션 효과 이번 포스팅에서는 몇 가지 간단한 단계만으로 간편하고 매력적인 인터렉션 효과를 구현해 보도록 하겠습니다.구현할 효과는 제이쿼리(jQuery)를 사용하여 스크롤에 반응하는 회전하는 인터렉션이며이러한 효과는 웹 페이지에 사용자가 웹페이지에 흥미를 느낄 요소가 높으며 그로 인해 사이트에 대한 체류시간을 높일 수 있습니다. 먼저 인터렉션을 줄 요소를 작성해줍니다. SVG 코드를 불러오는 방법은 이전 포스팅을 참고해주세요(바로가기) … Read more

CSS 애니메이션(ANIMATION) 활용하여 간단하지만 포인트있는 인터렉티브 웹사이트 구현 이번 포스팅에서는 CSS 애니메이션(ANIMATION) 활용하여 SVG 아이콘에 인터렉션 효과를 부여하는 방법을 예제 소스와 함께 알아봅시다.간단한 아이콘이라도 사용자와 상호작용을 하여 모션 반응이 일어나면 사용자의 웹사이트에 체류시간을 늘리고 흥미를 유발하는 효과를 기대할 수 있습니다.이번 튜토리얼에서는 몇 가지 간단한 단계만으로 멋진 인터랙티브한 SVG 아이콘을 만들어보겠습니다. 먼저 사용할 SVG 코드를 HTML … Read more

일러스트레이션(illustration)에서 SVG 이미지가 아닌 SVG 코드로 불러오는 방법 이번 포스팅에서는 일러스트레이션(illustration)을 활용하여 SVG 이미지를 불러오는 방식이 아닌 SVG 코드로 변환해 html에 작성하는 방법을 배워보도록 하겠습니다. SVG란? SVG(Scaleable Vector Graphics)는 벡터 그래픽을 기반으로 이미지를 그리는 XML 기반의 포맷으로, 웹 페이지나 앱 등에서 그래픽 요소를 표현하는 데 사용됩니다. SVG를 이미지 파일이 아닌 코드로 작성했을 경우의 장점 다양한 … Read more

클릭 시 접힌 이미지가 펼쳐지는 갤러리 구현하기 이 포스팅에서는 제이쿼리(jQuery) 사용하여 독특한 이미지 캐러셀를 만들어보겠습니다. css blur 효과와 이미지 그리고 간단한 텍스트 배치를 통하여 간단하지만 시각적으로 독특한 퍼포먼스를 보여줄 수 있습니다. HTML HTML 코드에서는 전체를 감싸는 “#content” 요소에 “.grid-box” 를 배치합니다.“.grid-box” 안에는 이미지와 텍스트를 감싸고 있는 “.box” 요소를 나열합니다. CSS CSS 스타일링을 통해 이미지와 텍스트가 … Read more