웹사이트 최적화 방법

1) CSS 스프라이트 기법 활용 이미지를 많이 사용하면 HTTP 요청이 많아질 수밖에 없습니다. 이미지를 많이 사용하면서도 HTTP 요청을 최소화하는 방법 가운데 하나가 CSS 스프라이트 기법입니다. CSS 스프라이트 기법은 이미지 여러 개를 하나로 만들고 스타일시트에서 background-position 속성을 설정해 필요한 부분의 이미지만 보여주는 기술입니다. 여러 이미지를 하나의 이미지로 합치기 때문에 HTTP 요청 횟수를 줄일 수 있고, 이미지의 컬러 테이블과 같은 메타데이터를 하나로 합칠 수 있어 파일 크기가 줄어듭니다. 2)자바스크립트 파일 통합 웹서비스의 기능이 향상됨에 따라 자바스크립트 파일은 개수도 많아지고 크기도 커지고 있습니다. 이럴 때 성능을 높이는 방법은 여러개의 자바스크립트 파..

gsap tween kill() 속성

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // 전체 애니메이션 삭제 myAnimation.kill(); // 애니메이션의 "x"및 "y"속성 (모든 대상) 만 제거합니다. myAnimation.kill({x:true, y:true}); //대상 "myObject"와 관련된 애니메이션의 모든 부분을 제거합니다 //(트윈에 여러 대상이 있는 경우 다른 대상은 영향을 받지 않습니다) myAnimation.kill(null, myObject); // 대상 "myObject"의 애니메이션의 "x"및 "y"속성 만 죽입니다. myAnimation.kill({x:true, y:true}, myObject); // 대상 "myObject1"및 "myObject2" myAnimation 의 ..

gsap tween overwrite 속성

* overwrite (int, boolean, option) 한개의 타겟에 여러가지 tween을 추가하고자 할때 어떻게 작동할 것인지? (트윈을 덮어씌울지) [0] - none, false 어떠한 것도 덮어 씌우지 않습니다, 겹치는 tween이 없도록 주의해야 합니다. [1] - all, true 같은 target에 대한 tween이 새로 정의될 때 이전의 tween을 자동으로 제거하고 새로 적용된 tween만 실행한다. [2] - auto 새로 생성된 tween과 이전에 생성된 tween과 비교하여 중복되는 tween값만 새로 적용된 tween값으로 바꿔준다. [3] - concurrent tween이 처음 렌더링 될 때 충돌하는 속성이 있는지 여부와 상관없이 동일한 대상의 활성화된 tween만 죽인..

전화번호,이메일,지도 자동링크 방지

아이폰 사파리 계열에서는 숫자가 전화번호 형식으로 자동링크가 걸리지만, 안드로이드에서 메일주소와 지도상의 주소까지 자동으로 링크가 걸리는 이슈가 있다. 그럴땐 meta 태그를 추가하면 된다. 웹미니 https://blog.webmini.net/797

css 선택자, 함수

:first-letter 첫번째 글자 :first-line 첫번째 라인 :empty 빈 요소 ex) p:empty -> 비어있는 요소 :invalid 유효하지 않은 입력 요소 ex) input:invalid (최대~최소범위, 이메일-숫자 유효성) :valid 유효한 입력 요소 attr() - 해당 요소의 html 속성 값을 반환 var() - 해당 요소의 사용자 정의 특성 값을 삽입 -reference https://pjh445.blog.me/220046988613