달망이 삽질인생

SVG4

Sveltekit에서 tailwindcss와 SVG를 사용할때, 마우스 오버로 색상 쉽게! 바꾸기 sveltekit의 경우 svg 처리가 좀 ....깔끔하게 처리가 안된다 생각했는데이번에 그나마 편한 방법을 찾게되어 글을 쓴다 기존에 하던 작업은 조금 번거로웠고이번에 들.... 번거로운 방법을 소개할까한다. static-adapter로 구동되는 경우는 https://github.com/poppa/sveltekit-svg이 패키지를 사용하면 되고, ssr를 사용하는 adapter의 경우는..... 제가 설명드리는 방법이 그나마 편했습니다. svg 예제 이미지 svg 예제 코드 내부 티스토리에서 svg파일을 첨부하면 이미지로 변경되서, 파일 제공이 안되니.. 텍스트를 복사해다가 써보세요 사전 지식SVG의 진한 벡터 선들은 로 되어 있습니다.그래서 그 선들을 tail..

앱 개발용 Zeplin SVG 추출 (최적화 끄기) android, ios를 개발 할때는 일반적으로는 화면 사이즈 마다 png 이미지를 준비해줍니다. 물론 svg(벡터이미지)를 할 수 있지만 생각보다 앱이 느려져서 꺼리고 있습니다. flutter도 svg를 이용하면 느려지는건 마찬가지지만, 최적화보다는 생산성에 맞춘 프로젝트라고 생각하여 svg를 이용해 보겠습니다. 그렇다면, 앱 개발을 할때, 디자인 파일을 어떻게 하면 쉽게 가져올까요? ui/ux 제작툴인 Zeplin을 이용하면 디자이너가 작업한 벡터파일을 개발자가 손이 발이 되도록 싹싹 빌지 않아도 손 쉽게 다운받을 수 있습니다. 이미지를 클릭하면 Assets을 여러종류로 다운받을 수 있습니다. SVG 옆에 있는 다운로드 버튼을 누르면 끝~! 다운받은 svg 파일 코드 하지만 이렇게 받은 svg 파일은..

Flutter Icon, Asset PNG, SVG, NetworkImage, Gif, Loading... 지난번 Widget 게시글 https://dalgonakit.tistory.com/100 Flutter Hello Widget! | Text Example, Button Example 지난 게시글 https://dalgonakit.tistory.com/99 Flutter 프로젝트 만들고 실행하기 | VSCode 지난번 게시글 Flutter 시작하기 | MacOS에서 VSCode로.. 안드로이드와 아이폰은 개발한지도 오래 됬는데.. 최근 회사.. dalgonakit.tistory.com 들어가기 전에 Text Widget과 기타 Widget을 써보니 이제 flutter에서 이미지는 어떻게 넣는지 궁금해졌습니다 이미지는 Icon, Asset(Resource)에 있는 Image, Network에 있는 이미지를..

안드로이드 어댑티브 (적응형) 아이콘 / 개념부터 적용까지 배경 | 앱 아이콘 모양의 파편화 먼저, 오늘자로 올라온 구글 플레이 인기 순위만 보더라도 정말 많은 어플들이 서로 다른 모양(텍스트형, 아이콘형, 네모난 배경, 라운드 배경, 동그란 배경 등)을 가지고 있는걸 볼 수 있습니다. 앱 들이 자유로운 아이콘을 사용할 수 있는 것 까진 좋았지만, 앱의 개성을 서로 뽐내기 위해 만들어진 아이콘이 실제 사용자의 폰에서 설치하고 나면 지저분하고 한 눈에 안들어오기도 합니다. (반대로 지저분해서 눈에 들어오는 경우도 있습니다) 역사 | 수 년 간의 노력들 구글도 초창기엔 다른 앱과 다름없이 기능을 이해시키기 위한 아이콘 위주로 만들다 보니 서로 다른 크기와 모양을 가진 아이콘을 사용했습니다. 2012년엔 앱 개발자가 직접 획일화를 해결해주길 바라면서 런처 개발이 가능..

이전 1 다음

티스토리툴바