Internet World/JS 썸네일형 리스트형 [jQuery] jQuery를 이용한 이미지의 마우스오버2 일전에 jQuery를 이용한 마우스오버에 대한 포스팅을 한적이 있습니다. 궁금하신 분은 여기(http://htglss.tistory.com/21)를 참조하시면 되구요. 오랜만에 블로그에 들어와서 보니 아무리 보아도 뭔가 마음에 걸리는 부분이 있어서 약간의 업그레이드를 해보았습니다. 뭐 대단한 것은 아니고 코드를 좀 줄여보았고 한가지 기능을 추가해보았습니다. 뭐 대단한 기능은 아니고 아주 간단하지만 있으면 좋을 법한 기능입니다. 일단 마우스오버 이미지를 가장 많이 사용하는 부분은 메뉴 부분이라고 할 수 있을 것 같습니다. 그런데 메뉴에서 해당페이지에 들어가 있을 때는 그 메뉴를 활성화 해놓는 것이 보기에 약간은 더 좋은 것 같으므로 그런 기능을 추가해 보았습니다. 뭐 간단한 한줄이기에 쓰지 않을 때는 없애.. 더보기 [jQuery] jQuery 를 이용한 영역의 크기가 변하는 UI jQuery는 쓰면 쓸 수록 매력적인 라이브러리인 것 같습니다. 사용하면 할 수록 사용자가 사용하기가 아주 쉽고 편하게 되어있습니다. 이번에는 기회가 되어 클릭에 따라 영역의 크기가 변하는 UI를 제작해 보았습니다. jQuery의 쉬운 애니메이션 기능을 이용하여 간단하게 만들어보았습니다. 이걸 참조해서 다른 여러가지들도 잘 만들 수 있겠는데요? 우선 기본적인 내용을 보면, 클릭함에 따라 모든 영역들의 크기를 변화시키는 것인데요. jQuery의 특성상 아주 간단하게 만들 수 있었습니다. 하지만 요 안에 다른 영역이 잔쯕 들어간다면 상황은 좀 달라지긴 하겠죠? 하지만 특별한 컨텐츠가 없을 경우에는 아주 간단하게 구현할 수 있습니다. 아래와 같은 코드로 애니메이션을 표현할 수 있는 데요, 영영이 클릭이 되면 .. 더보기 [jQuery] jQuery 를 이용한 퀵메뉴 jQuery 의 애니메이션 효과는 정말 훌륭한 것 같습니다. 아주 간단한 코드로 쉽게 애니메이션을 구현할 수 있는데요. 이 코드는 99% 회사 대리님께서 만드셨고, 제가 아주 간단한 IE6에서 안되는 문제를 해결했습니다. 여기에 올려도 이해해주시겠죠? ㅋㅋ 아무튼 사용하면 할 수록 jQuery 는 훌륭한 물건인 것 같습니다. 앞으로도 자주 사용해야겠습니다. .animate() 를 이용해서 만들었는데요. .animate({"top":100px},1000) 이런식으로 사용하면 되는데요. 한 줄의 코드로 손쉽게 애니메이션 효과를 낼 수 있습니다.. 중앙정렬 된 컨텐츠의 우측에 붙어 창 크기가 변해도 같은 위치에 오게 하였습니다. 더보기 [jQuery] jQuery 와 Flash, 두가지 메뉴의 모션 비교 플래시는 정말 훌륭한 도구인 것 같습니다. 부드러운 모션과 편리한 툴을 이용하여 멋진 UI를 구성할 수 있다는 것은 정말 높게 평가할 수 있습니다. 하지만 플러그인을 설치하여야 하고, 접근성의 문제와 컴퓨터의 많은 리소스를 차지하기 때문에 차세대 웹인 모바일에서는 별로 주목받지 못하고 있는데요. 더군다나 애플이라는 모바일의 강자에게 외면당하고 있으니 앞으로의 플래시의 행보가 걱정이 되는데요. 인터넷을 서핑하다보면 부드러운 모션과 멋진 효과들로 이루어진 메뉴들을 많이 볼 수 있습니다. 퀄리티를 보고 그곳에 우측클릭을 해보면 한번에 무엇으로 만들어졌는지 알 수 있지만, 대중적으로 플래시를 이용하여 많이 만들어지고 있습니다. 하지만 접근성 문제를 고려하고 페이지 로딩 속도등을 고려하면 플래시는 그리 좋은 선택.. 더보기 [jQuery] jQuery를 이용한 트리구조 만들기 유용한 jQuery를 이용하여 트리구조를 만들어보았습니다. 여러가지 UI가 있겠지만 이번에 만들어본것은 모든 아이템에 링크가 가능하고 "+", "-" 아이콘을 이용하여 하위 메뉴를 열고 닫을 수 있습니다. jQuery는 정말 사용할 수록 좋은 점이 너무 많은데요. 이번에 중점적으로 보아야 할 것은 두가지가 있는데요. 한가지는 어떠한 앨리먼트를 가지고 있는 개체를 선택하는 것인데요. :has(ul) 을 사용하게 되면 ul 을 가지고 있는 모든 개체를 선택할 수 있게 됩니다. 그리고 다른 한가지는, 자식요소를 선택하는 필터인데요. li:last-child 라는 것을 이용해서 li 중에 맨 마지막 자식요소 인것을 한번에 모두 선택할 수 있습니다. 정말 편한 기능이지요? 이것을 사용하게 되면 html에 일일히 .. 더보기 [javascript] 내가 사용하는 브라우저의 UserAgent 는 무엇일까요? 우리가 사용하는 브라우저들에는 여러가지가 있습니다. 가장 많이 사용하는 인터넷익스플로러를 비롯해서 모질라의 파이어폭스, 애플의 사파리, 구글의 크롬, 오페라 등등 또 모바일 브라우저 또한 다양하게 존재하는데요. 이 브라우저를 나타내는 것을 UserAgent 라고 합니다. 인터넷을 사용하시다가 보셨겠지만, 어떤 사이트들은 유저에이전트를 통해서 사용자에 따라 다른 페이지를 보여주기도 합니다. 단적인 예로, 모바일 브라우저로 포털 사이트를 접속했을 경우에는 똑같은 도메인을 입력하여도 모바일 브라우저에서는 모바일 사이트로 바로 접속이 됩니다. 그렇다면 내가 사용하고 있는 브라우저의 UserAgent 를 볼 수있는 방법을 알아보겠습니다. 아주 간단한 코드 한줄로 모든 것이 해결 가능한데요. navigator.us.. 더보기 [jQuery] jQuery를 이용한 움직이는 레이아웃 jQuery를 이용하여 움직이는 레이아웃을 제작하여 보았습니다. jQuery의 훌륭한 셀렉터와 크로스브라우징이 잘 되는 점을 이용하면 좋은 레이아웃을 많이 만들 수 있을 것 같습니다. 이번것은 클릭을 하면 활성화되는 레이아웃을 만들어보았는데요. 여러 브라우져에서 잘 되나는 더 테스트 해보아야 할 것 같습니다. slideDown()을 이용하여 움직이는 효과를 주었습니다. 잘 사용하면 참 유용할 것 같네요. 더보기 [jQuery] jQuery를 이용한 동적이 사이드메뉴 (동적메뉴) jQuery를 사용하여 동적 메뉴를 만들어보았습니다. 나라디자인의 포스트를 참고하여 약간의 수정을 통해 제작하였습니다. 상위메뉴를 클릭하면 하위메뉴가 미끄러져 나옵니다. 이런 간단한 애니메이션이 제공되니 이제는 꼭 플래시를 사용하지 않아도 될 것 같다는 생각이 드네요. 아직은 완벽하지 않지만 사용하면서 약간 수정을 해준다면 정말 유용하게 쓰일 수 있을것 같네요. 더보기 [jQuery] jQuery를 이용한 레이어 팝업 jQuery를 이용하여 레이어 팝업을 작업해 보았습니다. 접근성에는 약간 안맞는 것 같지만 여러모로 쓸모는 많은 것 같습니다. 뜨는 창을 position:absolute; 와 left:50%; top:50%; 를 이용하여 가운데 배치하였고 jQuery를 이용하여 앨리먼트의 높이와 넓이를 가져와서 컨텐츠의 크기가 어떻게 되어도 항상 가운데에 위치하게 작업하였습니다. 다만 안쪽에 들어오는 컨텐츠에 width 값을 고정을 준다면 더 안정적으로 돌아갈 것 같습니다. jQuery의 fadeIn() 과 fadeOut() 을 이용하여 좀더 예쁘게 꾸며보았습니다. 더보기 [Javascript] location 객체에 대한 생각 location 객체는 현재 문서의 URL과 관련된 정보를 가지고 있습니다. location 객체는 window 객체의 하위 객체지만 window 객첵를 생략하고 사용할 수 있습니다. 혹시 프레임을 사용된 경우에는 최상위 프레임 문서의 URL만 참조할 수 있고, 하위 프레임의 문서들은 Frames 객체를 이용합니다. 기본형태는 이렇습니다. location.속성 혹은 메소드 location.속성 = 지정값; location 객체의 속성 속성 설명 href 페이지의 URL 전체 정보를 반환합니다. URL을 지정하여 페이지를 이동할 수도 있습니다. protocol : (콜론)을 포함하는 http 나 ftp 등의 프로토콜 정보를 반환합니다. hostname 호스트의 이름과 포트번호를 반환합니다. pathname.. 더보기 이전 1 2 다음
