[jQuery] jQuery 와 Flash, 두가지 메뉴의 모션 비교

웹/DOM 2010. 6. 29. 11:27
플래시는 정말 훌륭한 도구인 것 같습니다. 부드러운 모션과 편리한 툴을 이용하여 멋진 UI를 구성할 수 있다는 것은 정말 높게 평가할 수 있습니다. 하지만 플러그인을 설치하여야 하고, 접근성의 문제와 컴퓨터의 많은 리소스를 차지하기 때문에 차세대 웹인 모바일에서는 별로 주목받지 못하고 있는데요. 더군다나 애플이라는 모바일의 강자에게 외면당하고 있으니 앞으로의 플래시의 행보가 걱정이 되는데요.

인터넷을 서핑하다보면 부드러운 모션과 멋진 효과들로 이루어진 메뉴들을 많이 볼 수 있습니다. 퀄리티를 보고 그곳에 우측클릭을 해보면 한번에 무엇으로 만들어졌는지 알 수 있지만, 대중적으로 플래시를 이용하여 많이 만들어지고 있습니다. 하지만 접근성 문제를 고려하고 페이지 로딩 속도등을 고려하면 플래시는 그리 좋은 선택이라고는 할 수 없는데요. (일반적인 사용자는 크게 알 수 없겠지만요.) 또한 폰트 문제가 있습니다. 코드로 이루어진 것은 제작자가 원하는 임의의 폰트를 사용할 수가 없었는데요. 이제는 CSS3를 통해 거의 대부분의 브라우저가 (IE포함) 웹폰트를 지원하고 있기 때문에 폰트는 이제 큰 문제가 아닌 것 같습니다. 그렇다면 가장 큰 문제가 되는 것이 부드러운 모션이 있는데요. jQuery를 이용하면 간단한 모션 효과를 구사할 수 있습니다. 하지만 이것은 더 생각해 봐야 할 문제이긴 한데요. jQuery를 이용하여 플래시 메뉴와 비슷한 모양을 표현해보았습니다. 어디 한번 평가해 볼까요?

저작자표시 동일조건

'웹 > DOM' 카테고리의 다른 글

[jQuery] jQuery를 이용한 트리구조 만들기  (0) 2010.06.28
[jQuery] jQuery를 이용한 사이드메뉴  (0) 2010.05.25
[jQuery] jQuery를 이용한 레이어 팝업  (2) 2010.05.24
[javascript] location 객체 설명  (0) 2010.05.24
[jQuery] 라이브러리를 블러와서 사용하는 법  (0) 2010.05.20
Posted by 나의시점
,

[jQuery] jQuery를 이용한 트리구조 만들기

웹/DOM 2010. 6. 28. 16:51
유용한 jQuery를 이용하여 트리구조를 만들어보았습니다. 여러가지 UI가 있겠지만 이번에 만들어본것은 모든 아이템에 링크가 가능하고 "+", "-" 아이콘을 이용하여 하위 메뉴를 열고 닫을 수 있습니다. jQuery는 정말 사용할 수록 좋은 점이 너무 많은데요. 이번에 중점적으로 보아야 할 것은 두가지가 있는데요.

한가지는 어떠한 앨리먼트를 가지고 있는 개체를 선택하는 것인데요. :has(ul) 을 사용하게 되면 ul 을 가지고 있는 모든 개체를 선택할 수 있게 됩니다.

그리고 다른 한가지는, 자식요소를 선택하는 필터인데요. li:last-child 라는 것을 이용해서 li 중에 맨 마지막 자식요소 인것을 한번에 모두 선택할 수 있습니다.

정말 편한 기능이지요? 이것을 사용하게 되면 html에 일일히 클래스명을 주지 않아도 공통점이 있는 자신이 원하는 요소마다 같은 클래스명을 한번에 줄 수 있게 됩니다. 그렇다면 본격적으로 한번 보면 좋을 것 같은데요. 작업의 스트레스와 피로도를 최소화 하기 위해 걸그룹과 함께 작업하였습니다. jQuery 와 걸그룹의 절묘한 만남!


위와 같은 형태로 트리구조를 만들어 보았습니다.


저작자표시 동일조건

'웹 > DOM' 카테고리의 다른 글

[jQuery] jQuery 와 Flash, 두가지 메뉴의 모션 비교  (0) 2010.06.29
[jQuery] jQuery를 이용한 사이드메뉴  (0) 2010.05.25
[jQuery] jQuery를 이용한 레이어 팝업  (2) 2010.05.24
[javascript] location 객체 설명  (0) 2010.05.24
[jQuery] 라이브러리를 블러와서 사용하는 법  (0) 2010.05.20
Posted by 나의시점
,

[jQuery] jQuery를 이용한 사이드메뉴

웹/DOM 2010. 5. 25. 11:31
jQuery를 사용하여 동적 메뉴를 만들어보았습니다. 나라디자인의 포스트를 참고하여 약간의 수정을 통해 제작하였습니다. 상위메뉴를 클릭하면 하위메뉴가 미끄러져 나옵니다. 이런 간단한 애니메이션이 제공되니 이제는 꼭 플래시를 사용하지 않아도 될 것 같다는 생각이 드네요.

아직은 완벽하지 않지만 사용하면서 약간 수정을 해준다면 정말 유용하게 쓰일 수 있을것 같네요.


저작자표시 동일조건

'웹 > DOM' 카테고리의 다른 글

[jQuery] jQuery 와 Flash, 두가지 메뉴의 모션 비교  (0) 2010.06.29
[jQuery] jQuery를 이용한 트리구조 만들기  (0) 2010.06.28
[jQuery] jQuery를 이용한 레이어 팝업  (2) 2010.05.24
[javascript] location 객체 설명  (0) 2010.05.24
[jQuery] 라이브러리를 블러와서 사용하는 법  (0) 2010.05.20
Posted by 나의시점
,

[jQuery] jQuery를 이용한 레이어 팝업

웹/DOM 2010. 5. 24. 17:34
jQuery를 이용하여 레이어 팝업을 작업해 보았습니다. 접근성에는 약간 안맞는 것 같지만 여러모로 쓸모는 많은 것 같습니다. 뜨는 창을 position:absolute; 와 left:50%; top:50%; 를 이용하여 가운데 배치하였고 jQuery를 이용하여 앨리먼트의 높이와 넓이를 가져와서 컨텐츠의 크기가 어떻게 되어도 항상 가운데에 위치하게 작업하였습니다. 다만 안쪽에 들어오는 컨텐츠에 width 값을 고정을 준다면 더 안정적으로 돌아갈 것 같습니다.

jQuery의 fadeIn() 과 fadeOut() 을 이용하여 좀더 예쁘게 꾸며보았습니다.


저작자표시 동일조건

'웹 > DOM' 카테고리의 다른 글

[jQuery] jQuery를 이용한 트리구조 만들기  (0) 2010.06.28
[jQuery] jQuery를 이용한 사이드메뉴  (0) 2010.05.25
[javascript] location 객체 설명  (0) 2010.05.24
[jQuery] 라이브러리를 블러와서 사용하는 법  (0) 2010.05.20
[jQuery] jQuery를 이용한 메뉴  (0) 2010.05.10
Posted by 나의시점
,

[javascript] location 객체 설명

웹/DOM 2010. 5. 24. 11:58
location 객체는 현재 문서의 URL과 관련된 정보를 가지고 있습니다. location 객체는 window 객체의 하위 객체지만 window 객첵를 생략하고 사용할 수 있습니다. 혹시 프레임을 사용된 경우에는 최상위 프레임 문서의 URL만 참조할 수 있고, 하위 프레임의 문서들은 Frames 객체를 이용합니다.

기본형태는 이렇습니다.

location.속성 혹은 메소드
location.속성 = 지정값;

location 객체의 속성

 속성 설명
href
  페이지의 URL 전체 정보를 반환합니다. URL을 지정하여 페이지를 이동할 수도 있습니다.
protocol
  : (콜론)을 포함하는 http 나 ftp 등의 프로토콜 정보를 반환합니다.
 hostname  호스트의 이름과 포트번호를 반환합니다.
 pathname  URL 경로부분의 정보를 반환합니다.
 port  포트번호를 반환합니다.
 search  ? (물음표) 이후의 값을 불러옵니다. 파라미터
 hash  지정한 앵커를 설정한 곳으로 이동하거나 앵커 이름을 반환합니다.

location 객체의 메소드

 메소드 설명
reload()
  Reflash 합니다.
replace()
  현재 URL을 지정한 URL로 바꾸고 이전페이지로 돌아갈 수 없게 합니다.


간단한 사용예로 reflash 버튼을 만들어보면 이렇습니다.

<a href="javascript:location.reload();">새로고침</a>

저작자표시 동일조건

'웹 > DOM' 카테고리의 다른 글

[jQuery] jQuery를 이용한 사이드메뉴  (0) 2010.05.25
[jQuery] jQuery를 이용한 레이어 팝업  (2) 2010.05.24
[jQuery] 라이브러리를 블러와서 사용하는 법  (0) 2010.05.20
[jQuery] jQuery를 이용한 메뉴  (0) 2010.05.10
[jQuery] jQuery를 이용한 최근게시물보기(Latest) v1.0  (0) 2010.05.10
Posted by 나의시점
,

[jQuery] 라이브러리를 블러와서 사용하는 법

웹/DOM 2010. 5. 20. 14:30
jQuery는 정말 좋은 라이브러리 같습니다. 위의 그림에서 볼 수 있듯이 작은 용랼으로 CSS3를 준수하고 크로스브라우징을 거의 완벽하게 구현해줍니다. CSS 스타일링을 비롯해 약간의 애니메이션까지 구현할 수 있으니 정말 금상첨화 입니다. 일단 이러한 jQuery를 사용하기 위에서는 문서상단에 이 라이브러리를 불러와야 하는데요. 물론 파일을 받아서 자신이 사용하고자 하는 서버에 올려 사용할 수도 있지만. CDN(Contents Delivery Network)이란게 있더라구요. 그래서 오늘은 jQuery CDN Host 에 대해 알아볼까 합니다.

1. jQuery CDN

http://code.jquery.com/jquery-1.4.2.min.js   (Minified version)

http://code.jquery.com/jquery-1.4.2.js   (Source version)

jQuery 홈페이지에 공개된 것은 위의 두개이지만 이것저것을 입력해본 결과 다른 것들도 있었습니다.

http://code.jquery.com/jquery.js

http://code.jquery.com/jquery-latest.js

위의 두개는 모두 같이 jquery-1.4.2.js 파일이 열립니다. 현재 최근것이 1.4.2라 그런 것 같습니다.


2. Google Ajax API CDN

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

Google Ajax CDN Documentation


3. Microsoft CDN

http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js

Microsoft Ajax CDN Documentation


이런것들을 이용하면 jQuery 라이브러리를 굳이 다운받아서 서버에 업로드 하지 않아도 코드 한줄로 jQuery를 사용 가능하게 할 수 있습니다. 또한 http://code.jquery.com/jquery.js 와 http://code.jquery.com/jquery-latest.js 와 같은 경우는 라이브러리가 업데이트 되더라도 새로운 버젼을 다시 받아서 업데이트 해주지 않아도 계속 최근의 라이브러리를 사용할 수 있게 됩니다.

참고이자 조금 신기한 사실은 jQuery 홈페이지에서는 Google API CDN 을 사용한다는 것. 참으로 이상하지 않을 수 없습니다.

아무튼 jQuery를 잘 사용하여 더 편리한 인터넷 세상을 만들어야겠습니다.
저작자표시 동일조건

'웹 > DOM' 카테고리의 다른 글

[jQuery] jQuery를 이용한 레이어 팝업  (2) 2010.05.24
[javascript] location 객체 설명  (0) 2010.05.24
[jQuery] jQuery를 이용한 메뉴  (0) 2010.05.10
[jQuery] jQuery를 이용한 최근게시물보기(Latest) v1.0  (0) 2010.05.10
[jQuery] jQuery를 이용한 자주묻는질문(FAQ) v1.0  (0) 2010.05.10
Posted by 나의시점
,

[jQuery] jQuery를 이용한 메뉴

웹/DOM 2010. 5. 10. 14:55
jQuery를 이용하여 구성한 메뉴 <ul>태그를 이용하여 2 depth 까지 구성고, 탭키를 이용하여도 사용 가능하게 제작하였습니다. 2 depth 메뉴의 자세한 위치나 모양 등은 적용하는 사이트에 알맞게 customizing 하여 사용하면 되리리 생각됩니다. 메뉴의 구체적인 구조를 참고할 때 사용하면 좋을 것 같습니다.


저작자표시 비영리 동일조건

'웹 > DOM' 카테고리의 다른 글

[javascript] location 객체 설명  (0) 2010.05.24
[jQuery] 라이브러리를 블러와서 사용하는 법  (0) 2010.05.20
[jQuery] jQuery를 이용한 최근게시물보기(Latest) v1.0  (0) 2010.05.10
[jQuery] jQuery를 이용한 자주묻는질문(FAQ) v1.0  (0) 2010.05.10
[jQuery] jQuery를 이용한 이미지의 마우스오버 효과  (0) 2010.05.07
Posted by 나의시점
,

[jQuery] jQuery를 이용한 최근게시물보기(Latest) v1.0

웹/DOM 2010. 5. 10. 11:42
탭을 이용하여 최근게시물을 카테고리 별로 출력해주는 것은 많은 사이트의 메인페이지에서 사용됩니다. 그래서 이번에는 jQuery를 이용하여 최근게시물을 작업해보았습니다. jQuery의 편리하 Selector를 이용하며 간당하게 구성하였습니다. <h3> 태그를 이용하여 카테고리의 타이틀을 표현했고 unordered list 를 이용하여 게시물을 출력하였습니다. 그리고 more 링크는 현재 표현되어 있는 게시판으로 이동하는 기능을 수행하도록 작업되었습니다.

<h3><a href="#" id="latest1" onmouseover="latest_action(1);" onfocus="latest_action(1);">메뉴1</a></h3>
<ul class="list" id="list1">
    <li><a href="#">게시글 11 입니다.</a></li>
    <li><a href="#">게시글 12 입니다.</a></li>
    <li><a href="#">게시글 13 입니다.</a></li>
    <li><a href="#">게시글 14 입니다.</a></li>
</ul>
<p class="more" id="more1"><a href="#more1">more</a></p>


저작자표시 동일조건

'웹 > DOM' 카테고리의 다른 글

[javascript] location 객체 설명  (0) 2010.05.24
[jQuery] 라이브러리를 블러와서 사용하는 법  (0) 2010.05.20
[jQuery] jQuery를 이용한 메뉴  (0) 2010.05.10
[jQuery] jQuery를 이용한 자주묻는질문(FAQ) v1.0  (0) 2010.05.10
[jQuery] jQuery를 이용한 이미지의 마우스오버 효과  (0) 2010.05.07
Posted by 나의시점
,

[jQuery] jQuery를 이용한 자주묻는질문(FAQ) v1.0

웹/DOM 2010. 5. 10. 10:56
jQuery를 이용하여 자주묻는질문(FAQ)를 동적으로 구성하여 보았습니다. 마크업을 할 때는 항상 어떤 앨리먼트로 마크업을 할까 하는 고민을 하게 되는데, 딱히 완벽한 정답은 없는 것 같습니다. 이번에는 definition list 를 사용해보았습니다. 의미를 따져보면 이런 의미인데 괜찮지 않을까요?


그렇게 해서 <dt>에 질문 <dd>에 답변 해서 마크업을 했습니다. 그리고 jQuery의 slideDown() 을 이용하여 보여지는 것을 나타냈습니다.



새창으로 보기

'웹 > DOM' 카테고리의 다른 글

[javascript] location 객체 설명  (0) 2010.05.24
[jQuery] 라이브러리를 블러와서 사용하는 법  (0) 2010.05.20
[jQuery] jQuery를 이용한 메뉴  (0) 2010.05.10
[jQuery] jQuery를 이용한 최근게시물보기(Latest) v1.0  (0) 2010.05.10
[jQuery] jQuery를 이용한 이미지의 마우스오버 효과  (0) 2010.05.07
Posted by 나의시점
,

[jQuery] jQuery를 이용한 이미지의 마우스오버 효과

웹/DOM 2010. 5. 7. 18:04
jQuery는 참 좋은 물건인 것 같습니다. 이 놈만 가지고 있으면 정말 많은 것들을 편하게 할 수 있는 것 같습니다. 무엇보다 jQuery의 장점은 selector라고 생각하는데 이번에는 그 선택자를 이용한 이미지의 마우스 오버효과를 구현해 보았습니다.
일단 몇가지를 준비합니다. 먼저 이미지를 일정하게 만들어야 하는데, 다른 것은 없습니다. 평상시에 나오는 이미지와 마우스를 올렸을 때 보여질 이미지 두개를 만드는데, 이미지의 파일명을 동일하게, 그리고 이미지의 파일명의 맨 마지막에 “_on”, “_off” 를 붙여주면 됩니다. 물론 확장자도 상관이 없구요. (혹시나 확장자명이 4글자나 2글자일 경우에 문제가 생길 수 있지만 그럴 일은 별로 없겠죠? 그렇다면 이 것은 3글자일 경우에만 사용하기로 합시다.) 그런다음 jQuery를 다운로드 받아서 링크를 시킵니다. 작업을 할 때는 v1.4.2를 사용하였습니다. 다운받고 뭐하고 하는게 귀찮으시다면,,,,

다운로드 링크
http://code.jquery.com/jquery-1.4.2.min.js

이렇게 한줄을 긁어와서 구글api에 있는 것을 가지고 오는 것도 좋은 방법일 듯 하네요. 이렇게 되면 모든 준비는 끝났습니다. 작업을 시작하면 되는데요.

구글api의 jQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

코드는 이렇게 넣으시면 됩니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>rollover jQuery</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
img {border:none; display:block;}
</style>
</head>
<body>
<p>jQuery v1.4.2 loaded.</p>
<a href="#"><img src="img/jq_mo_01_off.jpg" alt="Monday" class="image_rollover" /></a>
<a href="#"><img src="img/jq_mo_02_off.jpg" alt="Tuesday" class="image_rollover" /></a>
<a href="#"><img src="img/jq_mo_03_off.jpg" alt="Wednesday" class="image_rollover" /></a>
<a href="#"><img src="img/jq_mo_04_off.jpg" alt="Thursday" class="image_rollover" /></a>
<a href="#"><img src="img/jq_mo_05_off.jpg" alt="Friday" class="image_rollover" /></a>
<a href="#"><img src="img/jq_mo_06_off.jpg" alt="Saturday" class="image_rollover" /></a>
<a href="#"><img src="img/jq_mo_07_off.jpg" alt="Sunday" class="image_rollover" /></a>
<script type="text/javascript">
$("img.image_rollover").mouseover(function(){
           var temp = $(this).attr("src");
           var length = temp.length;
           var file_name = temp.substring(0, length-6)
           var status = temp.substring(length-6).substring(0,2); //ff
           var file_type = temp.substring(length-6).substring(3);
           if (status == "ff") $(this).attr("src", file_name + "n." + file_type);
}).mouseout(function(){
           var temp = $(this).attr("src");
           var length = temp.length;
           var file_name = temp.substring(0, length-6)
           var status = temp.substring(length-6).substring(0,2); //on
           var file_type = temp.substring(length-6).substring(3);
           if (status == "on") $(this).attr("src", file_name + "off." + file_type);
});
</script>
</body>
</html>

스크립트 부분을 모든 페이지에서 동작하게 해주고 사용하려는 이미지에 "image_rollover"라는 클래스 명을 주면 모든페이지에서 사용할 수 있습니다. 아래는 사용예 입니다.

'웹 > DOM' 카테고리의 다른 글

[javascript] location 객체 설명  (0) 2010.05.24
[jQuery] 라이브러리를 블러와서 사용하는 법  (0) 2010.05.20
[jQuery] jQuery를 이용한 메뉴  (0) 2010.05.10
[jQuery] jQuery를 이용한 최근게시물보기(Latest) v1.0  (0) 2010.05.10
[jQuery] jQuery를 이용한 자주묻는질문(FAQ) v1.0  (0) 2010.05.10
Posted by 나의시점
,

티스토리툴바