본문 바로가기

레이아웃

[jQuery] jQuery 를 이용한 영역의 크기가 변하는 UI jQuery는 쓰면 쓸 수록 매력적인 라이브러리인 것 같습니다. 사용하면 할 수록 사용자가 사용하기가 아주 쉽고 편하게 되어있습니다. 이번에는 기회가 되어 클릭에 따라 영역의 크기가 변하는 UI를 제작해 보았습니다. jQuery의 쉬운 애니메이션 기능을 이용하여 간단하게 만들어보았습니다. 이걸 참조해서 다른 여러가지들도 잘 만들 수 있겠는데요? 우선 기본적인 내용을 보면, 클릭함에 따라 모든 영역들의 크기를 변화시키는 것인데요. jQuery의 특성상 아주 간단하게 만들 수 있었습니다. 하지만 요 안에 다른 영역이 잔쯕 들어간다면 상황은 좀 달라지긴 하겠죠? 하지만 특별한 컨텐츠가 없을 경우에는 아주 간단하게 구현할 수 있습니다. 아래와 같은 코드로 애니메이션을 표현할 수 있는 데요, 영영이 클릭이 되면 .. 더보기
[jQuery] jQuery를 이용한 움직이는 레이아웃 jQuery를 이용하여 움직이는 레이아웃을 제작하여 보았습니다. jQuery의 훌륭한 셀렉터와 크로스브라우징이 잘 되는 점을 이용하면 좋은 레이아웃을 많이 만들 수 있을 것 같습니다. 이번것은 클릭을 하면 활성화되는 레이아웃을 만들어보았는데요. 여러 브라우져에서 잘 되나는 더 테스트 해보아야 할 것 같습니다. slideDown()을 이용하여 움직이는 효과를 주었습니다. 잘 사용하면 참 유용할 것 같네요. 더보기

반응형