-
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 값을 얻을 수 있다.
-
App Design, Inspiration, UI Design 2012‧10‧11
앱 디자인 영감을 얻기 위한 아이폰 앱들의 화면 캡쳐
네이버앱 : 아이콘 디자인(테두리 역할) 과 검색어 리스트화 시킨 UI 참고 KB 국민은행 : 하단의 단조로운 아이콘, 본문의 어플 아이콘 모양의 UI와 해당 디자인 참고 네이버카페앱 : 상단의 탭 디자인, 하단의 아이콘 디자인 UI 참고 다음앱 (이벤트창) : 해상도에 적합하게 컨텐츠 배열, 배경과 버튼 디자인 참고 […]
-
Html, CSS 2012‧09‧27
ul과 ol에 있는 li태그에서 들여쓰기 및 앞표시 없애기
보통 <li>는 들여쓰기가 되어 공백이 생기고, 앞에 숫자 혹은 ·(점)표시가 나는데 이것을 삭제하고 들여쓰기도 안하는 스타일 시트 ol, ul { list-style: none; margin:0px; padding:0px; }