horizontal Bounce Arrow Animation

Comma separated @keyframe rule@keyframe 은 백분율로 애니메이션 상태를 지정할 수 있습니다.여기서 더 나아가 바운스 애니메이션을 구현하는데 있어서 콤마(,)를 구분자로 키프레임을 좀 더 간결하게 작성할 수 있는 방법에 대해 알아보도록 합니다. SourceSee the Pen Comma separated @keyframe rule by jaeheekim (@jaehee) on CodePen. @keyframe위의 소스에 키프레임은 간결하게 작성되어 있습니다. 위 해당 키프레임을 아래와 같이 작성할 수도 있습니다. css @-webkit-keyframes horizontalBounce { 0% { -webkit-transform: translateX(0); } 10% { -we..
StyleSheet/CSS 2017. 2. 16. 09:07

CSS3 gradient 를 이용한 줄무늬 배경 만들기

줄무늬 배경 만들기거의 모든 시각 디자인에서 다양한 크기, 색상, 각도의 줄무늬(Sprite)를 찾아볼 수 있습니다.줄무늬를 적용하는 작업 방식은 일반적으로 각각의 분리된 이미지를 만드는데, 이것을 수정하려면 그때마다 이미지 편집이 필요합니다.때로는 SVG를 사용하기도 하는데, 이 역시 분리된 파일과 익숙하지 않은 구문을 사용해야 합니다.번거로운 작업을 최소화하기 위해 CSS3 를 이용하여 직접 줄무늬를 만들 수 있는데 그 방법을 알아보도록 합니다. 기본 줄무늬 배경See the Pen 줄무늬 배경 #1 by jaeheekim (@jaehee) on CodePen. #fb3 컬러의 50% 는 처음 0%에서 시작하여 50% 지점에서 끝나고 #5ba 컬러는 50% 에서 시작하여 100% 까지 배경이미지를 그..
StyleSheet/CSS 2017. 2. 8. 11:31

CSS3 : -webkit-animation 알아보기

-webkit-animation웹킷 애니메이션에 대해 알아봅니다. 속성명 -webkit-animation 요약 설명 애니메이션을 설정한다. 정의 애니메이션 이름과 재생 횟수, 재생 방향 등 여러 애니메이션 속성을 하나로 합쳐서 설정한다. Syntax(구문)-webkit-animation: || || || || || || || [,...]; name : 애니메이션 이름@-webkit-keyframes 속성에서 설정한 애니메이션의 이름이다. 이름을 설정해야 애니메이션을 재생할 수 있다. duration : 애니메이션을 한 번 재생하는 데 걸리는 시간 0 : 애니메이션을 재생하지 않는다(기본값). 숫자와 단위 : 애니메이션을 한 번 재생하는 데 걸리는 시간이다. 초(s)와 밀리초(ms) 단위를 사용한다. 단위..
StyleSheet/CSS 2017. 1. 24. 17:15

배열 문자열을 역순으로 반환하는 함수 및 상태를 기억하는 함수 작성하기

재귀 알고리즘 구현하기배열을 재귀적으로 탐색하고 배열 문자열을 역순으로 반환하는 함수를 구현하고자 하는 경우에는 재귀적으로 함수 리터럴을 사용할 수 있습니다. javascript var reverseArray = function (x, index, str) { return index == 0 ? str : reverseArray(x, --index, (str += x[index] + " ")); }; var arr = ['apple', 'orange', 'peach', 'lime']; var str = reverseArray(arr, arr.length, ""); console.log(str); 상태를 기억하는 함수 작성하기전역 변수를 사용하지 않고, 함수를 호출할 때마다 같은 데이터를 재전송하지 않으며..
JavaScript/JS 활용 & etc.. 2017. 1. 23. 18:59

Search String(문자열 검색하기)

indexOf, lastIndexOf 를 이용한 문자열 검색 문자열 부분 문자열 검색하기 대상 문자열 안에서 특정한 부분 문자열이 있는지를 찾고자 하는 경우에는 String 객체의 내장 메서드 indexOf 를 사용하면 부분 문자열의 위치를 알 수 있습니다. javascript var testValue = 'This is the Cookbook'; var subValue = 'Cookbook'; var iValue = testValue.indexOf(subValue); console.log(iValue); // String 객체의 indexOf 메서드는 인덱스 혹은 부분 문자열의 첫 번째 글자가 있는 위치를 나타내는 숫자를 반환하고, 문자열에서 첫 번째 // 문자의 인덱스는 0 입니다. // 부분 문자열..
JavaScript/JS 활용 & etc.. 2017. 1. 23. 17:13

배열 메서드 : every, some 알아보기

every, some 배열 메서드를 활용한 배열 콘텐츠 유효성 검사하기 javascript // 배열이 특정 조건을 만족시키는지 확인하고자 하는 경우에는 Array 객체의 every 메서드를 사용하면 // 모든 원소가 조건을 통과하는지 확인할 수 있습니다. // 예를 들어 다음의 코드는 배열의 모든 원소가 알파벳과 숫자로만 이루어졌는지 확인하는 예제입니다. var arrElement = [123, 'aaa', 'abc', '-', 33, 'DDD']; var arrElement2 = ['aaa', 'abc','DDD']; // 테스트하는 함수 function textValue(el, idx, arr) { var textExp = /^[a-zA-Z]+$/; return textExp.test(el); } ..
JavaScript/연산자ㆍ메서드ㆍ프로퍼티 2017. 1. 23. 16:58

splice 와 indexOf 를 활용 예제

splice 와 indexOf 이용한 배열 원소를 검색하여 없애거나 바꾸기 javascript var animals = ['dog', 'cat', 'seal', 'walrus','lion','cat']; // 배열에서 원소를 제거 var deleteElement = animals.splice(animals.indexOf('walrus'), 1); console.log(deleteElement); // 반환값은 제거한 원소 console.log(animals); // 원래 배열은 제거한 원소를 제외한 원소를 반환 // 새로운 원소를 삽압하기 animals.splice(animals.lastIndexOf('cat'), 1, 'monkey','puma'); console.log(animals); var ani..
JavaScript/JS 활용 & etc.. 2017. 1. 23. 16:40