본문 바로가기

[jQuery] jQuery를 이용한 이미지의 마우스오버2 일전에 jQuery를 이용한 마우스오버에 대한 포스팅을 한적이 있습니다. 궁금하신 분은 여기(http://htglss.tistory.com/21)를 참조하시면 되구요. 오랜만에 블로그에 들어와서 보니 아무리 보아도 뭔가 마음에 걸리는 부분이 있어서 약간의 업그레이드를 해보았습니다. 뭐 대단한 것은 아니고 코드를 좀 줄여보았고 한가지 기능을 추가해보았습니다. 뭐 대단한 기능은 아니고 아주 간단하지만 있으면 좋을 법한 기능입니다. 일단 마우스오버 이미지를 가장 많이 사용하는 부분은 메뉴 부분이라고 할 수 있을 것 같습니다. 그런데 메뉴에서 해당페이지에 들어가 있을 때는 그 메뉴를 활성화 해놓는 것이 보기에 약간은 더 좋은 것 같으므로 그런 기능을 추가해 보았습니다. 뭐 간단한 한줄이기에 쓰지 않을 때는 없애.. 더보기
한가위와 구글 Google 메인화면 한가위 입니다. 이번 연휴의 핵심 키워드는 뭐니뭐니 해도 '수해'가 아닐까 합니다. 즐거운 명절의 시작을 엄청난 비와 함께 시작했다는 것이 "더도 말고 덜도 말고 한가위만 같아라"라는 말을 무색하게 하는데요. 항상 그때그때의 이미지로 구글의 로고를 꾸미는 구글이 이번 한가위에도 멋있는 이미지로 한가위를 맞이하였습니다. 장구를 치는 아저씨를 모델로 하여 멋진 이미지를 만들었는데요. Google 의 중간에 있는 'o'와 'g'를 빼고 그 안에 장구치는 아저씨를 넣었습니다. 매우 한국적인데요. 여기에서 제가 궁금한 점은 저는 구글의 미국 사이트를 들어갔는데 저렇게 한국의 한가위 이미지가 뜨는 것입니다. 전 세계적으로 오늘의 이벤트가 한가위만 있는 것인지 아니면 결국 한국으로 접속이 되는건지 궁금하네요. 일전에.. 더보기
[jQuery] jQuery 를 이용한 영역의 크기가 변하는 UI jQuery는 쓰면 쓸 수록 매력적인 라이브러리인 것 같습니다. 사용하면 할 수록 사용자가 사용하기가 아주 쉽고 편하게 되어있습니다. 이번에는 기회가 되어 클릭에 따라 영역의 크기가 변하는 UI를 제작해 보았습니다. jQuery의 쉬운 애니메이션 기능을 이용하여 간단하게 만들어보았습니다. 이걸 참조해서 다른 여러가지들도 잘 만들 수 있겠는데요? 우선 기본적인 내용을 보면, 클릭함에 따라 모든 영역들의 크기를 변화시키는 것인데요. jQuery의 특성상 아주 간단하게 만들 수 있었습니다. 하지만 요 안에 다른 영역이 잔쯕 들어간다면 상황은 좀 달라지긴 하겠죠? 하지만 특별한 컨텐츠가 없을 경우에는 아주 간단하게 구현할 수 있습니다. 아래와 같은 코드로 애니메이션을 표현할 수 있는 데요, 영영이 클릭이 되면 .. 더보기

반응형