CATEGORIES
CSS의 filter 프로퍼티를 사용하여 블러 효과(Blur effect)를 적용하는 방법에 대하여 알아봅니다. CSS의 filter는 CSS3에서 지원된 프로퍼티로 특정 이미지나 요소에 적용하면 다양한 필터 효과를 적용할 수 있습니다. 쉽게 생각하면 포토샵의 필터 효과들의 일부를 웹에서 구현 가능하도록 도와준다고 생각할 수 있죠.# CSS Filter Blur 효과 적용filter에는 여러가지 값들이 사용되지만 blur()는 가장 많이 쓰이는 효과 함수 중 하나입니다. 대상을 흐릿하게 만들어주는 특징이 있는데 문법은 아래와 같습니다.img { filter: blur(radius); }위와 같이 radius의 값은 왜곡되는 정도, blur 정도를 말합니다. 값이 커질수록 당연히 더 흐릿하게 보이게 되죠. 그
Last Modified : 2019-08-01 08:36:02
자바스크립트에서 만약 빈 배열 값이 존재하는 경우 이런 값만 삭제하는 방법을 알아보려고 합니다.예를들어 기존의 값이 위라면 아래와 같이 변경하는 방법입니다.myNum = [1, undefined, 3, '', 5]; // 변경 전myNum = [1, 3, 5] // 변경 후즉 값이 비었거나 선언되지 않은 배열 값만 제거하는 방법입니다.# 자바스크립트 배열에서 빈 값 제거하기이제 예제를 하나 만들어 봅니다. 일단 테스트 변수를 하나 만들어야 겠죠. 위의 myNum 배열을 그대로 가져옵니다. 그리고 여기서 배열 함수 filter()를 사용해 값이 있는 것만 반환하도록 코드를 작성합니다.myNum = [1, undefined, 3, '', 5];myNum = myNum.filter(function(item) {
Last Modified : 2020-05-31 06:28:51AngularJS 날짜 filter를 사용한 표현 방법 <body ng-app="testApp" ng-controller="testController as testCtrl"> {{ testCtrl.title }} <br /> {{ testCtrl.myDate | date: 'yyyy.MM.dd HH:mm (UTC- Z)'}} <script> app = angular.module('testApp', []); app.controller('testController', function() { this.title = ' Timezone test'; this.myDate = new Date; }) </script> </body>
Last Modified : 2017-08-11 01:41:50
lodash의 _.find()를 사용하면 원하는 객체의 값만 쉽게 찾을 수 있습니다. 그런데 AND 또는 OR 조건으로 값을 찾고 싶다면 어떻게 할 수 있을까요? 아래에서 알아보세요.# lodash에서 AND / OR 조건으로 find() 찾는 방법만약 AND 또는 OR 조건으로 찾을 경우 두 가지 방법이 존재합니다. 먼저 find()에 콜백함수를 적용하는 방법이 있으며 .filter()를 사용하는 방법도 존재합니다.! 콜백함수를 적용하기콜백함수에 조건식을 사용하여 원하는 값만 리턴하려고 합니다. 만약 site라는 변수에서 다음과 같은 값을 찾으려고 합니다.var sites = [ { no: 1, name: 'web', type: 'a' }, { no: 2, name: 'is', type: 'b' },
Last Modified : 2020-11-25 12:08:41만약 커스텀 필터링을 추가하여 반환받는 값에 html 태그가 있는 경우 이를 정상적으로 웹페이지에 보여주려면 어떻게 할까요?<p>{ { myStr | myCustomFilter } }</p>만약 위와 같은 커스텀 필터가 있다고 가정해봅니다.function myCustomFilter() { // Code here var str = '<br />'; return str;}위와 같이 필터링을 적용할 경우 <br />은 텍스트로 처리됩니다. 이를 html로 처리하기 위한 방법은 무엇일까요?# 커스텀 필터 html로 출력하는 방법가장 간단한 방법은 랩핑 태그를 추가 후 ng-bind-html 디렉티브를 사용하는 것입니다. 아래 예제를 봐주세요.<p><span ng-bind-html="myStr"></span><
Last Modified : 2017-06-13 22:10:21자바스크립트를 사용하여 객체를 사용하려고 합니다. 이때 객체가 가진 모든 프로퍼티들의 키와 값을 확인하여 값이 있는 경우의 키들만 남기고 싶다면 어떻게 할까요?# 객체에서 모든 키의 값이 있는 경우만 가져오기쉽게 말해 객체의 프로퍼티에서 값이 없는 경우를 다 제외하고 있는 값만 가져오는 방법을 의미합니다. 이해하기 쉽게 예를 들어보자면 아래에는 객체 option이 존재합니다.option = { siteName: '웹이즈프리', url: 'webisfree.com', no: 1, popular: null, etc: '', tag: [] }option은 siteName, url 등등 6개의 값을 가지고 있습니다. 하지만 이들 중 값이 없는 프로퍼티를 사용할 필요가 없다면? 없는 프로퍼티를 제외하고 키
Last Modified : 2020-11-04 22:39:13자바스크립트 라이브러리 lodash의 함수 중 filtering()에 대하여 알아봅니다.# lodash filtering() 함수 알아보기lodash의 filtering() 함수는 컬렉션에 사용하는 함수로 주로 배열에 사용하여 값을 필터링하는 기능을 수행하는 유용한 함수입니다. 간단한 문법은 아래와 같습니다._.filtering(컬렉션, 필터링 조건)두 가지 인자를 받으며 첫 번째는 필터링 대상을 그리고 두 번째로 필터링의 조건을 전달할 수 있습니다.- 컬렉션 : Collection으로 필터링의 대상- 필터링 조건 : 함수 및 일치하는 값 또는 조건그럼 아래에서 간단한 예제를 만들어보겠습니다.! lodash filtering() 예제보기만약 아래와 같은 컬렉을 가지는 변수 webSites가 있다고 합시다.w
Last Modified : 2020-11-10 09:03:53