-
Inspiration, UI Design 2012‧11‧26
무료 UI kit 다운로드
UI를 디자인할 때 참고하기 위한 혹은 활용하기 위한 유용한 사이트 발견! ui에 관한 25가지 무료 psd 를 제공해주는데요. 참 세련된 것들도 많네요. 색감도 너무 좋구요. 자! 그러면 다운받으러 고고싱 다운로드 받으러 이동하기
-
Javascript, jQuery 2012‧11‧08
jQuery-$.cookie 플러그인 사용법 (쿠키 활용편)
사용자의 쿠키를 이용해서 유동적으로 사이트를 운영할 때가 많다. 자바스크립트로 쿠키를 만드는 방법은 생략한다. (이미 검색하면 많이 나온다.) 제이쿼리는 플러그인 사용으로 간단하다. 일단 플러그인을 페이지내에 삽입해야한다. 해당 파일은 https://github.com/carhartl/jquery-cookie 이 곳에서 최신버전을 받아서 사용하거나 지금 필자가 쓰는 버전을 첨부파일로 넣을테니 다운받아 써도 상관없다. (다운받아 사용할 경우 차후에 새로 업데이트 된 버전이 아니라는 점은 염두해두길 바란다.) <head>와 </head>사이 아래 […]
-
Javascript, jQuery 2012‧11‧08
JS-setTimeout() , clearTimeout()
setTimeout() : 시간을 지정하고 지정된 시간에 함수를 실행하게 만든다. clearTimeout() : 위에서 실행한 그 함수를 취소할 때 사용한다. setTimeout() 사용법은 아래와 같다. timer = window.setTimeout(function(){ //실행할 코드 },3000); timer라고 지정한 이유는 clearTimeout() 을 할 때 대상을 찾기 위함이다. window.setTimeout 라고 써도 되고 setTimeout 써도 된다. (이유는 window 객체를 사용하는 메소드이기 때문이다.) 3000은 3초다. 1초면 1000으로 적어 넣으면 된다. […]
-
Html, CSS 2012‧10‧20
영문 텍스트의 경우 css로 대문자 혹은 소문자로 변환시켜 노출시키기
웹사이트를 만들다보면 특정 텍스트를 대문자로 노출시켜야할 때가 있거나 일괄 소문자로 표현해야할 때가 있다. 예를 들어 This is my portfolio site. 라는 글로 아래의 변환방법을 쓰면 1. 대문자로 바꾸는 방법 text-transform:uppercase 결과는 THIS IS MY PORTFOLIO SITE. 2. 소문자로 바꾸는 방법 text-transform:lowercase 결과는 this is my portfolio site. 3. 단어의 첫글자는 대문자로 나오게 할 […]
-
Javascript, jQuery 2012‧10‧18
jQuery-브라우저 창 사이즈 조절에 따른 이벤트 만들기
브라우저를 크기 조절에 의한 이벤트를 받아 명령을 내릴 때 주로 사용한다.기본 적으로 아래처럼 사용한다. 그런데 이렇게 사용하게 되면 브라우저를 조절하는 동안에 계속해서 작동하게 되어 오히려 브라우저 성능을 저하 시켜서 느려지게 된다.그래서 보통 실무에서는 아래처럼 사용했다. 이렇게 되면 사이즈를 조절이 끝난 0.5초 후에 작동되기에 마우스로 브라우저를 조절이 멈춘 0.5초 후에 작동되게 만든 것이다.
-
Javascript, jQuery 2012‧10‧18
jQuery-마우스가 브라우저 밖으로 나갔을 때 이벤트
마우스가 브라우저를 나가는 이벤트를 받아서 활용하는 두가지 방법이 있다. 하나는 (창이 전환되었을 경우, 혹은 마우스가 다른 창을 클릭하여 화면이 바뀐 경우), $(window).blur(function() { //코드 넣는 곳 }); 다른 방법은(순전히 화면에서 마우스가 나갔을 경우), $(document).bind("mouseleave", function(){ //코드 넣는 곳 }) 두 방법은 엄연히 다르다. 자세한 설명은 .bind() 와 .blur()에 대해서 jQuery 도움말을 보면 된다.
-
Javascript, jQuery 2012‧10‧17
jQuery-마우스 움직임을 이용, 좌표값 가져오기
마우스의 좌표를 이용해서 div들을 움직이게 하고 싶은 경우가 있다. 마우스의 움직임에 대한 값을 얻어낸다면 나머지는 응용하면 된다. 마우스의 움직임. 즉, 좌표값을 얻어내는 방법은 아래와 같다. <script type="text/javascript"> jQuery(document).ready(function(){ $(document).mousemove(function(e){ $('#status').html(e.pageX +', '+ e.pageY); }); }) </script> 코드를 설명하자면 document. 즉, 브라우져 내부에서 마우스를 움직이게 되면 x값인 e.pageX와 y값인 e.pageY를 가져와서 status라는 id를 가진 곳에 노출하라라는 말이다.
-
Javascript, jQuery 2012‧10‧15
jQuery-div 높이를 창의 100%로 조절할 때 (창 사이즈 유동 적응)
div로 코딩할때 가끔 필요한 것이 height 100%가 안된다는 점이다. 제이쿼리와 자바스크립트를 이용해서 간단히 만들어 본다. function funLoad(){ var Cheight = $(window).height(); $('#container').css({'height':Cheight+'px'}); } window.onload = funLoad; window.onresize = funLoad; 윈도우가 로딩된 후 funLoad를 실행하였고, 창을 조절하면 다시 funLoad를 실행한다. funLoad는 container라는 id를 가진 div의 height값을 조절하라고 명령한다.
-
Javascript, jQuery 2012‧10‧15
jQuery-마우스 이벤트시 부모 div의 id 값 가져오기
마우스 오버의 경우를 예로 든다. $Btn.mouseover(function(){ console.log($(this).closest('div').attr('id')); } $ Btn에 마우스를 올리면 그 상위 div 중에 id 값을 얻을 수 있다.