목록All (101)
noname02
isotope 플러그인 var foo = $('...').isotope({isInitLayout: false;...}); isInitLayout 옵션을 주면 최초에 레이아웃을 설정하지 않는다.그 다음 이것저것 설정한 뒤, foo.isotope(); 를 하면 레이아웃을 설정한다.맨 처음 화면이 켜질 때 window의 사이즈가 뒤바뀌면서 스크립트로 css설정이 뒤죽박죽 되는 경우(크기의 미세한 차이가 발생) 사용하면 매우 좋다.
WordPress 카테고리를 가져오는 함수 : get_categories();매개변수로 여러가지 옵션을 줄 수 있다. API문서 참고하면 됨. get_the_category는 the_post()로 받아온 하나 하나의 카테고리를 가져오는데 이 때 한 포스트에는 카테고리가 여러개 존재 가능하므로 foreach문으로 전부 출력해줘야함. 카테고리에는 공백문자가 포함될 수 있기 때문에, class값에 카테고리를 넣어서 isotope 플러그인으로 필터링 혹은 정렬을 하게 되면 공백문자가 들어간 것은 2개의 클래스로 인식하기 때문에 공백문자를 제거해줘야 한다. php에선 str_replace를, js에선 String.replace를 사용하였다.
$categories = get_categories( array( 'orderby' => 'name', 'parent' => 0) ); foreach ( $categories as $category ) { printf( '%2$s ', esc_url( get_category_link( $category->term_id ) ), esc_html( $category->name ) );}
echo get_bloginfo('template_url')
Javascript, jQuery .each가 동작하는 각 엘리먼트에 delay 주기 setTimeout을 사용한다. var delay = function() {동작} setTimeout(delay, timems); 이 때 timems가 같으면 결국 쓰나 안쓰나 똑같다. 따라서 .each(function(i) { var delay ... setTimeout(delay, timems * i);} 와 같이 i를 이용해 시간을 눌려주는 방법을 생각해볼 수 있다.
setTimeout을 사용한다. var delay = function() {동작} setTimeout(delay, timems); 이 때 timems가 같으면 결국 쓰나 안쓰나 똑같다. 따라서 .each(function(i) { var delay ... setTimeout(delay, timems * i);} 와 같이 i를 이용해 시간을 눌려주는 방법을 생각해볼 수 있다.
일종의 위젯과 같은 기능으로 테마 고유의 위젯이라고 생각하면 된다.각종 사용자 설정 함수를 설정할 수 있고, 기본적으로 제공되는 여러가지 기능을 사용할 수 있게 해준다. register_nav_menus() - 네비게이션 메뉴를 등록한다.
CSSkeyframes을 이용한 animation을 사용했을 때, 부모컨테이너가 display: none 상태였다가 다시 보여지게되면 애니메이션이 처음부터 작동한다.
ajax로 엘리먼트를 append 한 후 이벤트리스너를 등록할 때에는$('body').on('event', 'selector', function() { }); 을 사용한다. youtube api 사용 // API를 로드한다.var tag = document.createElement('script');tag.src = "https://www.youtube.com/player_api";var firstScriptTag = document.getElementsByTagName('script')[0];firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // API로드시 콜백함수 function onYouTubePlayerAPIReady() { } // 선..
CSS로 애니메이션효과를 만들 수 있다.애니메이션은 우선 키프레임을 정의하여 효과를 부여한다. 1234567@keyframes name { 0% { ... } n% { ... } 100% { ... }}cs 와 같이 키프레임을 정의한다. 키프레임을 정의했으면 애니메이션을 적용할 셀렉터에 animation 프로퍼티로 적용한다. 1234567891011.selector { animation: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state;} cs anim..
.each().promise().done()each안에 animate가 있는 경우, animate도 모두 끝난 경우에 done이 작동한다. 앵커와 관련된 메서드를 작성하는 경우, return false;를 넣으면 앵커의 기본기능이 작동하지 않는다.이는 event.preventDefault()와 같은 역할을 한다.href가 설정되어있지 않아도 페이지가 현재페이지로 이동하기 때문에 새로고침 효과가 발생하는 것도 막을 수 있다. 커스텀으로 필터링을 하려면 filter의 function을 이용해도 되고, $.expr[':']을 통해 커스텀 셀렉터를 확장한 뒤 .filter(':customSelector')로 필터링할 수도 있다.
셀렉터 :animated가 있다.이는 애니메이션중인 요소를 찾는다. 이를 is와 결합해서 $('selector').is(':animated'); 를 사용한다.애니메이션중이면 true, 아니면 false를 반환한다.
offset()과 position()은 DOM엘리먼트의 위치를 찾는데 사용되는 jQuery메서드다.각각 top, left값이 담긴 위치 오브젝트를 반환한다.여기서 offset()은 document에서의 위치를 반환하고, position()은 parent엘리먼트에서의 위치를 반환한다.여기서 중요한 점은 position()을 사용할 때에는 당연히 css의 position 속성이 적용되어있어야 한다는 점이다. 예를 들어서 와 같이 되어있고, box1은 200x200, box2는 100x100이라고 치자.근데 box1에는 position 속성이 없고 box2에는 position: relative; 속성이 있는 경우box2에 대한 position()을 하면 box1에 대한 위치값이 아닌 body에 대한 위치값, ..
※내용의 정확성은 보장 못함. 비전문가인 본인이 이해하기 쉽게 정리하는 글임을 밝힘. Deferred 객체는 여러가지 용도로 쓰인다.jQuery API 문서를 보면 A factory function that returns a chainable utility object with methods to register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function. 라고 설명되어있다. 즉 콜백큐, 동기/비동기 작업에 대한 성공/실패에 따른 콜백을 다룰 수 있게 한다.대체적으로 ajax에 사용되고..
live메서드는 현재와 미래의 요소에 대해 이벤트를 바인딩하는 메서드이다.코드를 짤 때, 셀렉터로 선택된 요소들은 스크립트가 로딩되었을 때에 있던 DOM 엘리먼트들이다.그런데 만약 append, appendTo 등으로 추가된 요소가 있다면 스크립트가 실행되지 않을 것이다.특히나 이벤트들이 그럴 수 있다. 이럴 때 사용하는게 live이다.그런데 live는 Deprecated 되었으므로 이는 on으로 대체하면 된다. 1$(document).on('event', 'selector', function() { ... });cs 으로 사용하면 된당.
1234$('select').on(load, function() { console.log('#1'); });console.log('#2');cs 이 경우 #2가 먼저 로그가 찍히고, 그 다음 #1이 로그가 찍힌다. 당연한 내용.그래서 이런 코드가 있다. 123456789101112131415161718192021222324$('#content > img').click( function() { var $this = $(this); var title = $this.attr('title'); $desc.html(title).show(); $loading.show(); $('').on('load', function() { var $img = $(this); $loading.hide(); $('#panel').a..
1var image = new Image();cs 와 같이 빈 이미지 엘리먼트를 담은 오브젝트를 생성할 수 있다.이 오브젝트 프로퍼티인 src에 이미지 주소값을 넣으면, width값과 height값이 자동으로 갱신된다. 12345678var resize = function ($image) { var windowH = $(window).height() - 100; var windowW = $(window).width() - 80; var image = new Image(); image.src = $image.attr('src'); var imageH = image.height; var imageW = image.width;cs 왜 imageH = $image.height(); 를 사용하지 않는 것일까? 이..
1. div박스 내에 이미지를 삽입했는데 이미지 아래에 div박스 공간이 남는다면, 이미지에 vertical-align: bottom 속성을 주면 박스가 이미지로 꽉 차게 된다. (모던 웹사이트 디자인의 정석 - 207p) 2. 미디어쿼리(뿐만 아니라 무언가 덮어씌울 css를 설정할 때)작성할 때, 당연하지만 css 선택자의 레벨에 따른 우선순위를 꼭 맞춰서 작성해줘야 한다. 3. position: fixed에서 left, right 값을 0으로 지정하고 margin: 0 auto; 를 주면 가운데로 배치된다. 4. 화면 밑에서 slide-up 되는 효과 : div박스 height를 0으로 설정하고 bottom: 0으로 바닥에 붙인 뒤, height: 100%로 트랜지션을 주면 쭈욱 올라옴. 5. pos..
어떤 여러 메뉴들이 있고, 이 메뉴들에 대한 hover 이벤트에 대해 jQuery 애니메이션을 설정하는 경우가 있을 수 있다.보통 이러한 메뉴들은 class 이름이 같기 마련인데, 만약 이에 대해 아무 생각없이 $('class').hover~~ 와 같이 처리하게 된다면, 한 메뉴만 hover이벤트가 발생해도 다른 모든 메뉴들까지 덩달아 애니메이션이 되는 것을 볼 수 있다.이는 지극히 당연하게도 jQuery선택자가 모든 class 요소를 선택하였기 때문이다.따라서 커서가 올라간 메뉴에 대해서만 이벤트를 발생시키려면, jquery 선택자 두번째 매개변수에 $(this)를 줌으로써 실행 컨텍스트 범위를 한정시킬 수 있다.즉 $('class').hover(function() {$this = $(this);$('..
float이 적용된 div박스가 3개가 있다고 하자. 첫번째 div박스부터 div1, div2, div3라고 하자.그럼 여기서 div2의 클리어 속성은 div1에 대해서만 적용이 된다.div1에 클리어 속성을 넣어봐야 어떠한 변화도 일어나지 않는다. div2, div3와는 상관이 없다. 왜냐하면 div1에 영향을 주는 float이 없기 때문이다.
어떤 메뉴에 hover이벤트가 발생했을 경우 css 디자인이 바뀌는 경우가 있을 수 있다.그런데 이 메뉴에 hover 이벤트가 발생하면, 어떤 특정한 요소 A가 이 메뉴를 가리는 효과가 있다고 하자.그렇게 되면 A가 메뉴를 가리면서 마우스 포인터가 A위에 놓이게 되고, 이에 따라 메뉴 hover의 효과가 사라지는 경우가 발생할 수 있다.따라서 hover가 발생하면 :hover로 가상클래스로 css를 정의하지 말고, hover 클래스 등 특정 클래스를 add해주고 hover에서 나오는 경우 다시 hover 클래스를 remove해주는 식으로 하면 메뉴 위에 어떤 효과가 나타나서 hover이벤트가 풀려도 디자인은 그대로 hover가 되있는 것처럼 만들 수 있다. 참고예제 : http://tympanus.net..
123456var d = 1000;$('#menu span').each(function() { $(this).stop().animate({ 'top': '-17px' }, d += 250);});cs #menu의 span을 선택한 뒤 각각 animate를 적용하고있다.그런데 여기서 animate duration 값에 d += 250 을 주었다.이는 duration 매개변수의 수식이 일단 계산되고, 그 다음 값을 적용시키는데맨 처음엔 1250ms, 그다음 엘리먼트에는 1500ms, 그 다음 엘리먼트에는 1750ms ... 이런식으로 지연을 줌으로써엘리먼트들이 동시에 효과가 적용되는것이 아니라 각각 250ms씩 속도가 지연되면서 계단식으로 효과가보이는 효과를 줄 수 있다.
자바스크립트의 ||, && 연산자는 불린값을 리턴하지 않는다. 값 자체를 리턴한다.따라서 값의 성질(true, false)에 따라 앞의 값이 출력되던지, 뒤의 값이 출력되던지 한다. or의 경우, 둘 중 하나만 true면 true를 반환하니까 만약 앞의 값이 false라면 뒤의 값을 리턴한다.뒤의 값이 true라면 true가 나오는 것이고, false면 false가 나올 테니까.물론 앞의 값이 true라면 뒤의 값을 볼 필요도 없이 앞의 값을 리턴한다. and의 경우는 or과 반대다. 둘 중 하나만 false면 false를 반환하니까 만약 앞의 값이 true라면 뒤의 값을 리턴한다. 마찬가지로 앞의 값이 false면 그냥 앞의 값을 리턴한다. 중요한 점은, 첫줄에서도 강조했듯이 불린값을 리턴하는게 아니라..
함수의 인수 옆에 use (...) 키워드를 사용할 수 있는데, 이 경우use 키워드 인수 안에 함수 외부의 변수를 넣으면, 함수 외부의 값을 사용할 수 있게 된다.단, call by value 이므로 함수 외부의 변수값은 변함이 없다. 단지 값의 복사만 이루어 질 뿐이다.