corner()를 이용한 둥글게둥글게 모서리
jQuery 2012. 8. 27. 12:11
페이지 디자인을 할 때 모서리가 둥글게 나온 디자인이 필요하면
테이블 코딩으로 3x3 갈라서(...) 왼쪽 위 둥근 테두리 오른쪽 위 둥근 테두리 좌하둥테 우하둥테 이미지 배경깔고 그렇게 한 적이 있..는데
jQuery를 이용하면 그럴 필요가 없게 됐네요 엄청나다!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
1. jquery.corner.js 를 인클루드한다.
2. 아래 소스를 추가한다.
<script type="text/javascript">
$(document).ready(function () {
$("#rndBox").corner("6px");
});
$(document).ready(function () {
$("#rndBox").corner("6px");
});
</script>
<style type="text/css">
div#rndBox { width:90%; height:50px; border:1px solid #CFCFCF; background-color:#EFEFEF; }
</style>
<div id="rndBox">우왑 동그란 모서리 :D</div>
3. 끝.
끝?? 끝???? jQuery 내 사랑을 받아줘요 엉엉
#rndBox에는 모서리를 둥글둥글하게 해 줄 곳의 id를 지정해주면 됩니다.
6px에는 얼마나 둥글게 할건지 지정해주면 됩니다. 숫자가 클수록 크게 둥글둥글둥글해집니다.
jquery.corner.js 파일은 이곳(http://jquery.malsup.com/corner/)에서 받으세요
* 라운드 뿐만 아니라 매우 다양하고 예쁘고 유용한 모서리 예제가 많습니다.
