본문 바로가기

Web

클래스 스타일을 일괄 수정하기 편리한 팁! 같은 스타일을 가진 요소를 묶어서 스타일을 줄때 사용하는 방법입니다. 여러 요소에 동일한 클래스를 주어서도 가능하지만 하나의 클래스로도 여러 스타일을 줄 수 있는 장점이 있는데요, 예를 들어 event-1, event-2, event-3 처럼 여러 요소에 해당 클래스를 주었을 때 event 라는 텍스트가 중복이 됩니다. 여기서 event라는 중복되는 클래스명을 아래처럼 스타일을 주어 사용하면 됩니다. 끝. [class|="중복클래스명"] {position:relative;padding:0;margin:0} 더보기
a 태그의 href 주소 변경하기 $('엘리먼트요소').prop('href', 변경할값); 더보기
접속 후 강제 페이지 이동 1 2 3 4 5 6 location.replace("이동할 주소"); location.href("이동할 주소"); history.go(-1); location.reload(); 더보기
[plugin] jquery slide plugin 1. Camera 반응형 지원 및 여러가지 기능을 많이 지원해서 좋다. http://www.pixedelic.com/plugins/camera/ 2. Master Slider 반응형 및 모바일을 지원하고 여러가지 html5 기능들도 지원하는 아우 훌륭한 슬라이더이다.단, 좋은만큼 유료이다... http://www.masterslider.com/ 더보기
[plugin] animate.css 와 더불어 편리하게 사용가능한 wow.js animate.css 와 함께 스크롤 애니메이션을 줄 수 있고, 지연시간을 두고 멋진 애니메이션 효과를 낼 수 있도록 도와주는 wow.js를 소개합니다~ 인터렉티브한 사이트나 모바일에서 간편하게 구현 가능하기 때문에 적절히 활용하면 좋을 것 같습니다. 사이트 주소: http://mynameismatthieu.com/WOW/index.html 더보기
CSS3 애니메이션을 편하게 적용할 수 있도록 도와주는 Animate.css CSS3 애니메이션 모듈화 파일을 제공해 주는 사이트입니다. 애니메이션 적용을 위해 매번 css파일을 복잡하게 건들지 않고 클래스만 삽입시켜 간단하게 애니메이션 효과를 볼 수 있다는 장점이 있겠습니다. http://daneden.github.io/animate.css/ 더보기
ie9 이하에서 css3 transition 사용하기 css3 transition은 ie10이상의 환경에서만 구동되도록 되어있습니다. ie9이하에서 사용할 수 없을까 하는 생각으로 검색해보니 역시나 jquery 를 활용한 방법이 있었네요~ 사이트 주소는 아래와 같습니다. http://louisremi.github.io/jquery.transition.js/test/index.html http://playground.benbarnett.net/jquery-animate-enhanced/ 더보기
substr을 사용하여 간단하게 글자수 자르기 jquery substr을 사용하여 간단히 문자열을 자를 수 있다. 최신글을 추출하면서 사용하기 간편하다. 1 2 3 4 5 6$(document).ready(function(){ $('.latest-post ul li a').each(function(){ if ($(this).text().length > 26) $(this).html($(this).text().substr(0,26)+".."); }); }); 더보기