본문 바로가기
REACT

React에서 shape divider color-black으로 나올 때 사용법

by 해-온 2021. 12. 24.

https://www.shapedivider.app/

 

Shape Divider App

Create fully responsive shape dividers for your next web project

www.shapedivider.app

 

shape divider를 이용해 포트폴리오 디자인을 살려보려고 했다.

 

저 구름 모양을 누르면 코드가 뜬다.

 

사용법이 알려주는대로 그대로 복사하고 붙여넣기를 했는데,,,

 

...????

 

PostCSS를 사용해서 그럴까

일반 class로는 색상이 먹히지 않았다.

 

className= {styles.어쩌구}로 바꿔줘도

전혀 먹질 않는데..

 

포기하려는 찰나, 

'DOWNLOAD SVG'가 보인다.

저걸 잘 활용하면 할 수 있지 않을까?

 

일단 다운로드를 받아본다.

 

파일을 열어보니

 

이거다!!

 

바로 작업하고 있던 react 파일에 넣어준다.

svg 파일을 react에서 사용하는 방법은 여러가지인데

나는 그냥 img 파일을 통해 내보냈다.

 

먼저, import를 해준다.

 

그리고 img 태그를 적어준다.

 

 

그러면...

 

짜란~~~

 

성. 공. 적

 

 

'REACT' 카테고리의 다른 글

React Hooks란?  (0) 2024.01.29
CRA 없이 리액트 세팅하기  (0) 2023.07.04
REACT favicon 변경  (0) 2021.12.05
REACT 이미지 올리기 <img src...>  (0) 2021.12.05
Router  (0) 2021.12.01

댓글