noname02
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);$('..