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:02AngularJS 날짜 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
자바스크립트에서 만약 빈 배열 값이 존재하는 경우 이런 값만 삭제하는 방법을 알아보려고 합니다.예를들어 기존의 값이 위라면 아래와 같이 변경하는 방법입니다.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:51lodash의 _.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 : 2018-07-28 18:53:17만약 커스텀 필터링을 추가하여 반환받는 값에 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