# svg

115개의 포스트
post-thumbnail

멋사_프론트엔드스쿨_3기 DAY-18

멋사_프론트엔드스쿨_3기 DAY-18

3일 전
·
1개의 댓글
·
post-thumbnail

# HTML 심화

문서가 어떤 형식과 버전으로 작성되었는지를 명시선언시 standards mode(최신 형식)로 문서 실행비선언시quirks mode(옛날 브라우저를 모방)로 문서 실행브라우저의 탭에 표시됨. 즐겨찾기 제목&검색결과 제목으로 표시됨.오늘날에는 .png .gif 파일로 파

5일 전
·
0개의 댓글
·
post-thumbnail

피그마로 svg 파일을 다운받으면서 생긴 문제점

깃허브 로고가 두 개가 나란하게 보인다.왜 똑같은거를 두개나 썼지..? 가 아니라코드를 보면 알겠지만 다른 것을 임포트했다.임포트 방식에는 문제가 없는데 어디에서 문제가 생긴 것인지 찾아봐야겠다.참고로 위의 방식은 svg 파일을 컴포넌트로 불러와서 props를 통해 s

2022년 9월 15일
·
0개의 댓글
·

React+typescript에서 svg 사용하기

React와 typescript를 사용하여 개인 프로젝트를 진행하는 중 svg를 사용하기 위해 아래와 같이 작성하였다. 문제 발생 해당 모듈을 찾을 수 없다고 나타나고 있다. 아마도 Webpack이 js 파일은 이해하지만 ts는 이해하지 못하여서 발생한것 같다.

2022년 9월 14일
·
0개의 댓글
·
post-thumbnail

리엑트 프로젝트에서 아이콘 다루기

이번 글에서는 React 프로젝트를 진행하는 경우 아이콘을 svg로 다루는 방법에 대해 소개하려고 한다. 아이콘을 다루는 방법은 다양하지만 왜 아이콘을 svg로 사용해야하는지에 대해 먼저 알아보도록 하자. 아이콘을 import해 사용할 수 있는 방법은 확장자를 p

2022년 9월 13일
·
0개의 댓글
·

SVG viewBox

https://tecoble.techcourse.co.kr/post/2021-10-24-svg-viewBox/

2022년 9월 8일
·
0개의 댓글
·

[리액트를 다루는 기술] todoList와 items를 svg와 & 활용하여 scss 다루기

min-height와 max-height로 최소 최대 높이 지정overflow-y: auto로 513px 넘어가면 스크롤바 생성flex의 align-items: center로 중앙 정렬&:nth-child()의 매개변수로 원하는 숫자나 식을 넣으면 해당 값에만 css

2022년 9월 7일
·
0개의 댓글
·
post-thumbnail

svg 이미지 - css연결, 효과주기

hover시, svg의 fill이 변하도록.. 만들어보자!svg 시작 태그 밑에 svg의 css파일 선언 링크 달아주기.(파일의 위치는 같은 폴더에 해주었다.)path 태그에 class 명을 넣어줌. ※여러 path가 있는 svg이미지 일 경우, path마다 class

2022년 9월 5일
·
0개의 댓글
·
post-thumbnail

[D3.js] svg 지도 파일을 활용해서 나만의 지도 만들기! #2

d3.js로 코드를 만들어 나가는것도 흥미로웠는데, 이 부분은 좀 더 배워서 들고와야겠다...! [D3.js] svg 지도 파일을 활용해서 나만의 지도 만들기! #1에서 코드에 svg파일을 넣으면 화면에 이렇게 나올 것이다. svg 파일에서 background-

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

Next에서 svg 사용하는 방법

next 환경에서 svg를 사용하려고 react svg를 검색해서 해봤지만 잘 안되었는데, next에서 사용할 수 있는 방법이 따로 있었다. 설치 next.config.js 수정 svg 가져오기 svg 파일 셋팅 /public/icons/right_arrow.svg 이렇게 생긴 svg 파일이 있다. 값을 받아서 쓰고 싶은 부분을 "current"로 ...

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

SVG

확장가능한 벡터 그래픽 (벡터 이미지는 Pixcel이 아닌 점과 점 사이를 계산하여 그리는 이미지)픽셀을 이용하여 그림을 그리는 png jpg 파일들과 다르게 벡터를 기반으로 이미지를 표현XML 포맷으로 파일이 작성되므로 HTML, JS, CSS로 조작이 가능합니다.

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

[D3.js] svg 지도 파일을 활용해서 나만의 지도 만들기! #1

4개월 간의 부트캠프가 끝이 나면서 2차 프로젝트도 마무리 되었다. 이번 2차 프로젝트에서는 나만의 경로를 지도에서 만들어서, 경로에 대한 추억을 기록하는 여행 기록 웹페이지를 제작하였다. 이번 프로젝트에서 맡은 부분 중에서 재밌었던 부분은 svg지도 파일을 활용해서

2022년 8월 7일
·
0개의 댓글
·
post-thumbnail

이모지를 파비콘으로 사용하기

notion 클론코딩 프로젝트를 하면서, 페이지의 아이콘으로 사용된 string 타입의 이모지를 어떻게 하면 파비콘으로 사용할 수 있을까 고민하며 열심히 검색해 찾은 방법과 공부한 내용을 정리해보려 한다. 우선 파비콘이 무엇이고 어떤 형식이 파비콘으로 쓰일 수 있는지

2022년 8월 2일
·
0개의 댓글
·
post-thumbnail

구글 ICON 등 채우기 색 변경하기

SVG아이콘 파일 다운로드(SVG : 태그를 이용하여 파일의 속성(색상) 등을 변경 가능하게 함.)illustrator 실행 후 SVG 파일 OPENWindow -> color 선택변경하고자 하는 색으로 바꿔주기 -> 저장Visual Studio Code에서 style

2022년 7월 25일
·
0개의 댓글
·
post-thumbnail

2022/07/20 수요일

일상

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

SVG 컴포넌트로 따서 사용할 때 수정 방법

\-r 등 -뒤에 소문자는 모두 카멜케이스로 변경.ex) style-lof => styleLofStyle 부분은 전부 style={{        maskType: 'alpha',      }}이런 식으로 변경하기.기존 -> style="maskType:alpha"수정

2022년 7월 13일
·
0개의 댓글
·
post-thumbnail

Today I Learn 20220709

Today I Learn 20220709

2022년 7월 9일
·
0개의 댓글
·
post-thumbnail

SVG element

헷갈려서 정리해둠.view-port란, 실제적으로 랜더링되는 이미지의 크기view-box란, view-port 내부에서 설정되는 좌표 평면으로, 여기서 설정되는 크기 자체가 랜더링되는 픽셀과는 다름.예를 들어, view-box의 크기가 100px(정사각) 이고, vie

2022년 6월 22일
·
0개의 댓글
·
post-thumbnail

SVG 파일을 React + TypeScript 에서 사용하기

대표적으로 2가지 방법으로 React에서 SVG 파일을 사용할 수 있습니다.그 중 전 2번째 방법 사용하기로 결정하였습니다. 🤗props로 값을 받아 다양한 크기, 색상을 사용할 수 있다는 장점이 존재하여 선택TypeScript Compiler에서 해당 모듈을 찾지

2022년 6월 17일
·
0개의 댓글
·
post-thumbnail

SVG 벤 다이어그램 그리기

데이터 시각화를 하다보면 벤다이어그램이 쓰이는 경우가 생긴다. 그중 3개의 타겟을 가진 벤다이어그램을 그려보자.사진과 같은 3개의 원을 그리기 위해서는 역정삼각형을 그려야한다. 각 꼭지점을 중심으로 같은 크기의 원을 3개 그리면된다.밑변의 2점을 구하는건 쉽지만 꼭지점

2022년 6월 17일
·
0개의 댓글
·