Kamsi's Blog

Style

/* UI Object */
.v_graph{padding:20px 0}
.v_graph ul{height:200px;margin:0;padding:0;border:1px solid #ddd;border-top:0;border-right:0;font-size:11px;font-family:Tahoma, Geneva, sans-serif;list-style:none}
.v_graph ul:after{display:block;clear:both;content:""}
.v_graph li{display:inline;float:left;position:relative;width:8%;height:100%;margin:0 3%;text-align:center;white-space:nowrap}
.v_graph .g_term{display:inline-block;position:relative;width:100%;height:20px;margin:0 -100% -20px 0;padding:200px 0 0 0;font-weight:bold;color:#767676;line-height:20px;vertical-align:bottom}
.v_graph .g_bar{display:inline-block;position:relative;width:100%;margin:-1px 0 0 0;border:1px solid #ccc;border-bottom:0;background:#e9e9e9;vertical-align:bottom}
.v_graph .g_bar span{position:absolute;top:-20px;left:0;width:100%;color:#767676}
/* //UI Object */

HTML

<div class="v_graph">
 <ul>
 <li><span class="g_term">SUN</span><span class="g_bar" style="height:0%"><span>0%</span></span></li>
 <li><span class="g_term">MON</span><span class="g_bar" style="height:20%"><span>20%</span></span></li>
 <li><span class="g_term">TUE</span><span class="g_bar" style="height:30%"><span>30%</span></span></li>
 <li><span class="g_term">WED</span><span class="g_bar" style="height:40%"><span>40%</span></span></li>
 <li><span class="g_term">THU</span><span class="g_bar" style="height:50%"><span>50%</span></span></li>
 <li><span class="g_term">FRI</span><span class="g_bar" style="height:60%"><span>60%</span></span></li>
 <li><span class="g_term">SAT</span><span class="g_bar" style="height:100%"><span>100%</span></span></li>
 </ul>
</div>

출처 : http://nuli.navercorp.com/data/ui_library/src/pattern/etc/jcm//v_graph.html

Style

/* UI Object */
.h_graph ul{margin:0 50px 0 50px;padding:1px 0 0 0;border:1px solid #ddd;border-top:0;border-right:0;font-size:11px;font-family:Tahoma, Geneva, sans-serif;list-style:none}
.h_graph li{position:relative;margin:10px 0;vertical-align:top;white-space:nowrap}
.h_graph .g_term{position:absolute;top:0;left:-50px;width:40px;font-weight:bold;color:#767676;line-height:20px;text-align:right}
.h_graph .g_bar{display:inline-block;position:relative;height:20px;border:1px solid #ccc;border-left:0;background:#e9e9e9}
.h_graph .g_bar span{position:absolute;top:0;right:-50px;width:40px;color:#767676;line-height:20px}
/* //UI Object */

html

<div class="h_graph">
 <ul>
 <li><span class="g_term">SUN</span><span class="g_bar" style="width:0%"><span>0%</span></span></li>
 <li><span class="g_term">MON</span><span class="g_bar" style="width:20%"><span>20%</span></span></li>
 <li><span class="g_term">TUE</span><span class="g_bar" style="width:30%"><span>30%</span></span></li>
 <li><span class="g_term">WED</span><span class="g_bar" style="width:40%"><span>40%</span></span></li>
 <li><span class="g_term">THU</span><span class="g_bar" style="width:50%"><span>50%</span></span></li>
 <li><span class="g_term">FRI</span><span class="g_bar" style="width:60%"><span>60%</span></span></li>
 <li><span class="g_term">SAT</span><span class="g_bar" style="width:100%"><span>100%</span></span></li>
 </ul>
</div>

<style type="text/css">
/* UI Object */
#wrap{width:100%}
#header{width:100%}
#container{*display:inline-block;_width /**/:100%;padding-right:200px;padding-left:200px}
#container:after{display:block;clear:both;content:''}
.snb{float:left;position:relative;left:-200px;width:180px;margin-right:-180px}
#content{float:left;width:100%}
.aside{float:left;position:relative;left:200px;width:182px;margin-left:-182px}
#footer{width:100%}

/* Layout Color - 실제 서비스 적용 후 아래 코드는 삭제 하세요 */
div{margin:0 0 10px;padding:10px 0;color:#2d2c2d;font-family:Tahoma;font-size:14px;font-weight:bold}
#wrap{position:relative;width:auto;padding:10px;border:1px solid #bdbdbd;background:#f7f7f7}
#header{width:auto;margin-top:10px;padding:10px;border:2px solid #bfbfbf;background:#e5e5e5}
#container{position:relative;border:2px solid #bfbfbf;background:#e5e5e5}
.snb{left:-190px;width:178px;margin-top:10px;border:1px solid #bdbdbd;background:#fff;text-align:center}
#content{position:relative;height:200px;margin-top:10px;border:1px solid #bdbdbd;background:#fff;text-align:center}
.aside{left:190px;width:178px;margin-top:10px;border:1px solid #bdbdbd;background:#fff;text-align:center}
#footer{clear:both;width:auto;padding:10px;border:2px solid #bfbfbf;background:#e5e5e5}
/* //UI Object */
</style>

<!-- UI Object -->
<div id="wrap">
 <p>#wrap</p>
 <!-- header -->
 <div id="header">
  <p>#header</p>
 </div>
 <!-- //header -->
 <!-- container -->
 <div id="container">
  <p>#container</p>
  <!-- snb -->
  <div class="snb">
   <p>.snb</p>
  </div>
  <!-- //snb -->
  <!-- content -->
  <div id="content">
   <p>#content</p>
  </div>
  <!-- //content -->
  <!-- aside -->
  <div class="aside">
   <p>.aside</p>
  </div>
  <!-- //aside -->
  <div class="clear">
  </div>
 </div>
 <!-- //container -->
 <!-- footer -->
 <div id="footer">
  <p>#footer</p>
 </div>
 <!-- //footer -->
</div>
<!-- //UI Object -->

출처 : http://nuli.navercorp.com/data/ui_library/src/pattern/layout/jjs/fluid2.html

<style type="text/css">
/* UI Object */
#wrap{width:100%}
#header{width:100%}
#container{*display:inline-block;_float:left;_width /**/:100%;padding-right:200px}
#container:after{display:block;clear:both;content:''}
#content{float:left;width:100%;margin-right:-200px}
.aside{float:right;position:relative;left:200px;width:180px}
#footer{width:100%}

/* Layout Color - 실제 서비스 적용 후 아래 코드는 삭제 하세요 */
div{margin:0 0 10px;padding:10px 0;color:#2d2c2d;font-family:Tahoma;font-size:14px;font-weight:bold}
#wrap{_float:left;position:relative;width:auto;margin:0;padding:10px;background:#f7f7f7}
#wrap{border:1px solid #bdbdbd}
#header{width:auto;margin-top:10px;padding:10px}
#header,#container{border:2px solid #bfbfbf;background:#e5e5e5}
#container{position:relative;padding-left:10px}
#content{position:relative;height:200px;margin-top:10px;border:1px solid #bdbdbd;background:#fff;text-align:center}
.aside{left:190px;width:170px;margin-top:10px;border:1px solid #bdbdbd;background:#fff;text-align:center}
#footer{clear:both;width:auto;padding:10px;border:2px solid #bfbfbf;background:#e5e5e5}
/* //UI Object */
</style>
<div id="wrap">
 <p>#wrap</p>
 <!-- header -->
 <div id="header">
  <p>#header</p>
 </div>
 <!-- //header -->
 <!-- container -->
 <div id="container">
  <p>#container</p>
  <!-- content -->
  <div id="content">
   <p>#content</p>
  </div>
  <!-- //content -->
  <!-- aside -->
  <div class="aside">
   <p>.aside</p>
  </div>
  <!-- //aside -->
 </div>
 <!-- //container -->
 <!-- footer -->
 <div id="footer">
  <p>#footer</p>
 </div>
 <!-- //footer -->
</div>
<!-- //UI Object -->

출처 : http://nuli.navercorp.com/data/ui_library/src/pattern/layout/jjs/fluid3.html

<style>

/* UI Object */
#wrap{width:100%}
#header{width:100%}
#container{_display:inline-block;width:100%}
#container:after{display:block;clear:both;content:''}
.snb{float:left;width:180px;margin-right:-200px}
#content{margin-left:200px}
#footer{width:100%}

/* Layout Color - 실제 서비스 적용 후 아래 코드는 삭제 하세요 */
div{margin:0 0 10px;padding:10px 0;color:#2d2c2d;font-family:Tahoma;font-size:14px;font-weight:bold}
#wrap{width:auto;margin:0;padding:10px;border:1px solid #bdbdbd;background:#f7f7f7}
#header{margin-top:10px}
#header,#container{width:auto;padding:10px;border:2px solid #bfbfbf;background:#e5e5e5}
.snb,#content{margin-top:10px;border:1px solid #bdbdbd;background:#fff;text-align:center}
#content{height:200px}
#footer{width:auto;padding:10px;border:2px solid #bfbfbf;background:#e5e5e5}
/* //UI Object */
</style>

<!-- UI Object -->
<div id="wrap">
	<p>#wrap</p>
	<!-- header -->
	<div id="header">
		<p>#header</p>
	</div>
	<!-- //header -->
	<!-- container -->
	<div id="container">
		<p>#container</p>
		<!-- snb -->
		<div class="snb">
			<p>.snb</p>
		</div>
		<!-- //snb -->
		<!-- content -->
		<div id="content">
			<p>#content</p>
		</div>
		<!-- //content -->
	</div>
	<!-- //container -->
	<!-- footer -->
	<div id="footer">
		<p>#footer</p>
	</div>
	<!-- //footer -->
</div>
<!-- //UI Object -->

조건부 주석은 HTML 소스중 인터넷 익스플로러(ie)에서 해석되는 조건문 입니다.
구 버전의 ie에서 제대로 작동하지 않는 문제를 해결할 수 있습니다.
하지만 ie10 의 표준 모드에서 조건부 주석은 지원되지 않고, JScript 조건부 주석은 지원됩니다.

위와 같은 구문으로 조건부 주석을 사용할 수 있으며, 조건(condition)을 만족할 경우 HTML을 렌더링하게 됩니다.
조건부 주석을 지원하지 않는 브라우저에서는 위 구문을 일반 주석문으로만 해석합니다.

 condition에 사용되는 기호는 다음과 같습니다.
!(아니다), lt(작다), lte(작거나 같다), gt(크다), gte(크거나 같다), ()(우선처리), &(그리고), |(또는)

 condition 예) 

이 조건부 주석을 주석 처리하는 브라우저에 대하여 마크업을 넣으려면 다음과 같이 할 수 있습니다.

위와 같이 조건부 주석 라인을 주석처리 시키면 ie가 아닌 브라우저에 대한 css 를 적용할 수 있습니다.

만약 ie도 아니고 ie 9 이전 버전인 브라우저에 대하여 아래와 같이할 수 있습니다.

첫째줄 마지막을 ie가 아닌 타브라우저를 위해 <!--> 이 아닌 --> 로 입력한다면,
ie 9 이전 버전들은 <!--[if gt ie 9]> 구문이 끝나는 즉시 렌더링이 시작되므로 --> 부분이 브라우저에 표시될 것입니다.
이 부분을 주석시키기 위하여 --> 부분을 <!--> 로 변경한 것 입니다.

JScript 조건부 주석

 JScript 안에서 사용할 수 있는 조건부 주석입니다.
ie 브라우저의 JScript engine 버전을 알 수 있는 방법입니다.
타 브라우저에 대한 처리도 가능합니다.

Jscript 안에서 /* */ 는 주석입니다.
@cc_on 은 조건부 주석의 시작을 나타냅니다.
@if, @elif, @else, @end 등의 조건문을 이용할 수 있습니다.
@_jscript_version 은 브라우저에 내장된 JScript engine 버전, @_win32는 32비트인지를 나타냅니다. 

출처 : http://www.oops4u.com/1823