피그마 무료 리소스 - 대한민국 은행 로고 모음 (* 심이서 님이 작업해 주신 피그마 커뮤니티 파일을 널리 공유하고자 하는 블로그 포스트입니다.) 디자인 작업을 하다 보면 다양한 리소스가 필요합니다. 특히, 은행과 관련된 프로젝트를 진행할 때는 각 은행의 로고가 중요합니다. 오늘 소개할 무료 리소스는 대한민국의 주요 은행 로고를 모아놓은 피그마 커뮤니티 파일입니다.리소스 링크:대한민국 은행 로고 모음 피그마 파일이 리소스의 장점:무료로 사용 가능: 피그마 커뮤니티 파일로 누구나 무료로 접근하여 사용할 수 있습니다. 디자인 비용을 절약할 수 있는 좋은 기회입니다.고품질 벡터 이미지: 모든 로고는 고품질 벡터 형식으로 제공되며, 크기를 조정해도 해상도 저하가 없습니다.편리한 사용: 피그마 내에서 바로 수정하고 사용할 수 있어, 작업 효율성을 크게 높일 수.. 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 라이브러리와는 다르게 프레임워크 형식으로 가장 미니멀한 구조만 제공하고, 그 위에 실제 컴포넌트를 구성하거나 이용환경에 맞게 변경하는 것은 전적으로 이용자에게 달려있는 특성 때문인 것으로 보입니다.테일윈드 공식 피그마 템플릿이 존재하는데, 이 또한 기본적인 레이아웃과 색상, 스타일에 .. 접근성 준수 컴포넌트 - 이미지 (테이블 대체 텍스트 만들기) 테이블이 포함된 이미지는 대체 텍스트 구성이 쉽지 않습니다. 헤더가 포함된 테이블이 경우 각 값들을 헤더의 내용과 매칭시켜 줘야 하기 때문입니다. 'table' 태그로 텍스트를 추출해서 숨김처리하여 스크린리더가 읽게 하는 것을 생각할 수 있지만, 아쉽게도 대부분의 스크린리더는 랜더링되지 않는 'table' 태그는 소리내어 읽지 않습니다. GPT를 활용하거나 직접 입력하여 테이블 내용을 리스트 정보로 변환테이블 태그는 읽지 않지만, 리스트로 변환된 정보는 스크린 리더가 잘 읽어 줍니다. 일일히 텍스트를 타이핑할 수도 있으나, 너무 작업량이 많으니 GPT를 활용해 보도록 합니다. 이미지를 업로드한 이후에 GPT에게, '이 이미지 속 테이블 정보를 리스트 형태로 구성해서 HTML로 만들어 줘'라는 식의 프롬.. 이전 1 2 3 4 5 ··· 32 다음
