From 5140047b5fc9ffcc137b206c62c71daa87abd1d9 Mon Sep 17 00:00:00 2001
From: Min-Soo Kim <misol.kr@gmail.com>
Date: Sun, 26 Feb 2017 01:05:57 +0900
Subject: [PATCH] =?UTF-8?q?=EB=84=A4=EB=AA=A8=EC=9D=98=20=EA=BF=88/=20?=
 =?UTF-8?q?=EC=BB=A8=ED=85=90=EC=B8=A0=20=EC=9C=84=EC=A0=AF=20=EC=8A=A4?=
 =?UTF-8?q?=ED=82=A8=20(#712)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 컨텐츠 모듈 스킨

- 사이트 테마를 따르지 않고 다른 색을 선택할 수 있도록 네모의 꿈 회원 스킨 컬러셋 추가.
- 탭이 많을 때 터치 환경이 아니면 좌우로 넘기기 어려운 점을 고려하여서 메뉴를 펼침.
- 작은 화면에서 화면을 최대한 활용하도록, 레이아웃 햄버거 메뉴를 부드럽게 나타내고 감춥니다.

## 위젯에서 LESS/SCSS 의 사용
- 변수를 위젯 캐시에도 전달할 수 있도록 해서 LESS 나 SCSS 에 값 전달이 가능하도록 함.
- LESS 나 SCSS 를 사용한 경우에 위젯 코드 캐싱 코드가 적절하게 기록되도록 해서 LESS나 SCSS 를 사용
가능하도록 수정.

## 그 외 변화
- Reduce the number of regular expressions.
---
 classes/display/HTMLDisplayHandler.php        |  14 +-
 classes/template/TemplateHandler.class.php    |  11 +-
 layouts/simple_world/layout.html              |   2 +-
 layouts/simple_world/layout.js                |   6 +-
 .../skins/simple_world/common_header.html     |   7 +-
 .../member/skins/simple_world/css/css.less    |   7 +-
 modules/member/skins/simple_world/skin.xml    |  90 ++++-
 .../skins/simple_world/common_header.html     |   4 +-
 .../skins/xedition/http_status_code.html      |   2 +-
 modules/page/page.mobile.php                  |   2 +-
 modules/page/page.view.php                    |   2 +-
 modules/widget/widget.controller.php          |  30 +-
 widgets/content/content.class.php             |  26 +-
 .../skins/simple_rectangle/_tab_left.html     |  38 ++
 .../skins/simple_rectangle/_tab_none.html     |  15 +
 .../skins/simple_rectangle/_tab_top.html      |  18 +
 .../skins/simple_rectangle/content.html       |  79 +++++
 .../skins/simple_rectangle/css/css.css        | 274 +++++++++++++++
 .../skins/simple_rectangle/css/css.less       | 328 ++++++++++++++++++
 .../skins/simple_rectangle/gallery.html       |  32 ++
 .../skins/simple_rectangle/image_title.html   |   1 +
 .../simple_rectangle/image_title_content.html |  39 +++
 .../simple_rectangle/js/content_widget.js     |  42 +++
 .../skins/simple_rectangle/normal.html        |  29 ++
 .../content/skins/simple_rectangle/skin.xml   | 107 ++++++
 .../skins/simple_rectangle/title_content.html | 108 ++++++
 26 files changed, 1286 insertions(+), 27 deletions(-)
 create mode 100644 widgets/content/skins/simple_rectangle/_tab_left.html
 create mode 100644 widgets/content/skins/simple_rectangle/_tab_none.html
 create mode 100644 widgets/content/skins/simple_rectangle/_tab_top.html
 create mode 100644 widgets/content/skins/simple_rectangle/content.html
 create mode 100644 widgets/content/skins/simple_rectangle/css/css.css
 create mode 100644 widgets/content/skins/simple_rectangle/css/css.less
 create mode 100644 widgets/content/skins/simple_rectangle/gallery.html
 create mode 100644 widgets/content/skins/simple_rectangle/image_title.html
 create mode 100644 widgets/content/skins/simple_rectangle/image_title_content.html
 create mode 100644 widgets/content/skins/simple_rectangle/js/content_widget.js
 create mode 100644 widgets/content/skins/simple_rectangle/normal.html
 create mode 100644 widgets/content/skins/simple_rectangle/skin.xml
 create mode 100644 widgets/content/skins/simple_rectangle/title_content.html

diff --git a/classes/display/HTMLDisplayHandler.php b/classes/display/HTMLDisplayHandler.php
index 71f12b91a..aa67124a2 100644
--- a/classes/display/HTMLDisplayHandler.php
+++ b/classes/display/HTMLDisplayHandler.php
@@ -174,7 +174,7 @@ class HTMLDisplayHandler
 		$output = preg_replace_callback('!<meta(.*?)(?:\/|)>!is', array($this, '_moveMetaToHeader'), $output);
 
 		// change a meta fine(widget often put the tag like <!--Meta:path--> to the content because of caching)
-		$output = preg_replace_callback('/<!--(#)?Meta:([a-z0-9\_\-\/\.\@\:]+)-->/is', array($this, '_transMeta'), $output);
+		$output = preg_replace_callback('/<!--(#)?Meta:([a-z0-9\_\-\/\.\@\:]+)(\?\$\_\_Context\-\>[a-z0-9\_\-\/\.\@\:]+)?-->/is', array($this, '_transMeta'), $output);
 
 		// handles a relative path generated by using the rewrite module
 		if(Context::isAllowRewrite())
@@ -370,9 +370,17 @@ class HTMLDisplayHandler
 		{
 			return '';
 		}
-		Context::loadFile($matches[2]);
+		if($matches[3])
+		{
+			$vars = Context::get(str_replace('?$__Context->', '', $matches[3]));
+			Context::loadFile(array($matches[2], null, null, null, $vars));
+		}
+		else
+		{
+			Context::loadFile($matches[2]);
+		}
 	}
-	
+
 	/**
 	 * Add OpenGraph metadata tags.
 	 * 
diff --git a/classes/template/TemplateHandler.class.php b/classes/template/TemplateHandler.class.php
index 0105173f8..b91bf8db8 100644
--- a/classes/template/TemplateHandler.class.php
+++ b/classes/template/TemplateHandler.class.php
@@ -805,6 +805,7 @@ class TemplateHandler
 							else
 							{
 								$metafile = $attr['target'];
+								$metavars = ($attr['vars'] ? self::_replaceVar($attr['vars']) : '');
 								$result = "\$__tmp=array('{$attr['target']}','{$attr['media']}','{$attr['targetie']}','{$attr['index']}'," . ($attr['vars'] ? self::_replaceVar($attr['vars']) : 'array()') . ");Context::loadFile(\$__tmp);unset(\$__tmp);";
 							}
 							break;
@@ -813,7 +814,15 @@ class TemplateHandler
 					$result = "<?php {$result} ?>";
 					if($metafile)
 					{
-						$result = "<!--#Meta:{$metafile}-->" . $result;
+						if(!$metavars)
+						{
+							$result = "<!--#Meta:{$metafile}-->" . $result;
+						}
+						else
+						{
+							// LESS or SCSS needs the variables to be substituted.
+							$result = "<!--#Meta:{$metafile}?{$metavars}-->" . $result;
+						}
 					}
 
 					return $result;
diff --git a/layouts/simple_world/layout.html b/layouts/simple_world/layout.html
index 0df133005..fa7b72184 100644
--- a/layouts/simple_world/layout.html
+++ b/layouts/simple_world/layout.html
@@ -48,7 +48,7 @@
 {Context::addMetaTag("theme-color", $material_colors[$layout_info->primary_color])}
 
 <!--// Load styles -->
-{Context::set('layout_scss_value', array('grey' => $material_colors['grey'], 'primary_color' => $material_colors[$layout_info->primary_color], 'menu_position' => $layout_info->menu_position, 'content_color' => $layout_info->content_color))}
+{@Context::set('layout_scss_value', array('grey' => $material_colors['grey'], 'primary_color' => $material_colors[$layout_info->primary_color], 'menu_position' => $layout_info->menu_position, 'content_color' => $layout_info->content_color))}
 <load target="layout.scss" vars="$layout_scss_value" />
 <load target="layout.js" />
 
diff --git a/layouts/simple_world/layout.js b/layouts/simple_world/layout.js
index 6e2798cbf..9f1c21668 100644
--- a/layouts/simple_world/layout.js
+++ b/layouts/simple_world/layout.js
@@ -67,8 +67,10 @@ $(function()
 		{
 			if($("#layout_menu_toggle").css( 'position' ) === 'fixed')
 			{
-				$("#layout_menu_toggle").fadeIn();
-				$("#layout_menu_toggle").css('display', '');
+				$("#layout_menu_toggle").fadeIn(400, function() {
+					$("#layout_menu_toggle").css('display', '')
+				});
+				;
 			}
 		}
 		previousScroll = currentScroll;
diff --git a/modules/member/skins/simple_world/common_header.html b/modules/member/skins/simple_world/common_header.html
index 7cf42c832..6092d1867 100644
--- a/modules/member/skins/simple_world/common_header.html
+++ b/modules/member/skins/simple_world/common_header.html
@@ -41,8 +41,8 @@
 <block cond="$layout_info->extra_var->primary_color->type !== 'select' && $layout_info->extra_var->customized_primary_color->type !== 'colorpicker'">
 	{@$layout_info->primary_color = 'blue';}
 </block>
-
 <!--// Load styles -->
+{@$colorset = $material_colors[$member_config->colorset];}
 {@$skin_color = $material_colors[$layout_info->primary_color];}
 <block cond="!$skin_color">
 	<!--@if(preg_match("/#([a-f0-9]{3}){1,2}/i", $layout_info->primary_color))-->
@@ -54,7 +54,10 @@
 		{@$skin_color = '#f44336'}
 	<!--@endif-->
 </block>
-{Context::set('simple_less_value', array('red' => hexdec(substr($skin_color, 1, 2)), 'green' => hexdec(substr($skin_color, 3, 2)), 'blue' => hexdec(substr($skin_color, 5, 2)) ))}
+<block cond="$colorset">
+	{@$skin_color = $colorset}
+</block>
+{@Context::set('simple_less_value', array('red' => hexdec(substr($skin_color, 1, 2)), 'green' => hexdec(substr($skin_color, 3, 2)), 'blue' => hexdec(substr($skin_color, 5, 2)) ))}
 <load target="css/css.less" vars="$simple_less_value" />
 <section class="rx_simple_member">
 	<div class="rx_simple_tab" cond="$is_logged && $logged_info->menu_list && (!$member_srl || $member_srl == $logged_info->member_srl)">
diff --git a/modules/member/skins/simple_world/css/css.less b/modules/member/skins/simple_world/css/css.less
index 00efe8d14..43156161b 100644
--- a/modules/member/skins/simple_world/css/css.less
+++ b/modules/member/skins/simple_world/css/css.less
@@ -188,9 +188,6 @@ script, style
 .rx_simple_member div.rx_simple_tab{
 	background: #ffffff;
 	margin: 5px 0;
-	height: 52px;
-	overflow: hidden;
-	white-space: nowrap;
 	box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23);
 	box-sizing: border-box;
 }
@@ -198,9 +195,7 @@ script, style
 	list-style: outside none none;
 	margin: 0;
 	display: block;
-	overflow-x: auto;
-	-webkit-overflow-scrolling: touch;
-	padding: 6px 0px 100px;
+	padding: 6px 0;
 	text-decoration: none;
 
 }
diff --git a/modules/member/skins/simple_world/skin.xml b/modules/member/skins/simple_world/skin.xml
index 4bf108777..6bb950ac7 100644
--- a/modules/member/skins/simple_world/skin.xml
+++ b/modules/member/skins/simple_world/skin.xml
@@ -11,6 +11,94 @@
 		<name xml:lang="en">misol</name>
 	</author>
 
-	<colorset type="colorpicker">
+	<colorset>
+		<color name="theme">
+			<title xml:lang="ko">사이트 테마 색</title>
+			<title xml:lang="en">The site theme color</title>
+		</color>
+		<color name="red">
+			<title xml:lang="ko">붉은 색</title>
+			<title xml:lang="en">Red</title>
+		</color>
+		<color name="crimson">
+			<title xml:lang="ko">크림슨</title>
+			<title xml:lang="en">Crimson</title>
+		</color>
+		<color name="pink">
+			<title xml:lang="ko">분홍</title>
+			<title xml:lang="en">Pink</title>
+		</color>
+		<color name="purple">
+			<title xml:lang="ko">보라</title>
+			<title xml:lang="en">Purple</title>
+		</color>
+		<color name="deep-purple">
+			<title xml:lang="ko">진보라</title>
+			<title xml:lang="en">Deep Purple</title>
+		</color>
+		<color name="indigo">
+			<title xml:lang="ko">인디고</title>
+			<title xml:lang="en">Indigo</title>
+		</color>
+		<color name="deep-blue">
+			<title xml:lang="ko">짙은 파랑</title>
+			<title xml:lang="en">Deep Blue</title>
+		</color>
+		<color name="blue">
+			<title xml:lang="ko">파랑</title>
+			<title xml:lang="en">Blue</title>
+		</color>
+		<color name="light-blue">
+			<title xml:lang="ko">밝은 파랑</title>
+			<title xml:lang="en">Light Blue</title>
+		</color>
+		<color name="cyan">
+			<title xml:lang="ko">시안</title>
+			<title xml:lang="en">Cyan</title>
+		</color>
+		<color name="teal">
+			<title xml:lang="ko">틸</title>
+			<title xml:lang="en">Teal</title>
+		</color>
+		<color name="green">
+			<title xml:lang="ko">초록</title>
+			<title xml:lang="en">Green</title>
+		</color>
+		<color name="light-green">
+			<title xml:lang="ko">연한 초록</title>
+			<title xml:lang="en">Light Green</title>
+		</color>
+		<color name="lime">
+			<title xml:lang="ko">라임</title>
+			<title xml:lang="en">Lime</title>
+		</color>
+		<color name="yellow">
+			<title xml:lang="ko">노랑</title>
+			<title xml:lang="en">Yellow</title>
+		</color>
+		<color name="amber">
+			<title xml:lang="ko">앰버</title>
+			<title xml:lang="en">Amber</title>
+		</color>
+		<color name="orange">
+			<title xml:lang="ko">주황</title>
+			<title xml:lang="en">Orange</title>
+		</color>
+		<color name="deep-orange">
+			<title xml:lang="ko">진한 주황</title>
+			<title xml:lang="en">Deep Orange</title>
+		</color>
+		<color name="brown">
+			<title xml:lang="ko">갈색</title>
+			<title xml:lang="en">Brown</title>
+		</color>
+		<color name="grey">
+			<title xml:lang="ko">회색</title>
+			<title xml:lang="en">Grey</title>
+		</color>
+		<color name="blue-grey">
+			<title xml:lang="ko">푸른 회색</title>
+			<title xml:lang="en">Blue Grey</title>
+		</color>
 	</colorset>
 </skin>
diff --git a/modules/message/skins/simple_world/common_header.html b/modules/message/skins/simple_world/common_header.html
index e92d2b510..3f5be653b 100644
--- a/modules/message/skins/simple_world/common_header.html
+++ b/modules/message/skins/simple_world/common_header.html
@@ -1,5 +1,5 @@
 <!--// responsible layout -->
-{Context::addMetaTag("viewport", "width=device-width, user-scalable=yes")}
+{@Context::addMetaTag("viewport", "width=device-width, user-scalable=yes")}
 
 <!--// Check layout. If it is Simple World, select layout primary colors as a primary color of this skin -->
 {@
@@ -57,6 +57,6 @@
 		{@$skin_color = '#f44336'}
 	<!--@endif-->
 </block>
-{Context::set('simple_less_value', array('red' => hexdec(substr($skin_color, 1, 2)), 'green' => hexdec(substr($skin_color, 3, 2)), 'blue' => hexdec(substr($skin_color, 5, 2)) ))}
+{@Context::set('simple_less_value', array('red' => hexdec(substr($skin_color, 1, 2)), 'green' => hexdec(substr($skin_color, 3, 2)), 'blue' => hexdec(substr($skin_color, 5, 2)) ))}
 <load target="css/message.less" vars="$simple_less_value" />
 <section class="rx_simple_message">
\ No newline at end of file
diff --git a/modules/message/skins/xedition/http_status_code.html b/modules/message/skins/xedition/http_status_code.html
index 5666332e7..39cc450d6 100644
--- a/modules/message/skins/xedition/http_status_code.html
+++ b/modules/message/skins/xedition/http_status_code.html
@@ -1,5 +1,5 @@
 <!--// META -->
-{Context::addHtmlHeader('<meta name="viewport" content="width=1240">')}
+{@Context::addHtmlHeader('<meta name="viewport" content="width=1240">')}
 <!--// CSS -->
 <style>
 .xedition-error {
diff --git a/modules/page/page.mobile.php b/modules/page/page.mobile.php
index ded07abaf..b912d89e2 100644
--- a/modules/page/page.mobile.php
+++ b/modules/page/page.mobile.php
@@ -64,7 +64,7 @@ class pageMobile extends pageView
 				if($mtime + $interval*60 > $_SERVER['REQUEST_TIME']) 
 				{
 					$page_content = FileHandler::readFile($cache_file); 
-					$page_content = preg_replace('@<\!--#Meta:@', '<!--Meta:', $page_content);
+					$page_content = str_replace('<!--#Meta:', '<!--Meta:', $page_content);
 				} 
 				else 
 				{
diff --git a/modules/page/page.view.php b/modules/page/page.view.php
index 4ecf25774..a27c03feb 100644
--- a/modules/page/page.view.php
+++ b/modules/page/page.view.php
@@ -69,7 +69,7 @@ class pageView extends page
 			if($mtime + $this->interval*60 > $_SERVER['REQUEST_TIME'])
 			{
 				$page_content = FileHandler::readFile($this->cache_file); 
-				$page_content = preg_replace('@<\!--#Meta:@', '<!--Meta:', $page_content);
+				$page_content = str_replace('<!--#Meta:', '<!--Meta:', $page_content);
 			}
 			else
 			{
diff --git a/modules/widget/widget.controller.php b/modules/widget/widget.controller.php
index 25ba43df8..ff39a044d 100644
--- a/modules/widget/widget.controller.php
+++ b/modules/widget/widget.controller.php
@@ -395,7 +395,16 @@ class widgetController extends widget
 		$cache_data = Rhymix\Framework\Cache::get('widget_cache:' . $widget_sequence);
 		if ($cache_data)
 		{
-			return preg_replace('@<\!--#Meta:@', '<!--Meta:', $cache_data);
+			// Load the variables, need to load the LESS or SCSS files.
+			if(is_object($cache_data))
+			{
+				foreach ($cache_data->variables as $key => $value)
+				{
+					Context::set($key, $value);
+				}
+				$cache_data = $cache_data->content;
+			}
+			return str_replace('<!--#Meta:', '<!--Meta:', $cache_data);
 		}
 
 		$oWidget = $this->getWidgetObject($widget);
@@ -404,9 +413,26 @@ class widgetController extends widget
 		$widget_content = $oWidget->proc($args);
 		$oModuleController = getController('module');
 		$oModuleController->replaceDefinedLangCode($widget_content);
-		
+
 		Rhymix\Framework\Cache::set('widget_cache:' . $widget_sequence, $widget_content, $widget_cache, true);
 
+		// Keep the variables, need to load the LESS or SCSS files.
+		if(preg_match_all('/<!--#Meta:([a-z0-9\_\-\/\.\@\:]+)(\?\$\_\_Context\-\>[a-z0-9\_\-\/\.\@\:]+)?-->/is', $widget_content, $widget_var_matches, PREG_SET_ORDER))
+		{
+			$cache_content = new stdClass();
+			$cache_content->content = $widget_content;
+			$cache_content->variables = new stdClass();
+			foreach($widget_var_matches as $matches)
+			{
+				if($matches[2])
+				{
+					$key = str_replace('?$__Context->', '', $matches[2]);
+					$cache_content->variables->{$key} = Context::get($key);
+				}
+			}
+			Rhymix\Framework\Cache::set('widget_cache:' . $widget_sequence, $cache_content, $widget_cache, true);
+		}
+
 		return $widget_content;
 	}
 
diff --git a/widgets/content/content.class.php b/widgets/content/content.class.php
index 5ae6f3eb5..1a02ef5f9 100644
--- a/widgets/content/content.class.php
+++ b/widgets/content/content.class.php
@@ -204,6 +204,7 @@ class content extends WidgetHandler
 			$attribute = $oComment->getObjectVars();
 			$title = $oComment->getSummary($args->content_cut_size);
 			$thumbnail = $oComment->getThumbnail($args->thumbnail_width,$args->thumbnail_height,$args->thumbnail_type);
+			$thumbnail_x2 = $oComment->getThumbnail($args->thumbnail_width * 2, $args->thumbnail_height * 2, $args->thumbnail_type);
 			$url = sprintf("%s#comment_%s",getUrl('','document_srl',$oComment->get('document_srl')),$oComment->get('comment_srl'));
 
 			$attribute->mid = $args->mid_lists[$attribute->module_srl];
@@ -214,6 +215,7 @@ class content extends WidgetHandler
 			$content_item->adds($attribute);
 			$content_item->setTitle($title);
 			$content_item->setThumbnail($thumbnail);
+			$content_item->setThumbnail($thumbnail_x2, 2);
 			$content_item->setLink($url);
 			$content_item->setDomain($domain);
 			$content_item->add('mid', $args->mid_lists[$attribute->module_srl]);
@@ -283,6 +285,7 @@ class content extends WidgetHandler
 				$module_srl = $oDocument->get('module_srl');
 				$category_srl = $oDocument->get('category_srl');
 				$thumbnail = $oDocument->getThumbnail($args->thumbnail_width,$args->thumbnail_height,$args->thumbnail_type);
+				$thumbnail_x2 = $oDocument->getThumbnail($args->thumbnail_width * 2,$args->thumbnail_height * 2,$args->thumbnail_type);
 
 				$content_item = new contentItem( $args->module_srls_info[$module_srl]->browser_title );
 				$content_item->adds($oDocument->getObjectVars());
@@ -293,6 +296,7 @@ class content extends WidgetHandler
 				$content_item->setContent($oDocument->getSummary($args->content_cut_size));
 				$content_item->setLink( getSiteUrl($domain,'','document_srl',$document_srl) );
 				$content_item->setThumbnail($thumbnail);
+				$content_item->setThumbnail($thumbnail_x2, 2);
 				$content_item->setExtraImages($oDocument->printExtraImages($args->duration_new * 60 * 60));
 				$content_item->add('mid', $args->mid_lists[$module_srl]);
 				if($first_thumbnail_idx==-1 && $thumbnail) $first_thumbnail_idx = $i;
@@ -347,6 +351,7 @@ class content extends WidgetHandler
 			$content = $oDocument->getSummary($args->content_cut_size);
 			$url = sprintf("%s#%s",$oDocument->getPermanentUrl() ,$oDocument->getCommentCount());
 			$thumbnail = $oDocument->getThumbnail($args->thumbnail_width,$args->thumbnail_height,$args->thumbnail_type);
+			$thumbnail_x2 = $oDocument->getThumbnail($args->thumbnail_width * 2, $args->thumbnail_height * 2, $args->thumbnail_type);
 			$extra_images = $oDocument->printExtraImages($args->duration_new);
 
 			$content_item = new contentItem($browser_title);
@@ -355,6 +360,7 @@ class content extends WidgetHandler
 			$content_item->setContent($content);
 			$content_item->setLink($url);
 			$content_item->setThumbnail($thumbnail);
+			$content_item->setThumbnail($thumbnail_x2, 2);
 			$content_item->setExtraImages($extra_images);
 			$content_item->setDomain($domain);
 			$content_item->add('mid', $args->mid_lists[$attribute->module_srl]);
@@ -825,9 +831,14 @@ class contentItem extends Object
 	{
 		$this->add('title', escape(strip_tags($title), false));
 	}
-	function setThumbnail($thumbnail)
+	function setThumbnail($thumbnail, $source_size = 1)
 	{
-		$this->add('thumbnail', $thumbnail);
+		if($source_size === 1)
+		{
+			$this->add('thumbnail', $thumbnail);
+		} else {
+			$this->add('thumbnail_x' . $source_size, $thumbnail);
+		}
 	}
 	function setContent($content)
 	{
@@ -931,9 +942,16 @@ class contentItem extends Object
 	{
 		return $this->has_first_thumbnail_idx;
 	}
-	function getThumbnail()
+	function getThumbnail($source_size = 1)
 	{
-		return $this->get('thumbnail');
+		if(intval($source_size) === 1)
+		{
+			return $this->get('thumbnail');
+		}
+		else
+		{
+			return $this->get('thumbnail_x' . intval($source_size));
+		}
 	}
 	function getMemberSrl() 
 	{
diff --git a/widgets/content/skins/simple_rectangle/_tab_left.html b/widgets/content/skins/simple_rectangle/_tab_left.html
new file mode 100644
index 000000000..ca3eb53d8
--- /dev/null
+++ b/widgets/content/skins/simple_rectangle/_tab_left.html
@@ -0,0 +1,38 @@
+{@
+	$misol_contents = array();
+	$misol_contents_count = 0;
+}
+{$widget_info->content_type}
+<!--@if($widget_info->page_count > 1)-->
+	{@$misol_contents_count = $widget_info->list_count * $widget_info->page_count}
+<!--@else-->
+	{@$misol_contents_count = $widget_info->list_count}
+<!--@end-->
+
+<!--@foreach($widget_info->tab as $module_srl => $tab)-->
+	{@ $contents_key = ''; }
+	<block loop="$tab->content_items => $key, $item">
+		{@
+			$contents_key = intval(preg_replace("/[^0-9]*/s", '', $item->getLink()));
+			$misol_contents[$contents_key] = $item;
+		}
+	</block>
+<!--@end-->
+
+{@ krsort($misol_contents);}
+{@$i = 0;}
+<!--@foreach($misol_contents as $key => $val)-->
+	{@$i = $i + 1;}
+	<!--@if($i > $misol_contents_count)-->
+		{@ unset($misol_contents[$key])}
+	<!--@end-->
+<!--@end-->
+{@
+	$tab = new stdClass();
+	$tab->content_items = $misol_contents;
+	$tab->title = $lang->all;
+	$tab->url = getUrl('mid',Context::get('mid'));
+	$tab->tab_type = 'all';
+}
+{@ array_unshift($widget_info->tab, $tab) }
+<!--#include("./_tab_top.html")-->
\ No newline at end of file
diff --git a/widgets/content/skins/simple_rectangle/_tab_none.html b/widgets/content/skins/simple_rectangle/_tab_none.html
new file mode 100644
index 000000000..dc6d855fd
--- /dev/null
+++ b/widgets/content/skins/simple_rectangle/_tab_none.html
@@ -0,0 +1,15 @@
+<h1 class="misolTop" cond="count($widget_info->modules_info) === 1">
+{@$soo_module_info = current($widget_info->modules_info);}
+	<a href="{getUrl('','mid',$soo_module_info->mid)}" target="_blank"|cond="$widget_info->new_window" class="misol_top_a">{$soo_module_info->browser_title}</a>
+</h1>
+<!--@if($widget_info->list_type == "gallery")-->
+	<!--#include("./gallery.html")-->
+<!--@elseif($widget_info->list_type == "image_title")-->
+	<!--#include("./image_title.html")-->
+<!--@elseif($widget_info->list_type == "image_title_content")-->
+	<!--#include("./image_title_content.html")-->
+<!--@elseif($widget_info->list_type == "title_content")-->
+	<!--#include("./title_content.html")-->
+<!--@else-->
+	<!--#include("./normal.html")-->
+<!--@end-->
\ No newline at end of file
diff --git a/widgets/content/skins/simple_rectangle/_tab_top.html b/widgets/content/skins/simple_rectangle/_tab_top.html
new file mode 100644
index 000000000..761286a01
--- /dev/null
+++ b/widgets/content/skins/simple_rectangle/_tab_top.html
@@ -0,0 +1,18 @@
+<div class="misolTab">
+	<ul class="simple_contentTabA widgetTab">
+	{@$i=0}
+		<li loop="$widget_info->tab => $module_srl, $tab" class="active"|cond="$i==0"><a href="{$tab->url}" onmouseover="content_widget_tab_show(jQuery(this),jQuery(this).parents('div.misolTab').next('dl.simple_columns'),{$i})" onclick="this.onmouseover();return false;"><span>{$tab->title}</span></a>{@$i++}</li>
+	</ul>
+</div>
+
+<dl class="simple_columns">
+{@$i=0}
+<!--@foreach($widget_info->tab as $module_srl => $tab)-->
+	<dt>{$tab->title}</dt>
+	<dd <!--@if($i==0)--> class="open"<!--@end-->>
+		{@$widget_info->content_items = $tab->content_items}
+		<!--#include("_tab_none.html")-->
+	</dd>
+{@$i++}
+<!--@end-->
+</dl>
diff --git a/widgets/content/skins/simple_rectangle/content.html b/widgets/content/skins/simple_rectangle/content.html
new file mode 100644
index 000000000..1b8cf0bff
--- /dev/null
+++ b/widgets/content/skins/simple_rectangle/content.html
@@ -0,0 +1,79 @@
+<load target="./js/content_widget.js" cond="$widget_info->page_count || count($widget_info->tab)" />
+<!--// Check layout. If it is Simple World, select layout primary colors as a primary color of this skin -->
+{@$layout_info = Context::get('layout_info')}
+{@
+	$material_colors = array(
+		'red'	=>	'#f44336',
+		'crimson'	=>	'#aa0000',
+		'pink'	=>	'#e91e63',
+		'purple'	=>	'#9c27b0',
+		'deep-purple'	=>	'#673ab7',
+		'indigo'	=>	'#3f51b5',
+		'deep-blue'	=>	'#00397f',
+		'blue'	=>	'#2196f3',
+		'light-blue'	=>	'#03a9f4',
+		'cyan'	=>	'#00bcd4',
+		'teal'	=>	'#009688',
+		'green'	=>	'#4caf50',
+		'light-green'	=>	'#8bc34a',
+		'lime'	=>	'#cddc39',
+		'yellow'	=>	'#ffeb3b',
+		'amber'	=>	'#ffc107',
+		'orange'	=>	'#ff9800',
+		'deep-orange'	=>	'#ff5722',
+		'brown'	=>	'#795548',
+		'grey'	=>	'#9e9e9e',
+		'blue-grey'	=>	'#607d8b',
+		'black'	=>	'#000000',
+		'white'	=>	'#ffffff',
+		'customized'	=>	$layout_info->customized_primary_color,
+	);
+}
+<block cond="$layout_info->extra_var->primary_color->type === 'select' || $layout_info->extra_var->customized_primary_color->type === 'colorpicker'">
+	{@
+		if(!$layout_info->primary_color && $layout_info->customized_primary_color)
+			$layout_info->primary_color = 'customized';
+		if(!$layout_info->primary_color)
+			$layout_info->primary_color = 'red';
+		if(!$layout_info->customized_primary_color)
+			$layout_info->customized_primary_color = '#f44336';
+	}
+</block>
+<block cond="$layout_info->extra_var->primary_color->type !== 'select' && $layout_info->extra_var->customized_primary_color->type !== 'colorpicker'">
+	{@$layout_info->primary_color = 'blue';}
+</block>
+<!--// Load styles -->
+{@$colorset = $material_colors[$colorset];}
+{@$skin_color = $material_colors[$layout_info->primary_color];}
+<block cond="!$skin_color">
+	<!--@if(preg_match("/#([a-f0-9]{3}){1,2}/i", $layout_info->primary_color))-->
+		{@$skin_color = $layout_info->primary_color}
+		<!--@if(strlen($layout_info->primary_color) === 4)-->
+			{@$skin_color = $layout_info->primary_color[1].$layout_info->primary_color[1].$layout_info->primary_color[2].$layout_info->primary_color[2].$layout_info->primary_color[3].$layout_info->primary_color[3]}
+		<!--@endif-->
+	<!--@else-->
+		{@$skin_color = '#f44336'}
+	<!--@endif-->
+</block>
+<block cond="$colorset">
+	{@$skin_color = $colorset}
+</block>
+{@Context::set('less_color', array('red' => hexdec(substr($skin_color, 1, 2)), 'green' => hexdec(substr($skin_color, 3, 2)), 'blue' => hexdec(substr($skin_color, 5, 2)), 'thumbnail_height' => intval($widget_info->thumbnail_height), 'thumbnail_width' => intval($widget_info->thumbnail_width)))}
+<load target="css/css.less" vars="$less_color" />
+
+<div class="widgetContainer">
+	<div class="simple_content">
+		<section class="simple_content">
+			<!--@if($widget_info->tab_type  == "tab_left" && count($widget_info->tab) > 1)-->
+				<!--#include("./_tab_left.html")-->
+			<!--@elseif($widget_info->tab_type == "tab_top" && count($widget_info->tab) > 1)-->
+				<!--#include("./_tab_top.html")-->
+			<!--@else-->
+				<!--@if($widget_info->tab_type  == "tab_left" || $widget_info->tab_type == "tab_top")-->
+					{@$widget_info->content_items = $widget_info->tab[0]->content_items}
+				<!--@end-->
+				<!--#include("./_tab_none.html")-->
+			<!--@end-->
+		</section>
+	</div>
+</div>
\ No newline at end of file
diff --git a/widgets/content/skins/simple_rectangle/css/css.css b/widgets/content/skins/simple_rectangle/css/css.css
new file mode 100644
index 000000000..594c5117f
--- /dev/null
+++ b/widgets/content/skins/simple_rectangle/css/css.css
@@ -0,0 +1,274 @@
+@charset "UTF-8";
+/* sample code for css.less by misol */
+div.simple_content {
+	font-family: "맑은 고딕", "Apple SD Gothic Neo", "나눔고딕", NanumGothic, 'Nanum Gothic', Arial, Helvetica, sans-serif;
+	font-size: 14px;
+	padding: 3px;
+}
+section.simple_content {
+	font-size: 14px;
+	background-color: #fff;
+	box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23);
+}
+.simple_content ul.simple_content_list {
+	margin: 0;
+	padding: 0 8px;
+}
+.simple_content .simple_content_list .cont_a {
+	color: #222;
+	display: block;
+	letter-spacing: -1px;
+	line-height: 18px;
+	overflow: hidden;
+	padding: 0.667em 3px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	text-decoration: none;
+}
+.simple_content .simple_content_list .cont_a:hover {
+	color: #2196f3;
+}
+.simple_content .cont_a {
+	color: #222;
+	display: block;
+	letter-spacing: -1px;
+	overflow: hidden;
+	padding: 0.467em 0;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	text-decoration: none;
+}
+.simple_content .content_image {
+	display: inline-block;
+	float: left;
+	position: relative;
+	margin-right: 5px;
+}
+.simple_content .content_basic {
+	position: relative;
+	display: inline-block;
+	max-width: 100%;
+	vertical-align: middle;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.simple_content .content_category {
+	color: #2196f3;
+	font-family: HelveticaNeue-Light, AppleSDGothicNeo-Light, sans-serif-light, sans-serif;
+	margin: 0 7px 0 3px;
+}
+.simple_content .simple_gallery_item .content_category {
+	position: absolute;
+	top: 0;
+	right: 0;
+	background: #fff;
+	margin: 0;
+}
+.simple_content .content_nickname,
+.simple_content .content_recnt {
+	color: #616161;
+	font-size: 12px;
+	margin: 0 3px 0 7px;
+	overflow: hidden;
+}
+.simple_content ul.simple_contentTabA {
+	list-style: outside none none;
+	padding: 0;
+	margin: 0;
+}
+.simple_content .simple_content_list li {
+	position: relative;
+	border-top: 1px solid #e0e0e0;
+	overflow: hidden;
+	padding: 0;
+}
+.simple_content	.simple_content_list li:first-child,
+.simple_content.simple_content_list li.first-child {
+	border-top: 0 none;
+}
+.simple_content .content_recnt {
+	position: absolute;
+	height: 18px;
+	width: 44px;
+	text-align: right;
+	font-size: 13px;
+	margin: 3px;
+	top: 0.6em;
+	right: 15px;
+}
+.simple_content .simple_content_list li.content_reext .cont_a {
+	padding-right: 70px;
+}
+.simple_content h1.misolTop {
+	border-bottom: 1px solid #e0e0e0;
+	font-weight: 400;
+	margin: 0;
+	position: relative;
+}
+.simple_content h1.misolTop .misol_top_a {
+	display: block;
+	margin: 0;
+	padding: 10px;
+	text-decoration: none;
+}
+.simple_content div.simple_gallery {
+	overflow: hidden;
+	width: 100%;
+	height: 137px;
+	white-space: nowrap;
+	box-sizing: border-box;
+}
+div.simple_gallery ul.simple_gallery {
+	display: block;
+	list-style: outside none none;
+	padding: 6px 0px 100px;
+	margin: 0;
+	overflow-x: auto;
+	-webkit-overflow-scrolling: touch;
+}
+div.simple_gallery ul.simple_gallery > li {
+	position: relative;
+	display: inline-block;
+	width: 100px;
+	padding: 7px;
+}
+div.simple_gallery ul.simple_gallery>li .cont_a {
+	position: relative;
+	padding: 0;
+	width: 100px;
+}
+div.simple_gallery ul.simple_gallery>li .gallery_text>span {
+	display: block;
+	width: 100px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+div.simple_gallery ul.simple_gallery>li .gallery_text>span.content_nickname {
+	margin: 0;
+	text-align: right;
+}
+div.simple_gallery ul.simple_gallery>li .cont_a:hover {
+	color: #2196f3;
+}
+.simple_gallery_item .fake_img,
+.simple_content_list .content_image {
+	display: inline-block;
+	box-sizing: border-box;
+	background: #fff;
+	border: 1px solid #e0e0e0;
+	color: #000;
+	width: 100px;
+	height: 75px;
+	vertical-align: middle;
+	text-align: center;
+	line-height: 75px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.simple_content div.misolTab {
+	overflow: hidden;
+	width: 100%;
+	height: 52px;
+	white-space: nowrap;
+	border-bottom: 1px solid #e0e0e0;
+	box-sizing: border-box;
+}
+.simple_content ul.simple_contentTabA {
+	display: block;
+	overflow-x: auto;
+	-webkit-overflow-scrolling: touch;
+	padding: 6px 0px 100px;
+	text-decoration: none;
+}
+.simple_content ul.simple_contentTabA>li {
+	display: inline-block;
+	height: 40px;
+	line-height: 18px;
+	position: relative;
+}
+.simple_content ul.simple_contentTabA>li a {
+	display: inline-block;
+	color: #000;
+	font-weight: 400;
+	letter-spacing: -1px;
+	line-height: 40px;
+	text-decoration: none;
+}
+.simple_content ul.simple_contentTabA>li a:hover,
+.simple_content ul.simple_contentTabA>li.active a,
+.simple_content h1.misolTop .misol_top_a {
+	color: #2196f3;
+}
+.simple_content ul.simple_contentTabA>li a span {
+	border-left: 1px solid #e0e0e0;
+	padding: 0 15px;
+}
+.simple_content ul.simple_contentTabA>li:first-child a span {
+	border-left: 0 none;
+}
+.simple_content dl.simple_columns {
+	margin: 0;
+	padding: 0;
+}
+.simple_content dl.simple_columns dt {
+	position: absolute;
+	width: 0;
+	height: 0;
+	overflow: hidden;
+	font-size: 0;
+	line-height: 0;
+}
+.simple_content dl.simple_columns dd {
+	display: none;
+	margin: 0;
+}
+.widgetContainer .simple_content .open {
+	display: block !important;
+}
+.simple_content .simple_content_nav {
+	text-align: center;
+	color: #616161;
+	margin: 0;
+	padding: 10px 0;
+	border-top: 1px solid #e0e0e0;
+}
+.simple_content .simple_content_nav button {
+	background-color: transparent;
+	color: inherit;
+	border: 0 none;
+	cursor: pointer;
+	line-height: 20px;
+	height: 35px;
+	width: 100%;
+	margin: 0;
+	font-size: 15px;
+}
+.simple_content .simple_content_nav li button:hover {
+	color: #2196f3;
+}
+.simple_content .simple_content_nav li button i {
+	font-size: 16px;
+	line-height: 16px;
+}
+.simple_content_list.simple_content_webzine .simple_gallery_image {
+	position: relative;
+	width: 100px;
+	float: left;
+}
+.simple_content_list.simple_content_webzine .content_basic {
+	display: block;
+	padding: 10px;
+	margin: 0;
+}
+.simple_content_list.simple_content_webzine .content_basic .simple_content_longtext {
+	display: block;
+	margin: 7px 0;
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
diff --git a/widgets/content/skins/simple_rectangle/css/css.less b/widgets/content/skins/simple_rectangle/css/css.less
new file mode 100644
index 000000000..13906cb0e
--- /dev/null
+++ b/widgets/content/skins/simple_rectangle/css/css.less
@@ -0,0 +1,328 @@
+@charset "UTF-8";
+/*
+	@method .text-contrast()
+	@author misol <misol.kr@gmail.com>
+	@brief Select a text color according to WCAG 2.0 contrast guideline. The calcualtion of contrast follows the formula on the guideline.
+*/
+.text-contrast(@bg_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i >= 100) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) )) {
+	color: @bright_color;
+}
+.text-contrast(@bg_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i >= 100) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) > ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) )) {
+	color: @dark_color;
+}
+.text-contrast(@bg_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i < 100) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) )) and ( ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) ) > 4.5 * @multi ) {
+	color: @bright_color;
+}
+.text-contrast(@bg_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i < 100) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) ) ) and ( ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) ) =< 4.5 * @multi )  {
+	.text-contrast(@bg_color; lighten(@bright_color, 5%); @dark_color; @multi; @i + 1);
+}
+.text-contrast(@bg_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i < 100) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) > ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) )) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) > 4.5 * @multi ) {
+	color: @dark_color;
+}
+.text-contrast(@bg_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i < 100) and (( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) > ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) )) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< 4.5 * @multi ) {
+	.text-contrast(@bg_color; @bright_color; darken(@dark_color, 5%); @multi; @i + 1);
+}
+
+/*
+	@method .bg-contrast()
+	@author misol <misol.kr@gmail.com>
+	@brief Select a background color, which has less contrast background color than WCAG 2.0 contrast guideline. On the WCAG 2.0 guideline, bigger string can have less contrast as 3.0.
+*/
+.bg-contrast(@text_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i >= 100) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) )) {
+	background: @bright_color;
+}
+.bg-contrast(@text_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i >= 100) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) > ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) )) {
+	background: @dark_color;
+}
+
+.bg-contrast(@text_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i < 100) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) )) and ( ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) ) > 3 * @multi ) {
+	background: @bright_color;
+}
+.bg-contrast(@text_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i < 100) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) ) ) and ( ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) ) =< 3 * @multi )  {
+	.bg-contrast(@text_color; lighten(@bright_color,3%); @dark_color; @multi; @i + 1);
+}
+.bg-contrast(@text_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i < 100) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) > ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) )) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) > 3 * @multi ) {
+	background: @dark_color;
+}
+.bg-contrast(@text_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i < 100) and (( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) > ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) )) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< 3 * @multi ) {
+	.bg-contrast(@text_color; @bright_color; darken(@dark_color, 3%); @multi; @i + 1);
+}
+
+/* As LESS library in Rhymix substitude variables as an strings, convert colors as the color objects of LESS. */
+@color: rgb(@red, @green, @blue);
+
+/* 앱 전체 스타일 */
+div.simple_content
+{
+	font-family: "맑은 고딕", "Apple SD Gothic Neo","나눔고딕",NanumGothic,'Nanum Gothic',Arial,Helvetica,sans-serif;
+	font-size: 14px;
+	padding: 3px;
+}
+section.simple_content
+{
+	font-size: 14px;
+	background-color: #fff;
+	box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23);
+}
+/* 글 목록 스타일 */
+.simple_content ul.simple_content_list { margin:0; padding:0 8px;}
+.simple_content .simple_content_list .cont_a {
+	color: #222;
+	display: block;
+	letter-spacing: -1px;
+	line-height: 18px;
+	overflow: hidden;
+	padding: 0.667em 3px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	text-decoration: none;
+}
+.simple_content .simple_content_list .cont_a:hover {
+	.text-contrast(#fff; darken(@color,5%); lighten(@color,5%));
+}
+.simple_content .cont_a {
+	color: #222;
+	display: block;
+	letter-spacing: -1px;
+	overflow: hidden;
+	padding: 0.467em 0;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	text-decoration: none;
+}
+.simple_content .content_image {
+	display:block;
+	left:0;
+	position:absolute;
+}
+.simple_content .content_basic{
+	position:relative;
+	display:inline-block;
+	max-width:100%;
+	box-sizing: border-box;
+	vertical-align: middle;
+	overflow:hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.simple_content .content_basic.content_with_thumbnail{
+	line-height: @thumbnail_height + 0px;
+	vertical-align:middle;
+	padding-left: @thumbnail_width + 5px;
+}
+.simple_content .content_category {
+	.text-contrast(#fff; darken(@color,5%); lighten(@color,5%));
+	font-family: HelveticaNeue-Light,AppleSDGothicNeo-Light,sans-serif-light,sans-serif;
+	margin: 0 7px 0 3px;
+}
+.simple_content .simple_gallery_item .content_category {
+	position: absolute;
+	top: 0;
+	right: 0;
+	background: #fff;
+	margin: 0;
+}
+.simple_content .content_nickname, .simple_content .content_recnt{
+	color: #616161;
+	font-size: 12px;
+	margin: 0 3px 0 7px;
+	overflow:hidden;
+}
+.simple_content ul.simple_contentTabA {
+	list-style: outside none none;
+	padding: 0;
+	margin: 0;
+}
+
+.simple_content .simple_content_list li {
+	position:relative;
+	border-top: 1px solid #e0e0e0;
+	overflow: hidden;
+	padding:0;
+}
+.simple_content  .simple_content_list li:first-child, .simple_content.simple_content_list li.first-child{
+	border-top: 0 none;
+}
+.simple_content .content_recnt{ /* 코멘트 */
+	position:absolute;
+	height:18px;
+	width:44px;
+	text-align:right;
+	font-size: 13px;
+	margin:3px;
+	top:0.6em;
+	right:15px;
+}
+.simple_content .content_recnt.content_with_thumbnail{
+	height: @thumbnail_height + 0px;
+	line-height: @thumbnail_height + 0px;
+	vertical-align:middle;
+}
+
+.simple_content .simple_content_list li.content_reext .cont_a { /* 코멘트 있는 항목 */
+	padding-right:70px;
+}
+/* 상단 제목 스타일 */
+.simple_content h1.misolTop {
+	border-bottom: 1px solid #e0e0e0;
+	font-weight: 400;
+	margin: 0;
+	position: relative;
+}
+.simple_content h1.misolTop .misol_top_a {
+	display: block;
+	margin: 0;
+	padding: 10px;
+	text-decoration: none;
+}
+/* 갤러리 스타일 */
+.simple_content div.simple_gallery{
+	overflow: hidden;
+	width:100%;
+	height: @thumbnail_height + 62px;
+	white-space: nowrap;
+	box-sizing: border-box;
+}
+div.simple_gallery ul.simple_gallery{
+	display: block;
+	list-style: outside none none;
+	padding: 6px 0px 100px;
+	margin: 0;
+	overflow-x: auto;
+	-webkit-overflow-scrolling: touch;
+}
+div.simple_gallery ul.simple_gallery > li{
+	position: relative;
+	display: inline-block;
+	width: @thumbnail_width + 0px;
+	padding: 7px;
+}
+div.simple_gallery ul.simple_gallery>li .cont_a{
+	position: relative;
+	padding:0;
+	width: @thumbnail_width + 0px;
+}
+div.simple_gallery ul.simple_gallery>li .gallery_text>span
+{
+	display: block;
+	width: @thumbnail_width + 0px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+div.simple_gallery ul.simple_gallery>li .gallery_text>span.content_nickname
+{
+	margin: 0;
+	text-align: right;
+}
+div.simple_gallery ul.simple_gallery>li .cont_a:hover {
+	.text-contrast(#fff; darken(@color,5%); lighten(@color,5%));
+}
+.simple_gallery_item .fake_img, .simple_content_list .content_image{
+	display: inline-block;
+	box-sizing: border-box;
+	background: #fff;
+	border: 1px solid #e0e0e0;
+	color: #000;
+	width: @thumbnail_width + 0px;
+	height: @thumbnail_height + 0px;
+	vertical-align: middle;
+	text-align: center;
+	line-height: @thumbnail_height + 0px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+/* 상단 탭 스타일 */
+.simple_content div.misolTab{
+	overflow: hidden;
+	width:100%;
+	height: 52px;
+	white-space: nowrap;
+	border-bottom: 1px solid #e0e0e0;
+	box-sizing: border-box;
+}
+.simple_content ul.simple_contentTabA{
+	display: block;
+	overflow-x: auto;
+	-webkit-overflow-scrolling: touch;
+	padding: 6px 0px 100px;
+	text-decoration: none;
+}
+.simple_content ul.simple_contentTabA>li {
+	display:inline-block;
+	height: 40px;
+	line-height: 18px;
+	position: relative;
+}
+.simple_content ul.simple_contentTabA>li a {
+	display:inline-block;
+	color: #000;
+	font-weight: 400;
+	letter-spacing: -1px;
+	line-height: 40px;
+	text-decoration: none;
+}
+.simple_content ul.simple_contentTabA>li a:hover, .simple_content ul.simple_contentTabA>li.active a, .simple_content h1.misolTop .misol_top_a {
+	.text-contrast(#fff; darken(@color,5%); lighten(@color,5%));
+}
+.simple_content ul.simple_contentTabA>li a span {
+	border-left: 1px solid #e0e0e0;
+	padding: 0 15px;
+}
+.simple_content ul.simple_contentTabA>li:first-child a span {
+	border-left: 0 none;
+}
+
+.simple_content dl.simple_columns{ margin:0; padding:0}
+.simple_content dl.simple_columns dt{ position:absolute; width:0; height:0; overflow:hidden; font-size:0; line-height:0;}
+.simple_content dl.simple_columns dd{ display:none; margin:0;} 
+.widgetContainer .simple_content .open{ display:block !important;}
+
+.simple_content .simple_content_nav {
+	text-align: center;
+	color: #616161;
+	margin: 0;
+	padding: 10px 0;
+	border-top: 1px solid #e0e0e0;
+}
+
+.simple_content .simple_content_nav button {
+	background-color:transparent;
+	color: inherit;
+	border: 0 none;
+	cursor: pointer;
+	line-height: 20px;
+	height:35px;
+	width: 100%;
+	margin:0;
+	font-size: 15px;
+}
+.simple_content .simple_content_nav li button:hover{
+	.text-contrast(#fff; darken(@color,5%); lighten(@color,5%));
+}
+.simple_content .simple_content_nav li button i{
+	font-size:16px;
+	line-height:16px;
+}
+.simple_content_list.simple_content_webzine .simple_gallery_image
+{
+	position: relative;
+	width: @thumbnail_width + 0px;
+	float:left;
+}
+.simple_content_list.simple_content_webzine .content_basic
+{
+	display: block;
+	padding: 10px;
+	margin:0;
+}
+.simple_content_list.simple_content_webzine .content_basic .simple_content_longtext
+{
+	display: block;
+	margin: 7px 0;
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
\ No newline at end of file
diff --git a/widgets/content/skins/simple_rectangle/gallery.html b/widgets/content/skins/simple_rectangle/gallery.html
new file mode 100644
index 000000000..cfcfbc90a
--- /dev/null
+++ b/widgets/content/skins/simple_rectangle/gallery.html
@@ -0,0 +1,32 @@
+<div class="inner">
+	<div class="simple_gallery">
+		<ul class="simple_gallery">
+			{@$_idx=0}
+			<li class="simple_gallery_item" loop="$widget_info->content_items => $key, $item">
+				<a href="{$item->getLink()}" class="cont_a">
+					<span class="content_category" cond="$widget_info->show_category=='Y' && $item->get('category_srl')">{$item->getCategory()}</span>
+					<img class="up_m fade" cond="array_search('thumbnail', $widget_info->option_view_arr) && $item->getThumbnail()" src="{$item->getThumbnail()}" srcset="{$item->getThumbnail(2)} 2x"|cond="$item->getThumbnail(2)" alt="{str_replace(array('&amp;amp;','&amp;lt;','&amp;gt;','&amp;quot;','&amp;apos;'),array('&amp;','&lt;','&gt;','&quot;','&apos;'),$item->getTitle($widget_info->subject_cut_size))}" width="{$widget_info->thumbnail_width}" height="{$widget_info->thumbnail_height}" />
+					<div class="fake_img" cond="!array_search('thumbnail', $widget_info->option_view_arr) || !$item->getThumbnail()">{$lang->none_image}</div>
+					<div class="up_tw"|cond="array_search('thumbnail', $widget_info->option_view_arr) && $item->getThumbnail()">
+						<span class="gallery_text">
+							<span class="content_title">
+								{str_replace(array('&amp;amp;','&amp;lt;','&amp;gt;','&amp;quot;','&amp;apos;'),array('&amp;','&lt;','&gt;','&quot;','&apos;'),$item->getTitle($widget_info->subject_cut_size))}
+							</span>
+							<span class="content_nickname">
+								{$item->getNickName($widget_info->nickname_cut_size)}
+							</span>
+						</span>
+					</div>
+				</a>
+			</li>
+		</ul>
+		<!--@if($widget_info->page_count > 1 && $widget_info->list_count<$_idx)-->
+		<ul class="widgetNavigator">
+			<li><button type="button" class="prev" title="{$lang->cmd_prev}" onclick="content_widget_prev(jQuery(this).parents('ul.widgetNavigator').prev('ul.widgetGalleryA'),{$widget_info->list_count})"><span>{$lang->cmd_prev}</span></button></li>
+			<li><button type="button" class="next" title="{$lang->cmd_next}" onclick="content_widget_next(jQuery(this).parents('ul.widgetNavigator').prev('ul.widgetGalleryA'),{$widget_info->list_count})"><span>{$lang->cmd_next}</span></button></li>
+		</ul>
+		<!--@end-->
+	</div>
+</div>
+
+
diff --git a/widgets/content/skins/simple_rectangle/image_title.html b/widgets/content/skins/simple_rectangle/image_title.html
new file mode 100644
index 000000000..6a264014a
--- /dev/null
+++ b/widgets/content/skins/simple_rectangle/image_title.html
@@ -0,0 +1 @@
+<!--#include("gallery.html")-->
\ No newline at end of file
diff --git a/widgets/content/skins/simple_rectangle/image_title_content.html b/widgets/content/skins/simple_rectangle/image_title_content.html
new file mode 100644
index 000000000..938c887a6
--- /dev/null
+++ b/widgets/content/skins/simple_rectangle/image_title_content.html
@@ -0,0 +1,39 @@
+<ul class="simple_content_list simple_content_webzine">
+{@$_idx=0}
+<!--@foreach($widget_info->content_items as $key => $item)-->
+	<li style="display:none"|cond="$_idx >= $widget_info->list_count">
+		<a href="{$item->getLink()}" class="cont_a" target="_blank"|cond="$widget_info->new_window">
+			<p class="simple_gallery_item simple_gallery_image">
+					<!--@if($item->getThumbnail())-->
+						<span class="content_category" cond="$widget_info->show_category=='Y' && $item->get('category_srl')">{$item->getCategory()}</span>
+						<img src="{$item->getThumbnail()}" srcset="{$item->getThumbnail(2)} 2x"|cond="$item->getThumbnail(2)" width="{$widget_info->thumbnail_width}" height="{$widget_info->thumbnail_height}" />
+					<!--@else-->
+						<span class="fake_img">{$lang->none_image}</span>
+					<!--@end-->
+			</p>
+			<p class="content_basic <!--@if($widget_info->show_comment_count=='Y' && $item->getCommentCount())-->content_reext<!--@end-->">
+				<span class="content_title">
+					<span class="content_category" cond="$widget_info->show_browser_title=='Y' && $item->getBrowserTitle()">{$item->getBrowserTitle()}</span> {str_replace(array('&amp;amp;','&amp;lt;','&amp;gt;','&amp;quot;','&amp;apos;'),array('&amp;','&lt;','&gt;','&quot;','&apos;'),$item->getTitle($widget_info->subject_cut_size))}
+				</span>
+				<span class="content_nickname">
+					{$item->getNickName($widget_info->nickname_cut_size)}
+				</span>
+
+				<span class="content_recnt" cond="$widget_info->show_comment_count=='Y' && $item->getCommentCount()">
+					<!--@if($item->getCommentCount()<999)-->{$item->getCommentCount()}<!--@else-->999+<!--@end-->
+				</span>
+				<span class="simple_content_longtext" cond="in_array('content', $widget_info->option_view_arr)">
+					{$item->getContent()}
+				</span>
+			</p>
+		</a>
+	</li>
+{@$_idx++}
+<!--@end-->
+</ul>
+
+	<!--@if($widget_info->page_count > 1 && $widget_info->list_count<$_idx)-->
+	<div class="simple_content_nav">
+		<button type="button" class="soo_cont_more" title="{$lang->more}" onclick="content_widget_plus(jQuery(this).parents('div.simple_content_nav').prev('ul.simple_content_list'),{$widget_info->list_count})"><span class="page_info">1/{intval(($_idx - 1) / $widget_info->list_count) + 1}</span> {$lang->more}</button>
+	</div>
+	<!--@end-->
diff --git a/widgets/content/skins/simple_rectangle/js/content_widget.js b/widgets/content/skins/simple_rectangle/js/content_widget.js
new file mode 100644
index 000000000..d41ff7360
--- /dev/null
+++ b/widgets/content/skins/simple_rectangle/js/content_widget.js
@@ -0,0 +1,42 @@
+function content_widget_plus(obj,list_per_page){
+	var page = 1;
+	if(obj.is('table')) {
+		var list = jQuery('>tbody>tr',obj);
+	}else if(obj.is('ul')) {
+		var list = jQuery('>li',obj);
+	}
+
+	var total_page = parseInt((list.size()-1) / list_per_page,10)+1;
+	list.each(function(i){
+		if(jQuery(this).css('display') !='none'){
+			page = parseInt((i-1)/list_per_page,10) + 1;
+		}
+	});
+	if(total_page === page+1)
+	{
+		if(obj.is('ul.simple_content_list'))
+		{
+			obj.next('div.simple_content_nav').css('display','none');
+		}
+	}
+	if(total_page <= page) return;
+	if(obj.is('ul.simple_content_list')) {
+		jQuery('button.soo_cont_more>span.page_info',obj.next('div.simple_content_nav')).html(page+1 + '/' + total_page);
+	}
+	list.each(function(i){
+		if(((page+1) * list_per_page) > i){
+			jQuery(this).show();
+		}else{
+			jQuery(this).hide();
+		}
+	});
+}
+
+function content_widget_tab_show(tab,list,i){
+	tab.parents('ul.widgetTab').children('li.active').removeClass('active');
+	tab.parent('li').addClass('active');
+	jQuery('>dd',list).each(function(j){
+			if(j==i) jQuery(this).addClass('open');
+			else jQuery(this).removeClass('open');
+			});
+}
diff --git a/widgets/content/skins/simple_rectangle/normal.html b/widgets/content/skins/simple_rectangle/normal.html
new file mode 100644
index 000000000..98ffa4209
--- /dev/null
+++ b/widgets/content/skins/simple_rectangle/normal.html
@@ -0,0 +1,29 @@
+<div class="inner">
+	<ul class="simple_content_list">
+	{@$_idx=0}
+		<li loop="$widget_info->content_items => $key, $item" style="display:none"|cond="$_idx >= $widget_info->list_count" class="content_reext"|cond="$widget_info->show_comment_count=='Y' && $item->getCommentCount()">
+			<a href="{$item->getLink()}" class="cont_a" target="_blank"|cond="$widget_info->new_window">
+				<span cond="array_search('thumbnail', $widget_info->option_view_arr) && $item->getThumbnail()" class="content_image">
+					<img src="{$item->getThumbnail()}" width="{$widget_info->thumbnail_width}" srcset="{$item->getThumbnail(2)} 2x"|cond="$item->getThumbnail(2)" height="{$widget_info->thumbnail_height}" alt="{str_replace(array('&amp;amp;','&amp;lt;','&amp;gt;','&amp;quot;','&amp;apos;'),array('&amp;','&lt;','&gt;','&quot;','&apos;'),$item->getTitle($widget_info->subject_cut_size))}" />
+				</span>
+				<span class="content_basic <!--@if(array_search('thumbnail', $widget_info->option_view_arr) && $item->getThumbnail())-->content_with_thumbnail<!--@end-->">
+					<span class="content_title">
+						<span class="content_category" cond="$widget_info->tab_type  == 'tab_left' && $tab->tab_type == 'all'">{$item->getBrowserTitle()}</span>
+						<span class="content_category" cond="$widget_info->show_category=='Y' && $item->get('category_srl') && trim($item->getCategory()) && !$tab->tab_type">{$item->getCategory()}</span> {str_replace(array('&amp;amp;','&amp;lt;','&amp;gt;','&amp;quot;','&amp;apos;'),array('&amp;','&lt;','&gt;','&quot;','&apos;'),$item->getTitle($widget_info->subject_cut_size))}
+					</span>
+					<span class="content_nickname">
+						{$item->getNickName($widget_info->nickname_cut_size)}
+					</span>
+				</span>
+				<span class="content_recnt <!--@if(array_search('thumbnail', $widget_info->option_view_arr) && $item->getThumbnail())-->content_with_thumbnail<!--@end-->" cond="$widget_info->show_comment_count=='Y' && $item->getCommentCount()">
+					<!--@if($item->getCommentCount()<999)-->{$item->getCommentCount()}<!--@else-->999+<!--@end-->
+				</span>
+			</a>{@$_idx++}
+		</li>
+	</ul>
+	<!--@if($widget_info->page_count > 1 && $widget_info->list_count<$_idx)-->
+	<div class="simple_content_nav">
+		<button type="button" class="soo_cont_more" title="{$lang->more}" onclick="content_widget_plus(jQuery(this).parents('div.simple_content_nav').prev('ul.simple_content_list'),{$widget_info->list_count})"><span class="page_info">1/{intval(($_idx - 1) / $widget_info->list_count) + 1}</span> {$lang->more}</button>
+	</div>
+	<!--@end-->
+</div>
diff --git a/widgets/content/skins/simple_rectangle/skin.xml b/widgets/content/skins/simple_rectangle/skin.xml
new file mode 100644
index 000000000..2a892dd4a
--- /dev/null
+++ b/widgets/content/skins/simple_rectangle/skin.xml
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<skin version="0.2">
+	<title xml:lang="ko">네모의 꿈</title>
+	<title xml:lang="en">Rectangular World</title>
+	<description xml:lang="ko">직사각형과 그림자, 테마색상을 활용한 컨텐츠 스킨입니다.</description>
+	<description xml:lang="en">Rectangles, shadows, theme-color.</description>
+	<version>1.0</version>
+	<date>2017-02-26</date>
+	<link>https://github.com/rhymix/rhymix/</link>
+	<license link="https://www.gnu.org/licenses/old-licenses/gpl-2.0.html">GPLv2</license>
+
+	<author email_address="misol.kr@gmail.com" link="https://github.com/misol/">
+		<name xml:lang="ko">misol</name>
+		<name xml:lang="en">misol</name>
+	</author>
+
+	<colorset>
+		<color name="theme">
+			<title xml:lang="ko">사이트 테마 색</title>
+			<title xml:lang="en">The site theme color</title>
+		</color>
+		<color name="red">
+			<title xml:lang="ko">붉은 색</title>
+			<title xml:lang="en">Red</title>
+		</color>
+		<color name="crimson">
+			<title xml:lang="ko">크림슨</title>
+			<title xml:lang="en">Crimson</title>
+		</color>
+		<color name="pink">
+			<title xml:lang="ko">분홍</title>
+			<title xml:lang="en">Pink</title>
+		</color>
+		<color name="purple">
+			<title xml:lang="ko">보라</title>
+			<title xml:lang="en">Purple</title>
+		</color>
+		<color name="deep-purple">
+			<title xml:lang="ko">진보라</title>
+			<title xml:lang="en">Deep Purple</title>
+		</color>
+		<color name="indigo">
+			<title xml:lang="ko">인디고</title>
+			<title xml:lang="en">Indigo</title>
+		</color>
+		<color name="deep-blue">
+			<title xml:lang="ko">짙은 파랑</title>
+			<title xml:lang="en">Deep Blue</title>
+		</color>
+		<color name="blue">
+			<title xml:lang="ko">파랑</title>
+			<title xml:lang="en">Blue</title>
+		</color>
+		<color name="light-blue">
+			<title xml:lang="ko">밝은 파랑</title>
+			<title xml:lang="en">Light Blue</title>
+		</color>
+		<color name="cyan">
+			<title xml:lang="ko">시안</title>
+			<title xml:lang="en">Cyan</title>
+		</color>
+		<color name="teal">
+			<title xml:lang="ko">틸</title>
+			<title xml:lang="en">Teal</title>
+		</color>
+		<color name="green">
+			<title xml:lang="ko">초록</title>
+			<title xml:lang="en">Green</title>
+		</color>
+		<color name="light-green">
+			<title xml:lang="ko">연한 초록</title>
+			<title xml:lang="en">Light Green</title>
+		</color>
+		<color name="lime">
+			<title xml:lang="ko">라임</title>
+			<title xml:lang="en">Lime</title>
+		</color>
+		<color name="yellow">
+			<title xml:lang="ko">노랑</title>
+			<title xml:lang="en">Yellow</title>
+		</color>
+		<color name="amber">
+			<title xml:lang="ko">앰버</title>
+			<title xml:lang="en">Amber</title>
+		</color>
+		<color name="orange">
+			<title xml:lang="ko">주황</title>
+			<title xml:lang="en">Orange</title>
+		</color>
+		<color name="deep-orange">
+			<title xml:lang="ko">진한 주황</title>
+			<title xml:lang="en">Deep Orange</title>
+		</color>
+		<color name="brown">
+			<title xml:lang="ko">갈색</title>
+			<title xml:lang="en">Brown</title>
+		</color>
+		<color name="grey">
+			<title xml:lang="ko">회색</title>
+			<title xml:lang="en">Grey</title>
+		</color>
+		<color name="blue-grey">
+			<title xml:lang="ko">푸른 회색</title>
+			<title xml:lang="en">Blue Grey</title>
+		</color>
+	</colorset>
+</skin>
diff --git a/widgets/content/skins/simple_rectangle/title_content.html b/widgets/content/skins/simple_rectangle/title_content.html
new file mode 100644
index 000000000..ca6b5349d
--- /dev/null
+++ b/widgets/content/skins/simple_rectangle/title_content.html
@@ -0,0 +1,108 @@
+<!--// 목록형 출력 -->
+<!--@if($widget_info->markup_type=="list")-->
+    <ul class="widgetA">
+    {@$_idx=0}
+    <!--@foreach($widget_info->content_items as $key => $item)-->
+        <li<!--@if($_idx >= $widget_info->list_count)--> style="display:none"<!--@end-->>
+
+            <!--@foreach($widget_info->option_view_arr as $k => $v)-->
+                <!--@if($v=='title')-->
+                    <!--@if($widget_info->show_browser_title=='Y' && $item->getBrowserTitle())-->
+                        <a href="<!--@if($item->contents_link)-->{$item->contents_link}<!--@else-->{getSiteUrl($item->domain, '', 'mid', $item->get('mid'))}<!--@end-->" class="board" target="_blank"|cond="$widget_info->new_window"><strong>{$item->getBrowserTitle()}</strong></a>
+                    <!--@end-->
+                    <!--@if($widget_info->show_category=='Y' && $item->get('category_srl') )-->
+                        <a href="{getSiteUrl($item->domain,'','mid',$item->get('mid'),'category',$item->get('category_srl'))}" target="_blank"|cond="$widget_info->new_window"><strong class="category">{$item->getCategory()}</strong></a>
+                    <!--@end-->
+
+                    <a href="{$item->getLink()}" class="title" target="_blank"|cond="$widget_info->new_window">{$item->getTitle($widget_info->subject_cut_size)}</a>
+
+                    <!--@if($widget_info->show_comment_count=='Y' && $item->getCommentCount())-->
+                        <em class="replyNum" title="Replies"><a href="{$item->getLink()}#comment" target="_blank"|cond="$widget_info->new_window">{$item->getCommentCount()}</a></em>
+                    <!--@end-->
+
+                    <!--@if($widget_info->show_trackback_count=='Y' && $item->getTrackbackCount())-->
+                        <em class="trackbackNum" title="Trackbacks"><a href="{$item->getLink()}#trackback" target="_blank"|cond="$widget_info->new_window">{$item->getTrackbackCount()}</a></em>
+                    <!--@end-->
+
+                    <!--@if($widget_info->show_icon=='Y')-->
+                        <span class="icon">{$item->printExtraImages()}</span>
+                    <!--@end-->
+
+                <!--@else if($v=='nickname')-->
+                    <a <!--@if($item->getMemberSrl())-->href="#" onclick="return false;" class="author member_{$item->getMemberSrl()}"<!--@elseif($item->getAuthorSite())-->href="{$item->getAuthorSite()}" onclick="window.open(this.href); return false;" class="author member"<!--@else-->href="#" onclick="return false;" class="author member"<!--@end--> >{$item->getNickName()}</a>
+
+                <!--@else if($v=='regdate')-->
+                    <span class="date">{$item->getRegdate("Y-m-d")}</span> <span class="hour">{$item->getRegdate("H:i")}</span>
+				
+				<!--@else if($v=='content')-->
+					<p class="summary"><a href="{$item->getLink()}" target="_blank"|cond="$widget_info->new_window">{$item->getContent()}</a></p>
+				<!--@end-->
+            <!--@end-->
+        </li>
+    {@$_idx++}
+    <!--@end-->
+    </ul>
+
+    <!--@if($widget_info->page_count > 1 && $widget_info->list_count<$_idx)-->
+    <ul class="widgetNavigator">
+        <li><button type="button" class="prev" title="{$lang->cmd_prev}" onclick="content_widget_prev(jQuery(this).parents('ul.widgetNavigator').prev('ul.widgetA'),{$widget_info->list_count})"><span>{$lang->cmd_prev}</span></button></li>
+        <li><button type="button" class="next" title="{$lang->cmd_next}" onclick="content_widget_next(jQuery(this).parents('ul.widgetNavigator').prev('ul.widgetA'),{$widget_info->list_count})"><span>{$lang->cmd_next}</span></button></li>
+    </ul>
+    <!--@end-->
+
+<!--// 테이블형 출력 -->
+<!--@else-->
+    <table class="widgetTableA" border="1" cellspacing="0">
+        <tbody>
+    {@$_idx=0}
+    <!--@foreach($widget_info->content_items as $key => $item)-->
+        <tr<!--@if($_idx >= $widget_info->list_count)--> style="display:none"<!--@end-->>
+    <!--@foreach($widget_info->option_view_arr as $k => $v)-->
+		<!--@if($v=='title')-->
+			<td class="title">
+	
+				<!--@if($widget_info->show_browser_title=='Y' && $item->getBrowserTitle())-->
+			
+					<a href="<!--@if($item->contents_link)-->{$item->contents_link}<!--@else-->{getSiteUrl($item->domain, '', 'mid', $item->get('mid'))}<!--@end-->" target="_blank"|cond="$widget_info->new_window"><strong class="board">{$item->getBrowserTitle()}</strong></a>
+				<!--@end-->
+				<!--@if($widget_info->show_category=='Y' && $item->get('category_srl') )-->
+					<a href="{getSiteUrl($item->domain,'','mid',$item->get('mid'),'category',$item->get('category_srl'))}" target="_blank"|cond="$widget_info->new_window"><strong class="category">{$item->getCategory()}</strong></a>
+				<!--@end-->
+	
+				<a href="{$item->getLink()}" target="_blank"|cond="$widget_info->new_window">{$item->getTitle($widget_info->subject_cut_size)}</a>
+	
+				<!--@if($widget_info->show_comment_count=='Y' && $item->getCommentCount())-->
+					<em class="replyNum" title="Replies"><a href="{$item->getLink()}#comment" target="_blank"|cond="$widget_info->new_window">{$item->getCommentCount()}</a></em>
+				<!--@end-->
+	
+				<!--@if($widget_info->show_trackback_count=='Y' && $item->getTrackbackCount())-->
+					<em class="trackbackNum" title="Trackbacks"><a href="{$item->getLink()}#trackback" target="_blank"|cond="$widget_info->new_window">{$item->getTrackbackCount()}</a></em>
+				<!--@end-->
+	
+				<!--@if($widget_info->show_icon=='Y')-->
+					<span class="icon">{$item->printExtraImages()}</span>
+				<!--@end-->
+			</td>
+		<!--@else if($v=='nickname')-->
+			<td><a <!--@if($item->getMemberSrl())-->href="#" onclick="return false;" class="author member_{$item->getMemberSrl()}"<!--@elseif($item->getAuthorSite())-->href="{$item->getAuthorSite()}" onclick="window.open(this.href); return false;" class="author member"<!--@else-->href="#" onclick="return false;" class="author member"<!--@end--> >{$item->getNickName()}</a></td>
+		<!--@else if($v=='regdate')-->
+			<td class="time"><span class="date">{$item->getRegdate("Y-m-d")}</span> <span class="hour">{$item->getRegdate("H:i")}</span></td>
+		<!--@end-->
+    <!--@end-->
+        </tr>
+	<!--@if($v=='content')-->
+		<tr>
+			<td colspan="3" class="summary"><a href="{$item->getLink()}" target="_blank"|cond="$widget_info->new_window">{$item->getContent()}</a></td>
+		</tr>
+	<!--@end-->
+    {@$_idx++}
+    <!--@end-->
+        </tbody>
+    </table>
+    <!--@if($widget_info->page_count > 1 && $widget_info->list_count<$_idx)-->
+    <ul class="widgetNavigator">
+        <li><button type="button" class="prev" title="{$lang->cmd_prev}" onclick="content_widget_prev(jQuery(this).parents('ul.widgetNavigator').prev('table.widgetTableA'),{$widget_info->list_count})"><span>{$lang->cmd_prev}</span></button></li>
+        <li><button type="button" class="next" title="{$lang->cmd_next}" onclick="content_widget_next(jQuery(this).parents('ul.widgetNavigator').prev('table.widgetTableA'),{$widget_info->list_count})"><span>{$lang->cmd_next}</span></button></li>
+    </ul>
+    <!--@end-->
+<!--@end-->