본문 바로가기

분류 전체보기

 (44)
쉽게 놓칠수 있는 CSS Issue 이슈 해결 1. ie8~10 빈 공간의 a태그 활성화 안되는 문제블라블라 -> 위와 같은 구문은 IE(인터넷 익스플로러)에서 태그가 빈공간으로 인식하여 해당 영역이 활성화되지 못한다.따라서 두가지 해결방법이 있다.1. 태그 안에 태그를 넣어 영역을 채워준다.2. css에서 background image 를 사용하여 사이즈를 100% 주어 영역을 채워준다. 2. IE8에서 input 실행안되는 이슈input[type=""]에서 input 숨기는 css에visibility: hidden을 사용하게 되면 IE8에서 인식을 하지 못한다. input[type=""] {position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; marg..
자바스크립트 클래스를 정의하는 3가지 방법 자바스크립트 클래스를 정의하는 3가지 방법 소개 자바스크립트는 문법측면에서 아주 유연한 객체지향 언어이다. 이 글에서 객체를 정의하고 생성하는 3가지 방법을 찾을 수 있다. 이미 자주쓰는 방법이 있다 하더라도 다른사람들이 작성한 다른 방법들을 이해하는데 도움이 될것이다. 먼저 자바스크립트에는 클래스라는 개념이 없다는것을 알고 있어야한다. 함수는 클래스를 흉내내기 위하여 사용될 수 있지만 일반적으로 자바스크립트는 클래스가 없는 언어이다. 자바스크립트에서 모든것은 객체이다. 그리고 상속은 객체가 객체로 부터 상속을 받지, 다른 클래스가 있는 언어들처럼 클래스가 클래스로부터 상속받지 않는다. 1. 함수 이용하기 가장 많은 쓰는 방법중 하나다. 평범한 자바스크립트 함수를 만든 다음 new 키워드로 객체를 생성하..
[iOS] 모바일 사파리에서 전화번호 링크 비활성화하기 컨텐츠중 전화번호 텍스트 노출하는게 있었는데 iOS safari 브라우저 에서 텍스트가 보이지 않았다. 자세히 보니 전화번호 링크로 활성화되있는걸 확인할 수 있었다. (tel link) 대시(-)를 삭제하니 텍스트로 제대로 보여지지만 1234-1234 이런식으로 작성되어있으면 링크가 활성화 되는게 문제. 다행히 해결방법은 금방 찾을 수 있었다. head에 메타태그만 기입해주면 된다. 대부분 1234-1234 이렇게 작성하다보니 이런 이슈가 있는줄은 처음알았다. * 관련문서https://stackoverflow.com/questions/226131/how-to-disable-phone-number-linking-in-mobile-safari
[CSS] 3개의 점을 이용한 로딩 아이콘 GIT : https://github.com/nzbin/three-dots DEMO : https://nzbin.github.io/three-dots/ 출처 : http://rwdb.kr/three-dots/
[CSS] 마우스오버로 틸트효과 내기 (hover tilt effect) 틸트 효과는 javascript로 제작하는 경우가 많다. ( ex 플러그인 : https://gijsroge.github.io/tilt.js/ ) 하지만 하단 css로도 효과를 낼 수 있다. 각각의 hover point에 box-contents를 다른 스타일의 모션으로 적용되게 구현 * 참고문서 http://rwdb.kr/hover_tilt/
패럴랙스 스크롤 관련 # 스크롤에따라 움직임에 따라 모션시작 (css3) ie10
[GIT PAGE 설정방법] github로 무료 도메인 만들기 @ GIT HUB PAGE 만들기 1. GITHUB 접속 - 계정 로그인 2. Repository 만들기* 여기서 저장소 이름은 반드시 username.github.io 로 저장(기존엔 .com이었지만 .io로 바뀌었음 > 참고문서) 3. Git bash 혹은 GUI GIT 프로그램으로 GIT 이용1) git clone (git url)2) git add . 3) git commit -m "커밋메세지입력"4) git push5) 계정 로그인 클론 > 업데이트된 내용 확인 > 커밋 > 푸쉬 > 계정정보 확인 4. 새 창에서 URL 입력창에 저장소 이름 입력 (username.github.io) @ 이미 git project 가 있는 상태에서 해당 repository에 대한 github page를 만드는 법..
[입문] TWEENMAX 트윈맥스 배우기 4 - easing easing은 jQuery Animation에서 볼수 있는 메소드이다.easing Function은 매개변수의 변화율을 시간이 지남에 따라 정하는 것으로,지정한 값의 속도로 움직이게 된다. * easing 종류 트윈맥스는 이 easing을 쉽게 구현하기 위한 페이지가 있으므로 하단 링크를 통해예시, 실행을 해본 뒤 코드를 복사해서 지정을 하면 된다. https://greensock.com/docs/Easing * 그래프형태 * 시계형태 * 박스형태
[입문] TWEENMAX 트윈맥스 배우기 3 - 변수 기본 구문// TweenMax.to(target:Object, duration:Number, variables:Object):TweenMax target : Object - 오브젝트 duration : Number - tween 시간 /(초) variables : Object - 객체의 모든 속성 VARIABLES delay : Number - 지연시간 ease : Function - 따로 ease 클래스는 없나 봅니다. 상단에 fl.motion.easing.*; 한줄 추가 해주시고 Tween Class처럼 쓰면 됩니다. Default-Regular.easeOut easeParams : Array - 직접 ease을 만들어서 쓸수 있습니다. 방정식이 있겠죠? 전 패스;;; autoAlpha : Numbe..
[입문] TWEENMAX 트윈맥스 배우기 2 - 메서드 KEY METHODS- 기본 메서드 TweenMax.to : this 속성에서 지정한 속성까지 TweenMax.from : 지정한 속성에서 this 속성까지 TweenMax.fromTo : from에서 지정한 속성에서 to에서 지정한 속성까지 ex) TweenMax.fromTo(target, duration, {from vars}, {to vars}); TweenMax.allTo / TweenMax.allFrom : for문 없이 여러 target을 동시에 적용 기본 구문: TweenMax.allTo(targets:Array, duration:Number, vars:Object):Array ex) TweenMax.allTo([mc1, mc2, mc3, mc4, mc5], 1, {y:"100", alpha..

티스토리툴바