# CSSgram

1개의 포스트
post-thumbnail

Vue) 22. 인스타그램 필터를 만들어보자.. -CSSgram-

CCSgram ) CSSgram 이라는 라이브러리는 CSS 속성만으로 인스타그램 필터들을 흉내낼 수 있다. filter와 linear-gradient 속성만으로 인스타그램 필터를 재현한 라이브러리가 CSSgram이다. 설치법 ) public 폴더안에 존재하는 index.html 파일에 다음과 같은 코드를 적으면 끝! 사용법 ) 원하는 이미지에 class="hudson" 이런 식으로 인스타그램 공식 필터명을 class로 집어넣으면 인스타그램 필터가 먹는다. . . . 이것을 응용하여, 지원하는 필터명을 배열형식의 filters 라는 데이터로 담아서 v-for 를 사용하였다. 따라서 아래와 같은 배열의 데이터를 만들었다. 그리고 배열인 점을 활용하여 v-for 문을 사용해서 번거로움을 피했다. 마지막으로 컴포넌트에 각각의 요소 값을 props 데이터로 전달해주고, :class을 사용하여 class이름에

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