# svg

40개의 포스트

[엄청 늦은 TIL]RN FlatList, AsyncStorage,SVG

기업 협업 부터, 취업 준비까지 핑계를 대자면 엄청 바쁘게 달려오다보니 해야지해야지 하던 블로깅이 무려 한달가까이 늦어버렸다.... 처음에는 '글의 퀄리티를 좀 높여서 블로깅을 해야지'라는 생각이었는데 내 기준으로 봤을 때 꾸준하지 못한게 더 악영향.. 조만간 깃블로그

2021년 9월 7일
·
0개의 댓글

기술 면접 예상 질문

1) svg 파일 안에 해당 svg를 정의할 영역을 def로 지정한다. 2) 지정된 def 영역 안에 고유한 id를 지닌 symbol들을 정의한다. 3) 정의된 icon을 사용하기 위해서 use를 사용한다. use를 사용해 해당 아이콘의 아이디 값을 연결하여 html

2021년 9월 1일
·
0개의 댓글

Create React App에서 SVG 파일을 간단히 불러오는 방법

아래와 같이 불러오면 컴포넌트처럼 활용할 수 있다.arrow.svg를 ReactComponent로 불러오고 이름을 Arrow로 바꿔서fill이나 width 같은 속성을 넣을 수도 있다.

2021년 8월 21일
·
0개의 댓글
post-thumbnail

Inkscape를 이용한 svg path 합치기

자잘한 지도 svg path들을 합쳐보자

2021년 8월 21일
·
0개의 댓글

SVG Animation

최근에 제플린을 사용하게 되면서 SVG 파일을 쉽게 다운로드할 수 있게 되었다 SVG를 활용해서 모션을 쉽게 구현할 수 있는 방법에 대해 공부해보자 SVG 장점 SVG는 벡터이미지로 확대해도 깨지지 않는다 같은 이미지를 사이즈/색상 변경해서 재사용하기 쉽다 기존

2021년 8월 18일
·
0개의 댓글
post-thumbnail

벡터 그래픽 , Figma 사용해보기

레스터 : 미세한 무수히 많은 점(픽셀,화소)이 모여서 그림벡터 : 점과 점 사이의 곡선으로 이미지를 구성하는 방식으로, 마치 수학 공식처럼 이미지의 형태를 구성하는 다양한 선들의 좌표와 수치 정보를 바탕으로 이미지를 화면에 표시SVG 다운로드GIF 다운로드SVG 만

2021년 8월 10일
·
0개의 댓글

다방 클론 코딩 - 1

svg, hoc, react nice dates, git organization

2021년 7월 20일
·
0개의 댓글

create-react-app에서 SVG를 ReactComponent로 사용하기

create-react-app(이하 CRA) + electron 환경에서 작업 중에 svg icon 파일을 사용해야 하는 경우가 생겼다. (state에 따라 색상 등을 다르게 주는 등의 작업을 위해..)사실 이전에도 버튼 안에 svg icon을 넣는 것을 시도해보았으나

2021년 7월 12일
·
0개의 댓글
post-thumbnail

React | SVG 파일 효율적으로 활용해보자

React | SVG 파일 효율적으로 활용해보자 프로그래머스 웹페이지를 클론하면서 여러 이미지를 활용해야하는 부분이 있었다.

2021년 7월 6일
·
0개의 댓글

[Webpack & Babel] svg import시 Unexpected token 에러 해결하기

webpack에서 build 과정에서 svg 파일을 처리할 loader가 필요하다는 내용의 에러가 발생했다.img src에 이용하는 경우 (기존의 png나 jpg 이미지를 가져오는 방식)svg를 React 컴포넌트로 사용하기svgr을 통해 React Component로

2021년 6월 25일
·
0개의 댓글
post-thumbnail

TIL 리엑트에서 SVG 사용하기

ReactComponent로 SVG 사용하기

2021년 6월 13일
·
0개의 댓글
post-thumbnail

스타일링 중에 생긴 일 1

리액트를 하면서 오랜만에 css를 했다.스타일링은 니꼬쌤이 클론 해보라고 보내준 behance의 웹디자인을 따라했다.따라하던 중 '아.. 이거 js로 따로 해야하나?' 싶었던 것이 아래 기능이었다.기능은 두가지 였는데1\. 각 메뉴에 hover하면 border-left

2021년 6월 8일
·
0개의 댓글
post-thumbnail

꺾쇠 멈춰! 첫 npm/yarn 패키지 배포기

서론 오늘 아침에 방 청소를 업체에 맡기고 잠시 나가있는 동안 잠깐 할 수 있는 일이 없을까 하는 생각이 들었습니다. 문득 회사에서 직접 만든 컴포넌트 중에 오픈소스화 할 수 있을 것 같은 컴포넌트가 있어서, 패키지로 배포해볼까 하는 생각이 드는 것이 있었습니다. 그

2021년 5월 15일
·
0개의 댓글
post-thumbnail

svg string convert to blob

Blob은 Binary Large OBject로서 binary data의 콜렉션으로 생각하면된다.Blob자바스크립트에서 Blob은 immutable file-like object이고, File 인터페이스도 Blob을 기반으로 한다. 🙂🙂🙂svg string을 bl

2021년 5월 8일
·
0개의 댓글
post-thumbnail

Web에서 사용하는 Image들

웹에서 사용되는 이미지들은 크게 비트맵(Bitmap)과 벡터(Vector)로 나눌 수 있다. 비트맵 이미지는 레스터(Raster) 이미지라고도 부르는데 픽셀이 모여 만들어진 이미지이고, 벡터 이미지는 점, 선, 면의 위치좌표 값, 색상 등의 수학적 정보들로 이루어진

2021년 4월 23일
·
1개의 댓글

Squircle (스쿼클)

요즘 네모도 아니고 동그라미도 아닌 스쿼클을 많이 쓰는 것을 볼 수 있다.스쿼클은 svg파일을 이용해 코딩하는 것이 가능하다.Ex)!codepenroghabo/embed/dyNgYjM?height=265&theme-id=dark&default-tab=html,resul

2021년 4월 20일
·
0개의 댓글
post-thumbnail

[React] React에서 SVG 활용하기

React 프로젝트에서 PNG? JPG? 아니요, SVG!

2021년 4월 8일
·
10개의 댓글
post-thumbnail

[HTML] HTML SVG

svg 태그에 대해 알아보겠습니다😉

2021년 4월 6일
·
1개의 댓글
post-thumbnail

Snap.svg 시작하기

어제 작성한 "랜덤 숫자에 따라 SVG 출력"의 애니메이션은 많이 어색하다.컵을 그리기 시작할 때, svg가 그려지는 원리조차 몰랐기 때문에 path를 이용해서 한땀한땀 그려냈는데, 이젠 완성도를 위해서 snap라이브러리를 사용하려고 한다.(Snap.svg에서는 SVG

2021년 3월 23일
·
0개의 댓글
post-thumbnail

랜덤 숫자에 따라 SVG 출력

네개의 컵에 단계가 다른 물을 준비한다. 1단계부터 4단계까지 있으며, 단계가 올라갈수록 컵에 물이 차오르고, 물의 색은 위험을 나타내는 붉은색을 띈다.가장 높은 단계인 4단계에서는 물이 넘치면서 살짝 튀기는 모습도 구현했다.(어색하지만,,😢)준비한 물은 다음과 같다

2021년 3월 22일
·
0개의 댓글