차근차근

  • 홈
  • 태그
  • 방명록

SVG 1

[React] SVG image 파일을 이용한 애니메이션

SVG 란? 벡터 그래픽을 표한하기 위한 XML 기반의 파일 형식, 쉽게 말해 이미지를 코드로 표현한 벡터 이미지 파일로 생각할 수 있습니다. SVG 파일은 웹 브라우저 상에서 열람할 수 있고 문서 편집기에서 편집할 수 있습니다. Raster vs Vector React에서 SVG 파일 사용하기 1. img 태그로 사용하기 기존의 png, jpg 등의 이미지를 사용하는 방식과 동일하다. import Mute from '../../images/mute.svg'; 2. 컴포넌트화 시키기 SVG 파일을 컴포넌트화 시켜 유동적으로 바꾸고자 하는 속성에 "current"로 값을 바꿔줍니다. 다음과 같이 사용하고자 하는 컴포넌트에서 원하는 속성 값을 props로 전달할 수 있습니다. // tomato..

프로그래밍 공부/React 2022.01.11
1
더보기
프로필사진

  • 분류 전체보기 (300)
    • 프로그래밍 공부 (125)
      • Javascript (79)
      • React (10)
      • Computer Science (15)
      • Git (3)
      • Frontend (14)
      • Backend (4)
    • 알고리즘 공부[Javascript] (175)
      • 프로그래머스 1단계 (43)
      • 프로그래머스 2단계 (30)
      • 백준 (102)

Tag

2630번, 17225번, 알고리즘, GreenSock, 재귀함수, REACT, 11279번, 정렬, 34기, 화살표 함수, 백준, til, ANIMATION, 유사배열, 6064번, this, 11724번, node.js, 17219번, 5525번,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바