CATEGORIES
제이쿼리(jQuery)는 animte() 객체를 사용한 다양한 동적 기능을 제공합니다. 그 중에서도 특히 opacity 속성이 많이 사용되는데 이를 이용해 원하는 문서 요소를 쉽고 간단하게 투명하게 만들 수 있습니다.# jQuery animate() 함수의 opacity 속성 사용하기아래는 간단한 문법 및 사용방법입니다. $('#testEle').animate({opacity: '1'}, 1000}; $('#요소명').animate({opacity: '설정값'}, 지연시간};선택 가능한 옵션으로 아래와 같이 두 가지 값을 인자로 넘겨줄 수 있습니다.! 간단한 예제코드 보기서서히 사라지거나 나타나게 하는 경우 아래와 같이 사용할 수 있습니다.@ opacity.html<span class="test">Opaci
Last Modified : 2017-12-18 07:41:46
HTML5의 API의 Canvas 태그를 사용하여 여러가지 도형 및 이미지를 쉽고 간단하게 그릴 수 있습니다. 그런데 만약 투명한 도형이나 그림자, 텍스트 등을 추가하려면 어떻게 하는지 알아봅니다.# Canvas 태그에 투명 효과(opacity) 적용하는 방법이번에는 투명효과인 transparent, opacity 효과를 주기 위한 방법으로 Canavas에서는 바로 globalAlpha를 사용합니다. 이 프로퍼티는 캔버스의 컨텍스트에 적용 가능한 프로퍼티로 추가할 요소를 투명하게 만들어 주는 매우 유용한 방법입니다. 사용 방법은 아주 간단합니다. globalAlpha에 숫자값을 적용하면 됩니다.context.globalAlpha = 0.5;매우 간단합니다. 위와 같이 숫자를 적용하며 0.5는 50%의 투명도
Last Modified : 2019-08-25 21:02:13
포토샵을 사용하여 사진이나 일러스트 작업물에 불투명(또는 반투명) 효과를 구현하고자 합니다. 어떻게 하면 되는지 아래에서 간단하게 알아봅니다.# 포토샵 불투명, 반투명 효과 만들기, gradient아래 예제는 최근 포스팅한 글에 사용한 실제 이미지 작업의 결과입니다. 모바일앱의 스크린샷을 사용하기에는 너무 길어서 어떻게 할까 고민하다가 길이를 줄이면서 동시에 반투명 및 물결 생략 표시를 추가하였습니다.그렇다면 순서대로 어떻게 진행하였는지 하나씩 알아봅니다.하나. 레이어 하나 만들기먼저 원본 이미지에 추가할 새로운 레이어를 하나 만듭니다. 이 레이어에는 그라디언트, 불투명 효과와 물결 생략 이미지를 적용할 계획입니다.둘. 불투명 효과에 필요한 그라디언트 도구를 선택하기이제 포토샵 툴 메뉴에서 Gradient
Last Modified : 2020-12-20 14:10:29앱을 개발할 수 있는 React Native의 <View> 컴포넌트에서 클릭을 사용하기 위해서 onPress={}를 사용하여 이벤트를 추가였으나 동작하지 않는 문제가 발생하였습니다.! onPress가 View에서 동작하지 않는 경우먼저 원인은 무엇일까요? 이유는 View 컴포넌트는 onPress를 지원하지 않기 때문입니다... 즉 여기서 사용된 <View>는 스타일을 지원하기 위한 목적의 컴포넌트로 onPress 등의 클릭이 필요한 경우 다른 컴포넌트 요소를 사용해야만 했습니다.결국 View가 아닌 다른 방법을 찾아야하는데 대체 방법으로 <TouchableOpacity> 또는 <Button>을이 가장 좋은 해결방법입니다. 즉 기존 코드를 수정하여 적용하면 아래와 같이 나타나겠습니다.@ 변경 전<View on
Last Modified : 2020-05-30 18:24:25css의 전처리기 중 하나인 scss를 사용하여 색의 투명도를 설정하는 방법을 알아봅니다.scss는 다양한 방법으로 투명도, Alpha를 설정할 수 있습니다. 이가운데 rgba()를 사용하면 간단하게 투명도를 설정할 수 있습니다.rgba(색상, 투명도)투명도는 0~1의 값을 사용할 수 있습니다. 이 방법은 매우 유용합니다. 일반적으로 ! scss 색에 투명도 opacity, alpha값 적용 예제아래는 간단한 예제입니다. 만약 변수 $red100에 투명도(alpha) 50%를 설정하여 새로운 변수 $red50을 선언하려면 아래와 같이 코드를 입력합니다.$red100: #f00;$red50: rgba($red100, 0.5);이와 같은 방식으로 원하는 색상의 투명도를 조절하여 같은 색상의 다른 투명도를 여러개
Last Modified : 2020-07-15 17:32:53React Native에서 스와이프나 드래그 등의 특정 제스처를 구현할 경우 PanResponder API를 사용하여 구현할 수 있습니다. 이때 해당 API가 사용된 <Animated /> 내부에 클릭이벤트가 존재하는 경우 원하는 클릭이 동작하지 않는 문제가 나타나게 됩니다.# PanResponder 내부에 클릭 이벤트 문제 해결방법먼저 원인은 PanResponder가 선언된 이벤트에서 하위 엘리먼트의 이벤트를 제어하기 때문입니다. 이를 해결하기 위한 방법으로 onPanResponderRelease() 함수를 수정하는 방법이 있습니다.onPanResponderRelease()는 이벤트와 제스처를 인자로 받아 처리할 수 있는데 내부에 원하는 엘리먼트 요소가 클릭되었는지 확인 후 이벤트를 처리하는 방법입니다.
Last Modified : 2018-11-06 18:22:21