SVG
-
[svgr] SVG 아이콘 컴포넌트 생성 :: 마이구미알아두면 좋은 라이브러리 2022. 1. 28. 22:56
이 글은 svg 아이콘과 관련된 라이브러리 SVGR 을 다룬다. 리액트에서 아이콘을 svg 파일로 관리하는 경우 도움을 줄 수 있는 라이브러리이다. 글에서 소개하는 예제들은 각 tag 를 checkout 을 통해 확인할 수 있다. 예제 - https://github.com/hotehrud/svgr-example 조금이나마 도움을 줄 수 있는 라이브러리들을 소개하는 카테고리로 분류된 글이다. 알아두면 좋은 라이브러리 SVGR 은 svg 파일을 React 컴포넌트로 변환시켜주는 라이브러리이다. 원본 svg 와 svg 를 React 컴포넌트로 변환한 코드를 각각 확인해보자. // icon.svg // Icon.tsx import * as React from "react"; const SvgAc = (props..
-
ProgressBar 구현하는 3가지 방법 :: 마이구미HTML, CSS 2018. 2. 8. 00:55
이 글은 ProgressBar 구현에 대해 다뤄본다.ProgressBar는 "진행바" 라고 불린다.웹사이트 및 앱 개발 등 많은 개발에서 보여지고 있다.우선 글에 앞서, 편의상 진행바라고 표현하겠다. 예제 - (https://codepen.io/mygumi/pen/EQypKX) 진행바는 크게 3가지로 구현할 수 있다. HTML tag (div, span, etc)HTML5 progress tagSVG div 나 span 으로 구현하는 방식이 일반적인 방법이다.HTML5 에서는 태그로 지원을 하는 것을 볼 수 있듯이, 웹 개발 시 많이 이용한다는 것을 알 수 있다.SVG 태그를 통해 구현하는 방식 또한 존재한다. 3가지 구현 방법에 대한 구현 예제는 다음과 같다. See the Pen progressbar..
-
SVG 는 언제 써야하는가? :: 마이구미웹 관련 2018. 1. 14. 22:13
이 글은 이미지 파일 포맷 방식인 PNG 와 SVG를 비교하면서 SVG 를 알아가는 글이 된다.개발 시 이미지 파일은 대부분 .png를 사용하고 있어, .svg 를 모르는 경우도 많이 존재한다.모르더라도 크게 도움이 될 것이니 읽어보길 바란다.참고 링크 - https://stackoverflow.com/questions/24433640/svg-icons-vs-png-icons-in-modern-web-sitessvg 응용 - https://codepen.io/collection/DKaZba/ 먼저 기본적인 이해를 위해 무엇인지 알아보자.PNG 와 SVG 의 가장 큰 차이점은 이미지를 구성하는 방식이다.PNG 는 화소(pixel) 단위로 구성되는 형태로써, 비트맵 방식이라고 불린다.SVG 는 수학을 기반으..
-
워드프레스 Fontello 아이콘 추가 :: 마이구미HTML, CSS 2016. 11. 30. 21:32
이번 글은 웹 폰트 이라는 주제이다. 사실 Font Awesome, Entypo, Fontello 등등 많다. 일단 대중화되어 알고 있는 Font Awesome 용어로 통일화하겠다. 들어본 적이 있는가? 일단 확률이 높지 않은 예이지만 한번 들어보겠다. 혹시 사이트 이미지가 궁금해 소스를 깠는데 까도까도 이미지 경로가 보이지 않은 적이 있는가? 혹시 위와 같은 경우를 겪은 적이 있는가? 이미지의 css가 content: '\e893' 이라고 설정되어있다. 이것을 없애면 이미지가 없어질 것이다. 궁금하다면 아래의 링크를 통해 한번 해보아라. http://erunspace.com/ Font Awesome이란 무엇인지 한번 살펴보자. 간단히 Font Awesome의 정의는 아래와 같다.Font Awesome ..