분류 전체보기
-
CSS : background image 반복 안되게 하는 법Frontend 2021. 12. 27. 23:46
백그라운드 이미지를 호출하여 사용하다보면 해당 사이즈 보다 작아 연속적으로 아래와 같이 반복되는 경우가 있다. 이럴때에는 간단하게 background-repeat 을 no-repeat 로 설정하면 된다. 아래와 같다. &-image { width: 50px; height: 50px; background-image: url('~@/assets/images/home_black.svg'); background-repeat: no-repeat; } 그리고 이미지가 너무 작아 해당 크기로 꽉채우고 싶다면 아래와 같이 background-size 옵션을 cover 로 추가하면 된다. &-image { width: 50px; height: 50px; background-image: url('~@/assets/imag..
-
CSS : background image 꽉차게 채우는 법Frontend 2021. 12. 27. 23:41
이미지를 호출하여 원하는 곳에 지정하다보면 해당 사이즈 만큼 꽉차게 채우고 싶을 때가 있다. 이럴때에는 간단하게 background-size 를 cover 로 설정하면 된다. 아래와 같이 CSS 를 설정하면 된다. .image { width: 50px; height: 50px; background-image: url('~@/assets/images/home_black.svg'); background-size: cover; }
-
Material Design Icon 무료 다운로드 받을 수 있는 곳ETC 2021. 12. 27. 23:32
web 또는 안드로이드 개발을 하다보면 무료로 사용할 수 있는 라이센스를 가진 이미지가 필요할 때가 있다. 이 떄 Material Design 을 주로 사용하는데 간단하게 import 를 받아 사용할 수도 있지만 해당 이미지를 다운로드 후 코드에 호출하여 사용하고 싶을 때가 있다. 이런경우 아래 사이트로 들어가면 손쉽게 원하는 이미지를 검색 후 다운로드 하여 사용가능하다. https://fonts.google.com/icons?selected=Material+Icons Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com
-
vue error 해결법 : Module Error (from ./node_modules/sass-loader/dist/cjs.js):Node Sass version 7.0.1 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0.Error Handling 2021. 12. 27. 22:26
vue 에서 sass-loader 를 설치한 뒤에 node-sass 를 설치 할 때에 아래와 같은 오류가 나는 경우가 있다. Module Error (from ./node_modules/sass-loader/dist/cjs.js):Node Sass version 7.0.1 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0. 위 에러는 해당 버젼이 sass-loader 와 호환이 되지않아 발생한다. 따라서 아래 명령어로 버전을 낮춰 다시 설치하면 해결된다. # 기존 버전 삭제 $ npm uninstall node-sass # 원하는 버전대 설치 $ npm install node-sass@6 # 혹시 안되면 uninstall 후 버전을 더 낮춰본다. $ npm instal..
-
vue 에러 해결법: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.Error Handling 2021. 12. 3. 00:14
vue 에서 props 로 데이터를 전달할때 가끔 아래와 같은 에러가 발생하는 경우가 있다. Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. 위 메시지의 의미는 props 즉, 상위 컴포넌트에서 내린 데이터를 하위 컴포넌트에서 변경시키려 해서 나는 에러이다. 따라서 하위 컴포넌트에서 해당 props를 변경시켜주는 함수나 v-model 등이 있는지를 확인한다. 1. 보통은 method 에서 props 데이터를 변경시키는 부분이 있는데 => 이..