CSS의 filter 프로퍼티를 사용하여 블러 효과(Blur effect)를 적용하는 방법에 대하여 알아봅니다.CSS의 filter는 CSS3에서 지원된 프로퍼티로 특정 이미지나 요소에 적용하면 다양한 필터 효과를 적용할 수 있습니다. 쉽게 생각하면 포토샵의 필터 효과들의 일부를 웹에서 구현 가능하도록 도와준다고 생각할 수 있죠.# CSS Filter Blur 효과 적용filter에는 여러가지 값들이 사용되지만 blur()는 가장 많이 쓰이는 효과 함수 중 하나입니다. 대상을 흐릿하게 만들어주는 특징이 있는데 문법은 아래와 같습니다.img { filter: blur(radius); }위와 같이 radius의 값은 왜곡되는 정도, blur 정도를 말합니다. 값이 커질수록 당연히 더 흐릿하게 보이게 되죠. 그럼 아래에 간단한 예제를 만들고 알아보겠습니다.! CSS filter blur 예제보기여기서는 간다하게 원과 사각형을 그리고 해당 요소에 blur 효과를 적용한 뒤 어떻게 다른지 확
2019-07-09 08:44:47제이쿼리를 사용하여 특정 엘리먼트에서 포커스 아웃이 되었을때 이벤트를 발생시키는 방법을 알아봅니다.focusout(function() { // code })# Focusout 이벤트란먼저 포커스아웃에 대하여 알아봅니다. 이 이벤트는 특정 엘리먼트가 선택된 경우에 해당 엘리먼트를 벋어나는 경우 focus out이 발생하여 이벤트를 동작시키도록 합니다.! 웹사이트에서 언제 사용되는가?만약 웹사이트를 구축하는 경우라면 아래의 경우에 포커스 아웃 이벤트가 많이 사용됩니다.- 검색을 위한 input 태그 포커스 아웃되면 사라지도록 만들기그렇다면 자세한 예제를 아래에서 알아보시기 바랍니다.# 제이쿼리 focusout() 예제보기그렇다면 검색 기능을 아래에 만들어보겠습니다. 만약 검색 버튼을 누르면 입력할 수 있는 input 태그가 나타나며 input태그에서 벋어나는 경우... 즉 포커스아웃되면 input 태그가 사라지게 됩니다.<div class="search-view"> <button id
2018-01-31 07:01:27angularjs에서 ngModel 디렉티브에 옵션으로 사용하는 ngModelOptions 속성의 사용에 대하여 알아봅니다.이 옵션을 사용하는 가장 큰 이유중 하나로 debouce 옵션을 설정하여 입력완료에 대하여 지연시간 설정이 가능합니다.# ngModelOptions 를 사용한 모델값에 옵션 추가하기아래는 간단한 예제입니다. 지연시간이 300 ms로 설정되어 입력이 끝난 후 300ms 동안 아무 입력이 없어야 이벤트 등이 실행되게됩니다.ng-model-options="{updateOn: 'default blur', debounce: { default: 300, blur: 300 }}"위와 같이 복수개의 updateOn 및 debounce 값을 설정 가능합니다. 만약 아래와 같이 html이 있는 경우 위 옵션을 추가하여 아래처럼 나타낼 수 있을 것입니다.@ ng_model_option.html<span>제목을 입력하세요!</span><input type="text" ng-chang
2017-04-27 19:59:43
