본문 바로가기
반응형

전체보기

마우스 홀드(클릭 유지) 이벤트로 애니메이션 구현하기 커스텀 커서와 프리로더를 사용한 홀드 트리거 인터랙션 만들기이 블로그 포스트에서는 커스텀 커서와 프리로더 버튼을 사용하여 홀드 트리거 인터랙션을 만드는 과정을 안내합니다. 이 인터랙션은 버튼을 눌러 확인하거나 기능을 잠금 해제하는 등의 시나리오에서 유용합니다. HTML, CSS 및 JavaScript를 사용하여 이 효과를 달성할 것입니다.See the Pen Mouse Hold Event by siimplelab (@siimplelab) on CodePen. HTML 구조먼저 기본 HTML 구조를 설정합니다. 커스텀 커서와 프리로더 섹션이 버튼으로 사용됩니다. HeaderCSS 스타일링다음으로, 요소들을 스타일링합니다. 커서는 마우스 움직임을 따라가고, 프리..
피그마 무료 리소스 - 대한민국 은행 로고 모음 (* 심이서 님이 작업해 주신 피그마 커뮤니티 파일을 널리 공유하고자 하는 블로그 포스트입니다.) 디자인 작업을 하다 보면 다양한 리소스가 필요합니다. 특히, 은행과 관련된 프로젝트를 진행할 때는 각 은행의 로고가 중요합니다. 오늘 소개할 무료 리소스는 대한민국의 주요 은행 로고를 모아놓은 피그마 커뮤니티 파일입니다.리소스 링크:대한민국 은행 로고 모음 피그마 파일이 리소스의 장점:무료로 사용 가능: 피그마 커뮤니티 파일로 누구나 무료로 접근하여 사용할 수 있습니다. 디자인 비용을 절약할 수 있는 좋은 기회입니다.고품질 벡터 이미지: 모든 로고는 고품질 벡터 형식으로 제공되며, 크기를 조정해도 해상도 저하가 없습니다.편리한 사용: 피그마 내에서 바로 수정하고 사용할 수 있어, 작업 효율성을 크게 높일 수..
HTML 테이블(Table)에 모서리 둥글기(border-radius) 적용하기 HTML에서 테이블에 Border-Radius 적용하기HTML에서 테이블에 border-radius를 적용하는 것은 테이블의 복잡한 구조 때문에 까다로울 수 있습니다. 이 포스트는 HTML과 CSS를 사용하여 테이블 모서리를 둥글게 만드는 효과적인 방법을 안내합니다.왜 테이블에 직접 Border-Radius를 적용하는 것이 어려운가?border-radius 속성을 요소에 직접 적용하면 기대한 대로 렌더링되지 않는 경우가 많습니다. 이는 브라우저에서 테이블을 렌더링하는 방식, 즉 , , 등 여러 중첩된 요소들 때문에 발생합니다.해결책: 컨테이너 사용하기테이블에 border-radius를 적용하는 가장 확실한 방법은 테이블을 컨테이너 요소로 감싸고 이 컨테이너에 border-radius를 적용하는 것입니..
Tabler (테이블러) 아이콘 (무료 아이콘 다운) Tabler 아이콘 소개: 여러분의 새로운 즐겨 찾는 아이콘 라이브러리디자인 세계는 끊임없이 진화하고 있으며, 신뢰할 수 있고 다재다능한 아이콘 라이브러리를 갖추는 것은 필수입니다. 오늘은 여러분의 디자인 도구 키트의 필수품이 될 Tabler 아이콘을 소개하게 되어 기쁩니다. tabler.io/icons에서 사용할 수 있는 Tabler 아이콘은 다른 아이콘 라이브러리와 차별화되는 다양한 기능과 이점을 제공합니다.Tabler 아이콘이란 무엇인가요?Tabler 아이콘은 1200개 이상의 고품질 SVG 아이콘을 무료로 제공하는 오픈 소스 컬렉션입니다. 간결하고 깨끗하며 일관된 디자인으로 웹 및 모바일 애플리케이션에 이상적입니다. 디자이너, 개발자 또는 프로젝트의 시각적 매력을 향상시키려는 사람이라면 누구나 T..
피그마 (Figma) 무료 템플릿 - 샤드시엔 (shadcn/ui) Shadcn/UI 디자인 시스템 Figma 템플릿 소개Shadcn/UI란?Shadcn/UI는 아름답고 접근 가능한 고도로 커스터마이징 가능한 웹 애플리케이션을 쉽게 만들 수 있도록 돕는 강력한 UI 컴포넌트 라이브러리입니다. Tailwind CSS와 Radix UI를 기반으로 구축되어, 유틸리티 우선 스타일링과 견고하고 접근 가능한 컴포넌트 디자인의 장점을 결합합니다.Shadcn/UI 디자인 시스템 Figma 템플릿Shadcn/UI 디자인 시스템 Figma 템플릿은 디자이너와 개발자가 일관되고 시각적으로 매력적이며 사용자 친화적인 인터페이스를 만들 수 있도록 돕는 귀중한 리소스입니다. Figma에서 제공되는 이 템플릿은 Shadcn/UI 프레임워크와 일치하는 사전 디자인된 컴포넌트와 스타일을 포괄적으로 ..
피그마 (Figma) 무료 템플릿 - Radix UI (래딕스 UI) Radix UI 및 Figma 템플릿 소개Radix UI란?Radix UI는 고품질의 접근 가능한 웹 애플리케이션을 쉽게 개발할 수 있도록 돕는 오픈 소스 컴포넌트 라이브러리입니다. 접근성, 커스터마이징, 개발자 경험에 중점을 두어 설계된 Radix UI는 모든 디자인 시스템에 맞게 조정할 수 있는 스타일이 없는 저수준 UI 컴포넌트를 제공합니다. Radix UI는 또한 TailwindCSS와 원활하게 통합되어, 유연하고 빠르게 스타일을 적용할 수 있습니다. 주요 특징:접근성: WAI-ARIA 디자인 패턴을 준수하여 포괄적인 사용자 경험을 제공합니다.커스터마이징: 스타일이 적용되지 않아 디자인에 완전한 제어를 할 수 있습니다.개발자 친화적: 일관되고 완전히 타입된 API를 제공하여 사용이 용이합니다.Ta..
CSS에서 z-index의 최소값과 최대값은 얼마일까? CSS에서 z-index의 최대 값 이해하기웹 개발에서 z-index 속성은 웹 페이지 요소의 쌓이는 순서를 관리하는 데 매우 중요합니다. 이를 통해 개발자는 요소가 다른 요소 앞에 나타나도록 제어할 수 있으며, 깊이와 계층 효과를 만들 수 있습니다. 하지만 종종 궁금해지는 질문은 CSS에서 z-index의 최대 값이 무엇인가 하는 것입니다.z-index란?CSS의 z-index 속성은 요소의 스택 순서를 지정합니다. z-index 값이 높은 요소는 값이 낮은 요소 앞에 나타납니다. z-index 속성은 위치가 지정된 요소(position 값이 static이 아닌 요소)에만 작동합니다.z-index의 최대 값기술적으로 CSS 명세서에 z-index의 명시된 최대 값은 없습니다. z-index 값은 양수든..
피그마 (Figma) 무료 템플릿 - 테일윈드 CSS 스타일 (Tailwind CSS Styles) Tailwind CSS 스타일를 기본 템플릿으로 써야 하는 이유웹 프로젝트를 진행한다고 할 때 이제 테일윈드는 거의 기본 구성처럼 자리를 잡기 시작했습니다. 'shadcn', 'radix' 등 테일윈드를 기반으로 한 UI 라이브러리들이 점점 더 많은 사람들에 의해 개발되고 이용되고 있으며, 테일윈드는 이제 조금 심하게 말해서 CSS의 기본 스펙처럼 여겨지고 있는 것 같기도 합니다. 이는 테일윈드가 부트스트랩 등의 기본 UI 라이브러리와는 다르게 프레임워크 형식으로 가장 미니멀한 구조만 제공하고, 그 위에 실제 컴포넌트를 구성하거나 이용환경에 맞게 변경하는 것은 전적으로 이용자에게 달려있는 특성 때문인 것으로 보입니다.테일윈드 공식 피그마 템플릿이 존재하는데, 이 또한 기본적인 레이아웃과 색상, 스타일에 ..
🖥️ 클라우드 메뉴판 : 디지털팝

티스토리툴바