JAVASCRIPT div 테두리 둥글게

일단 nifty 사용을 위해 css와 js를 링크시킨다

<link rel="stylesheet" type="text/css" href="/css/niftyCorners.css" />
<script type="text/javascript" src="/js/niftycube.js"></script>

페이지 시작과 동시에 함수를 호출한다.

<script type="text/javascript">
window.onload=function(){ Nifty("div#container");
Nifty("div#content,div#nav","big");
Nifty("div#header,div#footer,div#imgTest","big");
}
</script>

위 소스에서 Nifty( ) 안에 속성을 적용하고 싶은 div를 지정해 준다.
div주소 이후 "big"에는 small도 사용할 수 있고 기타 몇가지 속성이 있으나 일단 big을 사용하였다.

아래는 풀 소스

<%@ include file="/WEB-INF/jsp/common/header.jsp" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>

<link rel="stylesheet" type="text/css" href="/css/main.css"/>
<link rel="stylesheet" type="text/css" href="/css/niftyCorners.css" />

<script type="text/javascript" src="/js/niftycube.js"></script>

<script type="text/javascript">
window.onload=function(){
Nifty("div#container");
Nifty("div#content,div#nav","big");
Nifty("div#header,div#footer,div#imgTest","big");
}
</script>


<div id="container">

<div id="header"><h1>모쿠로고</h1>
<h2>신개념 쿠폰 발행/사용 서비스</h2></div>
<div id="content">

<h2>쿠폰발행하기</h2>
<p>\- 우리가게 쿠폰 \-</p>

</div>

<div id="nav">
<h2>쿠폰 검색 - 우리 동네 가게들 쿠폰 찾기</h2>
<p><input type="text" id="couponSrch" name="couponSrch" value=""/></p>
</div>
<div id="footer"><p>모쿠서비스가 궁금하세요?</p></div>
</div>



<%@ include file="/WEB-INF/jsp/common/footer.jsp" %>

main.css 소스

body{
	padding: 20px;
	color: #00008b;
	text-align: center;
    font: 85% "Trebuchet MS",Arial,sans-serif;
    }
h1,h2,p{
	margin: 0;
	padding: 0 10px;
	font-weight:normal
	}
p{
	padding: 0 10px 15px;
	text-align:center;
	}
h1{
	font-size: 250%;
	letter-spacing: 1px
	}

div#container{
	width:800px !important;
	width /**/:1024px;
    margin: 0 auto;
    padding:5px;
    text-align:center;
    height:400px;

    }
div#header{
	background: #fffff0;
	padding: 10px;
	text-align:center

	}
div#content{
	float:left;
	width:380px;
	padding:10px 0;
	margin:20px 0;
	background: #f0ffff;
	}
div#nav{
	float:right;
	width:380px;
	padding:10px 0;
	margin:20px 0;
	background: #f8f8ff
	}
div#nav h2{
	font-size: 120%;
	color: #9E4A24
	}

div#footer{
	clear:both;
	width:800px;
	background: #fffff0;
	padding:5px 0;
	text-align:center;

	}

Add Labels