ux dev

Javascript의 백틱을 활용한 Template Literals는 여러모로 유용한데, 그 중 여러 줄의 마크업 코드를 쉽게 작성하고 관리할 수 있다는 점도 들 수 있습니다. 다만 포매터나 하이라이트가 없는 상태가 기본이기 때문에, 기본 상태로는 코드 가독성이 매우 낮다고 볼 수 있습니다. 손쉽게 자바스크립트 Template Literals 속에 있는 HTML을 포맷팅하고 하이라이팅 할 수 있는 방법을 안내하고자 합니다.템플릿 리터럴(Template Literals) 속 HTML 포맷팅 하기일단 Prettier를 사용할 수 있는 환경이 준비되어야 합니다. VSCode를 사용한다는 가정하에 Prettier 익스텐션을 먼저 설치해 주셔야 합니다. 이후 Formatter의 선택도 Prettier로 해 주셔야..

See the Pen Scroll Events for Elements by siimplelab (@siimplelab) on CodePen. 스크롤 시 리스트 항목 강조웹 경험을 더욱 매력적이고 상호작용적으로 만드는 데에는 애니메이션과 동적 요소를 사용하는 것이 중요합니다. 그 중 하나는 스크롤 이벤트를 사용하는 것으로, 사용자가 페이지를 스크롤할 때 애니메이션이나 변화를 트리거할 수 있습니다. 이 튜토리얼에서는 스크롤 위치에 따라 리스트 항목을 강조하는 예제를 통해 스크롤 이벤트를 활용하는 방법을 알아보겠습니다.아래는 동물 이름을 강조하는 스크롤 트리거 애니메이션을 만드는 전체 HTML, CSS 및 JavaScript 코드입니다.HTML 구조HTML 구조는 동물 이름의 간단한 리스트로 구성됩니다. 리..

Formspree는 웹사이트에서 폼 제출을 처리하는 과정을 간소화하는 강력한 서비스입니다. 서버사이드 코드를 작성할 필요 없이 사용자의 데이터를 수집할 수 있도록 도와줍니다. 이는 백엔드 인프라를 유지할 필요 없이 빠르고 효율적인 방법으로 폼 제출을 처리해야 하는 개발자와 비개발자 모두에게 훌륭한 선택입니다. 이 블로그 포스트에서는 Formspree를 소개하고 웹사이트에 이를 활용하는 기본적인 방법을 제공하겠습니다.Formspree란 무엇인가요?Formspree는 폼 제출을 쉽게 캡처하고 처리할 수 있는 폼 백엔드 서비스입니다. 각 폼에 고유한 엔드포인트 URL을 제공하며, 사용자가 제출한 데이터를 이 URL로 보낼 수 있습니다. Formspree는 이 데이터를 처리하여 이메일로 전달하거나 검토할 수 있..