diff --git a/common/css/xe.css b/common/css/xe.css
index c8c330fa6..cdddb3605 100644
--- a/common/css/xe.css
+++ b/common/css/xe.css
@@ -45,6 +45,10 @@ a img {
 	}
 }
 
+.xe-widget-wrapper {
+	overflow: hidden;
+}
+
 /* Popup Menu Area */
 #popup_menu_area {
 	position: absolute;
diff --git a/modules/page/tpl/js/page_admin.js b/modules/page/tpl/js/page_admin.js
index 122544b66..218c14107 100644
--- a/modules/page/tpl/js/page_admin.js
+++ b/modules/page/tpl/js/page_admin.js
@@ -6,117 +6,117 @@
 
 /* 모듈 생성 후 */
 function completeInsertPage(ret_obj) {
-    var error = ret_obj['error'];
-    var message = ret_obj['message'];
+	var error = ret_obj['error'];
+	var message = ret_obj['message'];
 
-    var page = ret_obj['page'];
-    var module_srl = ret_obj['module_srl'];
+	var page = ret_obj['page'];
+	var module_srl = ret_obj['module_srl'];
 
-    alert(message);
+	alert(message);
 
-    var url = '';
-    if(location.href.getQuery('module')=='admin') {
-        url = current_url.setQuery('module_srl',module_srl).setQuery('act','dispPageAdminInfo');
-        if(page) url = url.setQuery('page',page);
-    } else {
-        url = current_url;
-    }
+	var url = '';
+	if(location.href.getQuery('module')=='admin') {
+		url = current_url.setQuery('module_srl',module_srl).setQuery('act','dispPageAdminInfo');
+		if(page) url = url.setQuery('page',page);
+	} else {
+		url = current_url;
+	}
 
-    location.href = url;
+	location.href = url;
 }
 
 function completeArticleDocumentInserted(ret_obj){
-    var error = ret_obj['error'];
-    var message = ret_obj['message'];
+	var error = ret_obj['error'];
+	var message = ret_obj['message'];
 
-    var mid = ret_obj['mid'];
+	var mid = ret_obj['mid'];
 	var is_mobile = ret_obj['is_mobile'];
 
-    alert(message);
+	alert(message);
 
-    var url = '';
+	var url = '';
 	
 	if(is_mobile == 'Y')
-        url = current_url.setQuery('act', 'dispPageAdminMobileContent').setQuery('mid', mid);
+		url = current_url.setQuery('act', 'dispPageAdminMobileContent').setQuery('mid', mid);
 	else
-        url = current_url.setQuery('act', 'dispPageIndex').setQuery('mid', mid);
+		url = current_url.setQuery('act', 'dispPageIndex').setQuery('mid', mid);
 
 
-    location.href = url;
+	location.href = url;
 }
 
 /* 내용 저장 후 */
 function completeInsertPageContent(ret_obj) {
-    var error = ret_obj['error'];
-    var message = ret_obj['message'];
+	var error = ret_obj['error'];
+	var message = ret_obj['message'];
 
-    var page = ret_obj['page'];
-    var module_srl = ret_obj['module_srl'];
-    var mid = ret_obj['mid'];
+	var page = ret_obj['page'];
+	var module_srl = ret_obj['module_srl'];
+	var mid = ret_obj['mid'];
 
-    location.href = current_url.setQuery('mid',mid).setQuery('act','');
+	location.href = current_url.setQuery('mid',mid).setQuery('act','');
 }
 
 function completeInsertMobilePageContent(ret_obj) {
-    var error = ret_obj['error'];
-    var message = ret_obj['message'];
+	var error = ret_obj['error'];
+	var message = ret_obj['message'];
 
-    var page = ret_obj['page'];
-    var module_srl = ret_obj['module_srl'];
-    var mid = ret_obj['mid'];
+	var page = ret_obj['page'];
+	var module_srl = ret_obj['module_srl'];
+	var mid = ret_obj['mid'];
 
-    location.href = current_url.setQuery('mid',mid).setQuery('act','dispPageAdminMobileContent');
+	location.href = current_url.setQuery('mid',mid).setQuery('act','dispPageAdminMobileContent');
 }
 
 /* 수정한 페이지 컨텐츠를 저장 */
 function doSubmitPageContent(fo_obj) {
-    var html = getWidgetContent();
-    fo_obj.content.value = html;
-    return procFilter(fo_obj, insert_page_content);
+	var html = getWidgetContent();
+	fo_obj.content.value = html;
+	return procFilter(fo_obj, insert_page_content);
 }
 
 function doSubmitMPageContent(fo_obj) {
-    var html = getWidgetContent();
-    fo_obj.content.value = html;
-    return procFilter(fo_obj, insert_mpage_content);
+	var html = getWidgetContent();
+	fo_obj.content.value = html;
+	return procFilter(fo_obj, insert_mpage_content);
 }
 
 /* 모듈 삭제 후 */
 function completeDeletePage(ret_obj) {
-    var error = ret_obj['error'];
-    var message = ret_obj['message'];
-    var page = ret_obj['page'];
-    alert(message);
+	var error = ret_obj['error'];
+	var message = ret_obj['message'];
+	var page = ret_obj['page'];
+	alert(message);
 
-    var url = current_url.setQuery('act','dispPageAdminContent').setQuery('module_srl','');
-    if(page) url = url.setQuery('page',page);
+	var url = current_url.setQuery('act','dispPageAdminContent').setQuery('module_srl','');
+	if(page) url = url.setQuery('page',page);
 
-    location.href = url;
+	location.href = url;
 }
 
 /* 위젯 재컴파일 */
 function doRemoveWidgetCache(module_srl) {
-    var params = new Array();
-    params["module_srl"] = module_srl;
-    exec_xml('page', 'procPageAdminRemoveWidgetCache', params, completeRemoveWidgetCache);
+	var params = new Array();
+	params["module_srl"] = module_srl;
+	exec_xml('page', 'procPageAdminRemoveWidgetCache', params, completeRemoveWidgetCache);
 }
 
 function completeRemoveWidgetCache(ret_obj) {
-    var message = ret_obj['message'];
-    location.reload(); 
+	var message = ret_obj['message'];
+	location.reload(); 
 }
 
 /* 일괄 설정 */
 function doCartSetup(url) {
-    var module_srl = new Array();
-    jQuery('#fo_list input[name=cart]:checked').each(function() {
-        module_srl[module_srl.length] = jQuery(this).val();
-    });
+	var module_srl = new Array();
+	jQuery('#fo_list input[name=cart]:checked').each(function() {
+		module_srl[module_srl.length] = jQuery(this).val();
+	});
 
-    if(module_srl.length<1) return;
+	if(module_srl.length<1) return;
 
-    url += "&module_srls="+module_srl.join(',');
-    popopen(url,'modulesSetup');
+	url += "&module_srls="+module_srl.join(',');
+	popopen(url,'modulesSetup');
 }
 
 jQuery(function($){
diff --git a/modules/widget/lang/lang.xml b/modules/widget/lang/lang.xml
index c39fed217..af32dbce1 100644
--- a/modules/widget/lang/lang.xml
+++ b/modules/widget/lang/lang.xml
@@ -443,6 +443,17 @@ Sin la necesidad de utilizar los módulos de página o del diseño de XE, Usted
 		<value xml:lang="tr"><![CDATA[Widget Boyutu]]></value>
 		<value xml:lang="vi"><![CDATA[Kích thước]]></value>
 	</item>
+	<item name="cmd_widget_css_class">
+		<value xml:lang="ko"><![CDATA[위젯 CSS class]]></value>
+		<value xml:lang="en"><![CDATA[위젯 CSS class]]></value>
+		<value xml:lang="jp"><![CDATA[위젯 CSS class]]></value>
+		<value xml:lang="zh-CN"><![CDATA[위젯 CSS class]]></value>
+		<value xml:lang="zh-TW"><![CDATA[위젯 CSS class]]></value>
+		<value xml:lang="fr"><![CDATA[위젯 CSS class]]></value>
+		<value xml:lang="es"><![CDATA[위젯 CSS class]]></value>
+		<value xml:lang="tr"><![CDATA[위젯 CSS class]]></value>
+		<value xml:lang="vi"><![CDATA[위젯 CSS class]]></value>
+	</item>
 	<item name="cmd_widget_align">
 		<value xml:lang="ko"><![CDATA[위젯 정렬]]></value>
 		<value xml:lang="en"><![CDATA[Align Widget]]></value>
diff --git a/modules/widget/tpl/js/widget.js b/modules/widget/tpl/js/widget.js
index 8b2224d1e..79b10bc6a 100644
--- a/modules/widget/tpl/js/widget.js
+++ b/modules/widget/tpl/js/widget.js
@@ -193,9 +193,9 @@ function doSyncPageContent() {
 		fo_obj.widget_padding_top.value = getPadding(sel_obj,'top');
 
 		var obj = sel_obj.firstChild;
-		while(obj && obj.className != "widgetContent") obj = obj.nextSibling;
+		while(obj && !jQuery(obj).hasClass("widgetContent")) obj = obj.nextSibling;
 
-		if(obj && obj.className == "widgetContent") {
+		if(obj && jQuery(obj).hasClass("widgetContent")) {
 			if(!fo_obj.document_srl || fo_obj.document_srl.value == '0') {
 				try {
 					var content = Base64.decode(xInnerHtml(obj));
@@ -412,6 +412,7 @@ function doAddWidgetCode(widget_code) {
 function doCheckWidget(e) {
 	var evt = new xEvent(e); if(!evt.target) return;
 	var obj = evt.target;
+	var $obj = jQuery(obj);
 
 	selectedWidget = null;
 
@@ -423,7 +424,7 @@ function doCheckWidget(e) {
 
 	doHideWidgetSizeSetup();
 	// 위젯 설정
-	if(obj.className == 'widgetSetup') {
+	if($obj.hasClass('widgetSetup')) {
 		var p_obj = obj.parentNode.parentNode;
 		var widget = p_obj.getAttribute("widget");
 		if(!widget) return;
@@ -433,7 +434,7 @@ function doCheckWidget(e) {
 		return;
 
 	// 위젯 스타일
-	} else if(obj.className == 'widgetStyle') {
+	} else if($obj.hasClass('widgetStyle')) {
 		/*jshint -W004*/
 		var p_obj = obj.parentNode.parentNode;
 		var widget = p_obj.getAttribute("widget");
@@ -444,7 +445,7 @@ function doCheckWidget(e) {
 		return;
 
 	// 위젯 복사
-	} else if(obj.className == 'widgetCopy' && obj.parentNode.parentNode.className == 'widgetOutput') {
+	} else if($obj.hasClass('widgetCopy') && jQuery(obj.parentNode.parentNode).hasClass('widgetOutput')) {
 		/*jshint -W004*/
 		var p_obj = obj.parentNode.parentNode;
 		restoreWidgetButtons();
@@ -460,7 +461,7 @@ function doCheckWidget(e) {
 			xInnerHtml(dummy,xInnerHtml(p_obj));
 
 			dummy.widget_sequence = '';
-			dummy.className = "widgetOutput";
+			jQuery(dummy).hasClass("widgetOutput");
 			for(var i=0;i<p_obj.attributes.length;i++) {
 				if(!p_obj.attributes[i].nodeName || !p_obj.attributes[i].nodeValue) continue;
 				var name = p_obj.attributes[i].nodeName.toLowerCase();
@@ -479,7 +480,7 @@ function doCheckWidget(e) {
 		return;
 
 	// 위젯 사이트/ 여백 조절
-	} else if(obj.className == 'widgetSize' || obj.className == 'widgetBoxSize') {
+	} else if($obj.hasClass('widgetSize') || $obj.hasClass('widgetBoxSize')) {
 		var p_obj = obj.parentNode.parentNode;
 		var widget = p_obj.getAttribute("widget");
 		if(!widget) return;
@@ -488,7 +489,7 @@ function doCheckWidget(e) {
 		return;
 
 	// 위젯 제거
-	} else if(obj.className == 'widgetRemove' || obj.className == 'widgetBoxRemove') {
+	} else if($obj.hasClass('widgetRemove') || $obj.hasClass('widgetBoxRemove')) {
 		var p_obj = obj.parentNode.parentNode;
 		var widget = p_obj.getAttribute("widget");
 		if(confirm(confirm_delete_msg)) {
@@ -501,7 +502,7 @@ function doCheckWidget(e) {
 	// 내용 클릭 무효화
 	var p_obj = obj;
 	while(p_obj) {
-		if(p_obj.className == 'widgetOutput') {
+		if(jQuery(p_obj).hasClass('widgetOutput')) {
 			evt.cancelBubble = true;
 			evt.returnValue = false;
 			xPreventDefault(e);
@@ -520,7 +521,7 @@ function completeCopyWidgetContent(ret_obj, response_tags, params, p_obj) {
 
 
 	dummy.widget_sequence = '';
-	dummy.className = "widgetOutput";
+	jQuery(dummy).hasClass("widgetOutput");
 	for(var i=0;i<p_obj.attributes.length;i++) {
 		if(!p_obj.attributes[i].nodeName || !p_obj.attributes[i].nodeValue) continue;
 		var name = p_obj.attributes[i].nodeName.toLowerCase();
@@ -549,16 +550,18 @@ function completeDeleteWidgetContent(ret_obj, response_tags, params, p_obj) {
 function doCheckWidgetDrag(e) {
 	var evt = new xEvent(e); if(!evt.target) return;
 	var obj = evt.target;
+	var $obj = jQuery(obj);
 
 	if(jQuery(obj).parents('#pageSizeLayer').size() > 0) return;
 
 	doHideWidgetSizeSetup();
 
-	if(obj.className == 'widgetSetup' || obj.className == 'widgetStyle' || obj.className == 'widgetCopy' || obj.className == 'widgetBoxCopy' || obj.className == 'widgetSize' || obj.className == 'widgetBoxSize' || obj.className == 'widgetRemove' || obj.className == 'widgetBoxRemove') return;
+	if($obj.hasClass('widgetSetup') || $obj.hasClass('widgetStyle') || $obj.hasClass('widgetCopy') || $obj.hasClass('widgetBoxCopy') || $obj.hasClass('widgetSize') || $obj.hasClass('widgetBoxSize') || $obj.hasClass('widgetRemove') || $obj.hasClass('widgetBoxRemove')) return;
 
 	p_obj = obj;
+	var $p_obj = jQuery(obj);
 	while(p_obj) {
-		if(p_obj.className == 'widgetOutput' || p_obj.className == 'widgetResize' || p_obj.className == 'widgetResizeLeft' || p_obj.className == 'widgetBoxResize' || p_obj.className == 'widgetBoxResizeLeft') {
+		if($p_obj.hasClass('widgetOutput') || $p_obj.hasClass('widgetResize') || $p_obj.hasClass('widgetResizeLeft') || $p_obj.hasClass('widgetBoxResize') || $p_obj.hasClass('widgetBoxResizeLeft')) {
 			widgetDragEnable(p_obj, widgetDragStart, widgetDrag, widgetDragEnd);
 			widgetMouseDown(e);
 			return;
@@ -585,12 +588,14 @@ function doShowWidgetSizeSetup(px, py, obj) {
 	if (!form.length) return;
 
 	selectedSizeWidget = obj[0];
+	var $selectedSizeWidget = jQuery(selectedSizeWidget);
 
 	var opts = {
 		widget_align : obj.css('float'),
 
-		width  : obj[0].style.width,
-		height : obj[0].style.height,
+		css_class : ($selectedSizeWidget.attr('css_class')) ? $selectedSizeWidget.attr('css_class') : '',
+		width     : obj[0].style.width,
+		height    : obj[0].style.height,
 
 		padding_left   : _getInt(obj.attr('widget_padding_left')),
 		padding_right  : _getInt(obj.attr('widget_padding_right')),
@@ -740,6 +745,12 @@ function doApplyWidgetSize(fo_obj) {
 		if(fo_obj.widget_align.selectedIndex == 1) setFloat(selectedSizeWidget, 'right');
 		else setFloat(selectedSizeWidget, 'left');
 
+		var $form = jQuery(fo_obj);
+		var $selectedSizeWidget = jQuery(selectedSizeWidget);
+
+		var css_class = $form.find('#css_class').val();
+		if(css_class) $selectedSizeWidget.attr('css_class', css_class);
+
 		var width = _getSize(fo_obj.width.value);
 		if(width) selectedSizeWidget.style.width = width;
 
@@ -781,8 +792,9 @@ function doApplyWidgetSize(fo_obj) {
 		selectedSizeWidget.style.backgroundPosition = fo_obj.background_x.value+' '+fo_obj.background_y.value;
 
 		var borderObj = selectedSizeWidget.firstChild;
+		var $borderObj = jQuery(selectedSizeWidget.firstChild);
 		while(borderObj) {
-			if(borderObj.nodeName == "DIV" && (borderObj.className == "widgetBorder" || borderObj.className == "widgetBoxBorder")) {
+			if(borderObj.nodeName == "DIV" && ($borderObj.hasClass("widgetBorder") || $borderObj.hasClass("widgetBoxBorder"))) {
 				var contentObj = borderObj.firstChild;
 				while(contentObj) {
 					if(contentObj.nodeName == "DIV") {
@@ -974,7 +986,8 @@ function widgetDragEnable(obj, funcDragStart, funcDrag, funcDragEnd) {
 
 // 드래그를 시작할때 호출되는 함수 (이동되는 형태를 보여주기 위한 작업을 함)
 function widgetDragStart(tobj, px, py) {
-	if(tobj.className == 'widgetResize' || tobj.className == 'widgetResizeLeft' || tobj.className == 'widgetBoxResize' || tobj.className == 'widgetBoxResizeLeft') return;
+	var $tobj = jQuery(tobj);
+	if($tobj.hasClass('widgetResize') || $tobj.hasClass('widgetResizeLeft') || $tobj.hasClass('widgetBoxResize') || $tobj.hasClass('widgetBoxResizeLeft')) return;
 	var obj = widgetGetTmpObject(tobj);
 
 	xInnerHtml(obj, xInnerHtml(tobj));
diff --git a/modules/widget/tpl/widget_layer.html b/modules/widget/tpl/widget_layer.html
index 4089da89d..9afbdd1be 100644
--- a/modules/widget/tpl/widget_layer.html
+++ b/modules/widget/tpl/widget_layer.html
@@ -9,6 +9,12 @@
 				<col width="140" />
 				<col />
 				<col />
+				<tr>
+					<th>{$lang->cmd_widget_css_class}</th>
+					<td colspan="2">
+						<input type="text" name="css_class" id="css_class" value=""style="width:200px" />
+					</td>
+				</tr>
 				<tr>
 					<th>{$lang->cmd_widget_align}</th>
 					<td colspan="2">
diff --git a/modules/widget/widget.controller.php b/modules/widget/widget.controller.php
index f807593cc..8c6587b9d 100644
--- a/modules/widget/widget.controller.php
+++ b/modules/widget/widget.controller.php
@@ -486,20 +486,20 @@ class widgetController extends widget
 					$oEditorController = getController('editor');
 					$body = $oEditorController->transComponent($body);
 
-					$widget_content_header = sprintf('<div %sstyle="overflow:hidden;%s"><div style="%s">', $args->id, $style,  $inner_style);
+					$widget_content_header = sprintf('<div class="xe-widget-wrapper ' . $args->css_class . '" %sstyle="%s"><div style="%s">', $args->id, $style,  $inner_style);
 					$widget_content_body = $body;
 					$widget_content_footer = '</div></div>';
 
 					break;
 					// If the widget box; it could
 				case 'widgetBox' :
-					$widget_content_header = sprintf('<div %sstyle="overflow:hidden;%s;"><div style="%s"><div>', $args->id, $style,  $inner_style);
+					$widget_content_header = sprintf('<div class="xe-widget-wrapper ' . $args->css_class . '" %sstyle="%s;"><div style="%s"><div>', $args->id, $style,  $inner_style);
 					$widget_content_body = $widgetbox_content;
 
 					break;
 					// If the General wijetil
 				default :
-					$widget_content_header = sprintf('<div %sstyle="overflow:hidden;%s">',$args->id,$style);
+					$widget_content_header = sprintf('<div class="xe-widget-wrapper ' . $args->css_class . '" %sstyle="%s">',$args->id,$style);
 					$widget_content_body = sprintf('<div style="*zoom:1;%s">%s</div>', $inner_style,$widget_content);
 					$widget_content_footer = '</div>';
 					break;
@@ -537,7 +537,7 @@ class widgetController extends widget
 					$oWidgetController = getController('widget');
 
 					$widget_content_header = sprintf(
-						'<div class="widgetOutput" widgetstyle="%s" style="%s" widget_padding_left="%s" widget_padding_right="%s" widget_padding_top="%s" widget_padding_bottom="%s" widget="widgetContent" document_srl="%d" %s>'.
+						'<div class="widgetOutput ' . $args->css_class . '" widgetstyle="%s" style="%s" widget_padding_left="%s" widget_padding_right="%s" widget_padding_top="%s" widget_padding_bottom="%s" widget="widgetContent" document_srl="%d" %s>'.
 						'<div class="widgetResize"></div>'.
 						'<div class="widgetResizeLeft"></div>'.
 						'<div class="widgetBorder">'.
@@ -571,7 +571,7 @@ class widgetController extends widget
 					}
 
 					$widget_content_header = sprintf(
-						'<div class="widgetOutput" widgetstyle="%s" widget="widgetBox" style="%s;" widget_padding_top="%s" widget_padding_right="%s" widget_padding_bottom="%s" widget_padding_left="%s" %s >'.
+						'<div class="widgetOutput ' . $args->css_class . '" widgetstyle="%s" widget="widgetBox" style="%s;" widget_padding_top="%s" widget_padding_right="%s" widget_padding_bottom="%s" widget_padding_left="%s" %s >'.
 						'<div class="widgetBoxResize"></div>'.
 						'<div class="widgetBoxResizeLeft"></div>'.
 						'<div class="widgetBoxBorder"><div class="nullWidget" style="%s">',$args->widgetstyle,$style, $widget_padding_top, $widget_padding_right, $widget_padding_bottom, $widget_padding_left,implode(' ',$attribute),$inner_style);
@@ -595,7 +595,7 @@ class widgetController extends widget
 						}
 					}
 
-					$widget_content_header = sprintf('<div class="widgetOutput" widgetstyle="%s" style="%s" widget_padding_top="%s" widget_padding_right="%s" widget_padding_bottom="%s" widget_padding_left="%s" widget="%s" %s >'.
+					$widget_content_header = sprintf('<div class="widgetOutput ' . $args->css_class . '" widgetstyle="%s" style="%s" widget_padding_top="%s" widget_padding_right="%s" widget_padding_bottom="%s" widget_padding_left="%s" widget="%s" %s >'.
 						'<div class="widgetResize"></div>'.
 						'<div class="widgetResizeLeft"></div>'.
 						'<div class="widgetBorder">',$args->widgetstyle,$style,
@@ -710,6 +710,7 @@ class widgetController extends widget
 		}
 		
 		$widget = $vars->selected_widget;
+		$vars->css_class = $request_vars->css_class;
 		$vars->widgetstyle = $request_vars->widgetstyle;
 
 		$vars->skin = trim($request_vars->skin);