메뉴 건너뛰기

Side Left

KSODESIGN SHORTCODES

체계적인 워크플로우를 활용하여 사이트 구축시 요소요소에 적합한 형태를 사용하여 각 페이지를 아름답게 제작을 합니다.

- KSODESIGN SHORTCODES는 Bootstrap 기반으로 KSODESIGN만의 스타일로 재 편집된 프레임워크입니다.

- 전반적인 구조에 대해서 이해하기 위해서는 Twitter Bootstrap 프레임 워크를 알아야 합니다만, 당장 이 모든 것을 설명하기에는 무리가 따르는 관계로 간단한 구조와 각 엘레먼트 코드를 복사/붙여넣기를 통해서 사용할 수 있게 소개합니다.  부트스트랩 링크

- 모든 페이지에도 반응형 구조로 최적화된 페이지를 꾸밀 수 있습니다.

- 아래와 같이 플랫 스크롤 레이아웃이 포함된 모든 페이지에 사용할 수 있습니다.

  • 외부 페이지 : html 문서에 코딩하여 연결
  • 위젯 페이지 : 내용 직접 추가 > 에디터에 [html 편집기] 클릭 후 코드 사용
  • 문서 페이지 : 에디터에 [html 편집기] 클릭 후 코드 사용
  • 게시판 : 에디터에 [html 편집기] 클릭 후 코드 사용

* 추후에 Bootstrap을 보다 쉽게 이해할 수 있는 문서를 기획하고 있습니다. 웹 관련 직종에 계신 분들께는 고급 스킬을 익힐 수 있고 초보자 분들께는 공개된 소스를 이용하여 멋진 페이지를 꾸밀 수 있는 지침서를 계획하고 있습니다. 기대해주세요~!

그리드 시스템

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
				<div class="row">
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				  <div class="col-md-1">.col-md-1</div>
				</div>
				<div class="row">
				  <div class="col-md-8">.col-md-8</div>
				  <div class="col-md-4">.col-md-4</div>
				</div>
				<div class="row">
				  <div class="col-md-4">.col-md-4</div>
				  <div class="col-md-4">.col-md-4</div>
				  <div class="col-md-4">.col-md-4</div>
				</div>
				<div class="row">
				  <div class="col-md-6">.col-md-6</div>
				  <div class="col-md-6">.col-md-6</div>
				</div>
			

row는 하나의 열이며, row 내부에 col-md- 총 합이 12가 되는 조건에 맞춰 컬럼 수를 나눌 수 있습니다.

  • col-lg- : Large devices (Desktops ≥ 1200px)
  • col-md- : Medium devices (Desktops ≥ 992px)
  • col-sm- : Small devices (Tablets ≥ 768px)
  • col-xs- : Extra small devices (Phones < 768px)

폰트

FONT OSWALD

FONT OPEN SANS

FONT LATO


FONT TRABUCHET MS

나눔고딕 폰트

나눔고딕 볼드 폰트

<h3 class="font-oswald">FONT OSWALD</h3>
<h3 class="font-open">FONT OPEN SANS</h3>
<h3 class="font-lato">FONT LATO</h3>
<p class="font-trab">FONT TRABUCHET MS</p>
<h3 class="font-ng">나눔고딕 폰트</h3>
<h3 class="font-ngBold conceptColor">나눔고딕 볼드 폰트</h3>

- 폰트를 지정하고자 할 때 지정된 폰트 클래스를 사용하면 됩니다.
- conceptColor 클래스를 사용하면 레이아웃에 컨셉 컬러가 적용 됩니다.

헤드라인

가로 라인이 있는 타이틀입니다.

왼쪽 라인이 있는 타이틀입니다.

하단 라인 1이 있는 타이틀입니다.

하단 라인 2가 있는 타이틀입니다.
1) <h5 class="head-line"><span>가로 라인이 있는 타이틀입니다.</span></h5>
2) <h5 class="headline left-line">왼쪽 라인이 있는 타이틀입니다.</h5>
3) <h5 class="headline bottom-line">하단 라인 1이 있는 타이틀입니다.</h5>
4) <h5 class="deco-line"><span class="conceptBorderColor">하단 라인 2가 있는 타이틀입니다.</span></h5>

Text Boxs

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

역시 마찬가지로, 단순히 고통이라는 이유 때문에 고통 그 자체를 사랑하거나 추구하거나 소유하려는 자는 없다. 다만 노역과 고통이 아주 큰 즐거움을 선사하는 상황이 때로는 발생하기 때문에 고통을 찾는 사람이 있는 것이다. 간단한 예를 들자면, 모종의 이익을 얻을 수도 없는데 힘든 육체적 노력을 기꺼이 할 사람이 우리들 중에 과연 있겠는가? 하지만 귀찮은 일이 뒤따르지 않는 즐거움을 누리는 것을 선택한 사람, 혹은 아무런 즐거움도 생기지 않는 고통을 회피하는 사람을 누가 탓할 수 있겠는가?

				<div class="row">
					<div class="col-md-12">
						<div class="row">
							<div class="col-sm-4 col-md-4">
								<p>Lorem ipsum dolor sit amet...</p>
							</div>
							<div class="col-sm-4 col-md-4">
								<p>역시 마찬가지로, 단순히 고통이라는...</p>
							</div>
							<div class="col-sm-4 col-md-4">
								<p>Lorem ipsum dolor sit amet...</p>
							</div>
						</div>
					</div>
				</div>
			
위 코드를 복사하여 사용할 경우 3컬럼으로 구성됩니다.
위 그리드 시스템을 실제 적용한 예제입니다.

List Icon

  Lorem ipsum dolor sit amet

  Lorem ipsum dolor sit amet

  Lorem ipsum dolor sit amet

  Lorem ipsum dolor sit amet

 

  즐거움을 누리는 것을 선택한 사람

  즐거움을 누리는 것을 선택한 사람

  즐거움을 누리는 것을 선택한 사람

  즐거움을 누리는 것을 선택한 사람

 

  Lorem ipsum dolor sit amet

  consectetur adipisicing elit

  sed do eiusmod tempor incididunt

  labore et dolore magna aliqua

 

  단순히 고통이라는 이유 때문에

  고통 그 자체를 사랑하거나 추구하거나

  소유하려는 자는 없다.

  다만 노역과 고통이 아주 큰 즐거움

				<p><i class="icon-ok"></i> Lorem ipsum dolor sit amet</p>
				<p><i class="icon-ok"></i> Lorem ipsum dolor sit amet</p>
				<p><i class="icon-ok"></i> Lorem ipsum dolor sit amet</p>
				<p><i class="icon-ok"></i> Lorem ipsum dolor sit amet</p>
			
아이콘 코드 값만 원하는 아이콘으로 수정하면 됩니다.

Icon Boxs A

GLOBAL WEB TRAND

Nam condimentum nec mi aliquam accumsan phasellus nulla lorem gravida.

리스폰스 디자인

Nam condimentum nec mi aliquam accumsan phasellus nulla lorem gravida.

VERY FLEXIBLE

Nam condimentum nec mi aliquam accumsan phasellus nulla lorem gravida.

<div class="row">
	<div class="col-sm-4 col-md-4">
		<div class="text-center mBottom20">
			<div class="iconBox">
				<div class="circle-bg marginAuto"><i class="icon-book icon-2x"></i></div>
			</div>
			<h3>GLOBAL WEB TRAND</h3>
			<p>Nam condimentum nec mi aliquam accumsan phasellus nulla lorem gravida.</p>
			<button type="button" class="btn-kso btn-small btn-xs">Read More</button>
		</div>
	</div>
	<div class="col-sm-4 col-md-4">
		<div class="text-center mBottom20">
			<div class="iconBox">
				<div class="circle-bg marginAuto"><i class="icon-laptop icon-2x"></i></div>
			</div>
			<h3>리스폰스 디자인</h3>
			<p>Nam condimentum nec mi aliquam accumsan phasellus nulla lorem gravida.</p>
			<button type="button" class="btn-kso btn-small btn-small btn-xs">Read More</button>
		</div>
	</div>
	<div class="col-sm-4 col-md-4">
		<div class="text-center mBottom20">
			<div class="iconBox">
				<div class="circle-bg marginAuto"><i class="icon-folder-open icon-2x"></i></div>
			</div>
			<h3>VERY FLEXIBLE</h3>
			<p>Nam condimentum nec mi aliquam accumsan phasellus nulla lorem gravida.</p>
			<button type="button" class="btn-kso btn-small btn-xs">Read More</button>
		</div>
	</div>
</div>
			
아이콘 박스 A형으로 가운데 정렬된 스타일입니다.

Icon Boxs B

GLOBAL WEB TRAND

Nam condimentum nec mi aliquam accumsan phasellus nulla lorem gravida.

리스폰스 디자인

Nam condimentum nec mi aliquam accumsan phasellus nulla lorem gravida.

VERY FLEXIBLE

Nam condimentum nec mi aliquam accumsan phasellus nulla lorem gravida.

				<div class="row mBottom20">
					<div class="col-md-12">
						<h4 class="head-line mBottom20"><span class="font-open">Icon Boxs B</span></h4>
						<div class="row">
							<div class="col-sm-4 col-md-4">
								<div class="iconBox-left">
									<div class="circle-bg"><i class="icon-book icon-2x"></i></div>
									<h3>GLOBAL WEB TRAND</h3>
									<p>Nam condimentum nec mi aliquam accumsan phasellus nulla lorem gravida.</p>
									<button type="button" class="btn-kso btn-small btn-xs">Read More</button>
								</div>
							</div>
							<div class="col-sm-4 col-md-4">
								<div class="iconBox-left">
									<div class="circle-bg"><i class="icon-laptop icon-2x"></i></div>
									<h3>리스폰스 디자인</h3>
									<p>Nam condimentum nec mi aliquam accumsan phasellus nulla lorem gravida.</p>
									<button type="button" class="btn-kso btn-small btn-xs">Read More</button>
								</div>
							</div>
							<div class="col-sm-4 col-md-4">
								<div class="iconBox-left">
									<div class="circle-bg"><i class="icon-folder-open icon-2x"></i></div>
									<h3>VERY FLEXIBLE</h3>
									<p>Nam condimentum nec mi aliquam accumsan phasellus nulla lorem gravida.</p>
									<button type="button" class="btn-kso btn-small btn-xs">Read More</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			
아이콘 박스 B형 스타일입니다.

Promo Text

Need more examples?

We dive into more grid layouts in a separate page, free of chrome and documentation to better show.

Read More
				<div class="row mBottom20">
					<div class="col-xs-12 col-sm-12 col-md-12">
						<h4 class="head-line mBottom20"><span class="font-open">Promo Text</span></h4>
						<blockquote>
							<a href="#" class="kso_button pull-right hidden-xs" style="margin-top:20px;">Read More</a>
							<h3>Need more examples?</h3>
							<p class="kso-koText">We dive into more grid layouts in a separate page...</p>			
							<a href="#" class="kso_button visible-xs" style="margin-top:10px;">Read More</a>
						</blockquote>
					</div>
				</div>
			

Panel Box

PANEL TITLE

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

판넬 제목

단순히 고통이라는 이유 때문에 고통 그 자체를 사랑하거나 추구하거나 소유하려는 자는 없다. 다만 노역과 고통이 아주 큰 즐거움을 선사하는 상황이 때로는 발생하기 때문에 고통을 찾는 사람이 있는 것이다.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
				<div class="row mBottom20">
					<div class="col-md-12">
						<h4 class="head-line mBottom20"><span class="font-open">Panel Box</span></h4>
						<div class="row">
							<div class="col-md-4">
								<div class="panel panel-info">
									<div class="panel-heading">
										<h3 class="panel-title enText">PANEL TITLE</h3>
									</div>
									<div class="panel-body">
										Lorem ipsum dolor sit amet, consectetur adipisicing elit...
									</div>
								</div>
							</div>
							<div class="col-md-4">
								<div class="panel panel-warning">
									<div class="panel-heading">
										<h3 class="panel-title koText">판넬 제목</h3>
									</div>
									<div class="panel-body">
										단순히 고통이라는 이유 때문에 고통 그 자체를 사랑하거나 추구하거나...
									</div>
								</div>
							</div>
							<div class="col-md-4">
								<div class="panel panel-success">
									<div class="panel-heading">
										<h3 class="panel-title enText">Lorem ipsum dolor sit amet</h3>
									</div>
									<div class="panel-body">
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed ...
								</div>
							</div>
						</div>
					</div>
				</div>
			
위 코드에서 panel-info, panel-warning, panel-success 클래스에 따라 컬러가 지정됩니다.

Alerts

Heads up! This alert needs your attention, but it's not important.
Well done! You successfully read this important alert message.
Warning! Best check yo self, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
				<div class="row mBottom20">
					<div class="col-md-12">
						<h4 class="head-line mBottom20"><span class="font-open">Alerts</span></h4>
						<div class="row">
							<div class="col-md-6">
								<div class="alert alert-dismissable alert-info">
								  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
								  <strong>Heads up!</strong> This alert needs your attention, but it's not important.
								</div>
							</div>
							<div class="col-md-6">
								<div class="alert alert-dismissable alert-success">
								  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
								  <strong>Well done!</strong> You <a href="#" class="alert-link">successfully</a> read this important alert message.
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-6">
								<div class="alert alert-dismissable alert-warning">
								  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
								  <strong>Warning!</strong> Best check yo self, you're not looking too <a href="#" class="alert-link">good.</a>
								</div>
							</div>
							<div class="col-md-6">
								<div class="alert alert-dismissable alert-danger">
								  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
								  <strong>Oh snap!</strong> Change a few things up and try submitting again.
								</div>
							</div>
						</div>
					</div>
				</div>
			
위 코드에서 alert-info, alert-success, alert-warning, alert-danger 부분이 컬러를 지정하게 됩니다.

TABS

역시 마찬가지로, 단순히 고통이라는 이유 때문에 고통 그 자체를 사랑하거나 추구하거나 소유하려는 자는 없다. 다만 노역과 고통이 아주 큰 즐거움을 선사하는 상황이 때로는 발생하기 때문에 고통을 찾는 사람이 있는 것이다.

간단한 예를 들자면, 모종의 이익을 얻을 수도 없는데 힘든 육체적 노력을 기꺼이 할 사람이 우리들 중에 과연 있겠는가?
하지만 귀찮은 일이 뒤따르지 않는 즐거움을 누리는 것을 선택한 사람, 혹은 아무런 즐거움도 생기지 않는 고통을 회피하는 사람을 누가 탓할 수 있겠는가?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
역시 마찬가지로, 단순히 고통이라는 이유 때문에 고통 그 자체를 사랑하거나 추구하거나 소유하려는 자는 없다. 다만 노역과 고통이 아주 큰 즐거움을 선사하는 상황이 때로는 발생하기 때문에 고통을 찾는 사람이 있는 것이다.

간단한 예를 들자면, 모종의 이익을 얻을 수도 없는데 힘든 육체적 노력을 기꺼이 할 사람이 우리들 중에 과연 있겠는가?
하지만 귀찮은 일이 뒤따르지 않는 즐거움을 누리는 것을 선택한 사람, 혹은 아무런 즐거움도 생기지 않는 고통을 회피하는 사람을 누가 탓할 수 있겠는가?

About KSODESIGN

본격 스릴러 장르의 영화라고 할 수 있는 작품 역시 손에 꼽을 정도였고 90년대의 멜로와 코미디 영화 그러나 [살인의 추억]을 필두로 실화를 바탕으로 한 스릴러들이 흥행과 비평에서 대성공을 거두고 [올드보이]의 칸 영화제 수상으로 인해 한국형 스릴러들의 저변이 조금씩 넓어지기 시작하지 않았나 싶네요.
그러나 [살인의 추억]을 필두로 실화를 바탕으로 한 스릴러들이 흥행과 비평에서 대성공을 거두고 [올드보이]의 칸 영화제 수상으로 인해 한국형 스릴러들의 저변이 조금씩 넓어지기 시작하지 않았나 싶네요. 근래 들어 한국 스릴러 영화가 일정 이상의 재미와 흥행으로 인해 조금 더 관객들과 가까이 호흡하고 있다는 사실을 올해 들어 더욱 확실히 느낄 수 있는 것 같습니다.
2000년대 초반까지만 해도 한국영화에서 스릴러라는 장르는 불모지나 다름 없었습니다. 본격 스릴러 장르의 영화라고 할 수 있는 작품 역시 손에 꼽을 정도였고 90년대의 멜로와 코미디 영화는 2000년대 들어 블록버스터의 흥행 실패와 이른바 조폭 코미디의 성공으로 한국영화는 일부 장르에 치우치는 듯 보였습니다.
<div class="row mBottom20">
	<div class="col-md-12">
		<div class="row">
			<div class="col-xs-12 col-sm-6 col-md-6 mBottom20">
				<h4 class="head-line mBottom20"><span class="font-open">TABS</span></h4>
				<div id="tabs-content" class="tabs_container">
					<ul class="nav nav-tabs" id="ksoTab">
					  <li class="active"><a href="#home">TAB ONE</a></li>
					  <li><a href="#profile">TAB TWO</a></li>
					  <li><a href="#messages">TAB THREE</a></li>
					</ul>					
					<div class="tab-content">
					  <div class="tab-pane active" id="home">
						<div class="visible-tablet">
							역시 마찬가지로, 단순히 고통이라는 이유 때문에 고통 그 자체를 사랑하거나... <br /><br />
							하지만 귀찮은 일이 뒤따르지 않는 즐거움을 누리는 것을 선택한 사람...
						</div>
					  </div>
					  <div class="tab-pane" id="profile">
						<div class="visible-tablet">
							Lorem ipsum dolor sit amet, magna aliqua...<br /><br />Duis aute irure dolor in reprehenderit...
						</div>
					  </div>
					  <div class="tab-pane" id="messages">
						<div class="visible-tablet">
							역시 마찬가지로, 단순히 고통이라는 이유 때문에 고통...<br /><br />간단한 예를 들자면...
						</div>
					  </div>
					</div>
				</div>
			</div>
			<script>
				 (function ($) {
					  $(function () {
							$('#ksoTab a:first').tab('show');
					  })
				}) (jQuery);
			</script>
			<div class="col-xs-12 col-sm-6 col-md-6 mBottom20">
				<h4 class="head-line mBottom20"><span class="font-open">About KSODESIGN</span></h4>
				<div class="panel-group" id="accordion">
				  <div class="panel">
					<div class="panel-heading">
					  <h3 class="panel-title">
						<a class="accordion-toggle koText font12" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
						  글로벌 웹 트랜드에 맞춘 디자인을 추구
						  <span class="ico"></span>
						</a>
					  </h3>
					</div>
					<div id="collapseOne" class="panel-collapse collapse in">
					  <div class="panel-body">
						본격 스릴러 장르의 영화라고 할 수 있는 작품 역시 손에 꼽을 정도였고 90년대의 멜로와 코미디 영화 그러나 [살인의 추억]을 필두로 실화를 바탕으로 한 스릴러들이 흥행과 비평에서 대성공을 거두고 [올드보이]의 칸 영화제 수상으로 인해 한국형 스릴러들의 저변이 조금씩 넓어지기 시작하지 않았나 싶네요.
					  </div>
					</div>
				  </div>
				  <div class="panel">
					<div class="panel-heading">
					  <h3 class="panel-title">
						<a class="accordion-toggle koText font12" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
						  혁신적인 기술을 사용하여 새로운 변화를 시도
						  <span class="ico"></span>
						</a>
					  </h3>
					</div>
					<div id="collapseTwo" class="panel-collapse collapse">
					  <div class="panel-body">
						그러나 [살인의 추억]을 필두로 실화를 바탕으로 한 스릴러들이 흥행과 비평에서 대성공을 거두고 [올드보이]의 칸 영화제 수상으로 인해 한국형 스릴러들의 저변이 조금씩 넓어지기 시작하지 않았나 싶네요. 근래 들어 한국 스릴러 영화가 일정 이상의 재미와 흥행으로 인해 조금 더 관객들과 가까이 호흡하고 있다는 사실을 올해 들어 더욱 확실히 느낄 수 있는 것 같습니다. 
					  </div>
					</div>
				  </div>
				  <div class="panel">
					<div class="panel-heading">
					  <h3 class="panel-title">
						<a class="accordion-toggle koText font12" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
						  사용자 환경을 고려하여 늘 고민하고 도전
						  <span class="ico"></span>
						</a>
					  </h3>
					</div>
					<div id="collapseThree" class="panel-collapse collapse">
					  <div class="panel-body">
						2000년대 초반까지만 해도 한국영화에서 스릴러라는 장르는 불모지나 다름 없었습니다. 본격 스릴러 장르의 영화라고 할 수 있는 작품 역시 손에 꼽을 정도였고 90년대의 멜로와 코미디 영화는 2000년대 들어 블록버스터의 흥행 실패와 이른바 조폭 코미디의 성공으로 한국영화는 일부 장르에 치우치는 듯 보였습니다. 
					  </div>
					</div>
				  </div>
				</div><!-- End accordion -->
			</div>
		</div>
	</div>
</div>
			

Progress Bar Default

WEB DESIGN 90%

HTML & CSS 80%

JAVASCRIPT & PHP 65%

XPRESSENGINE CMS 90%

Progress Bar Option

WEB DESIGN 90%

HTML & CSS 80%

JAVASCRIPT & PHP 65%

XPRESSENGINE CMS 90%

<div class="row mBottom20">
	<div class="col-md-12">	
		<div class="row">
			<div class="col-md-6 mBottom20">
				<h4 class="head-line mBottom20"><span class="font-open">Progress Bar Default</span></h4>
				<p class="font_entitle margin_b5">WEB DESIGN 90%</P>
				<div class="progress">
				  <div class="progress-bar progress-bar-success" style="width: 75%;"></div>
				</div>
				<p class="font_entitle margin_b5">HTML & CSS 80%</P>
				<div class="progress">
				  <div class="progress-bar progress-bar-success" style="width: 80%;"></div>
				</div>
				<p class="font_entitle margin_b5">JAVASCRIPT & PHP 65%</P>
				<div class="progress">
				  <div class="progress-bar progress-bar-success" style="width: 95%;"></div>
				</div>
				<p class="font_entitle margin_b5">XPRESSENGINE CMS 90%</P>
				<div class="progress">
				  <div class="progress-bar progress-bar-success" style="width: 80%;"></div>
				</div>
			</div>
			<div class="col-md-6 mBottom20">
				<h4 class="head-line mBottom20"><span class="font-open">Progress Bar Option</span></h4>
				<p class="font_entitle margin_b5">WEB DESIGN 90%</P>
				<div class="progress">
				  <div class="progress-bar pregress-bar-info" style="width: 90%;"></div>
				</div>
				<p class="font_entitle margin_b5">HTML & CSS 80%</P>
				<div class="progress progress-striped">
				  <div class="progress-bar progress-bar-success" style="width: 80%;"></div>
				</div>
				<p class="font_entitle margin_b5">JAVASCRIPT & PHP 65%</P>
				<div class="progress progress-striped active">
				  <div class="progress-bar progress-bar-warning" style="width: 65%;"></div>
				</div>
				<p class="font_entitle margin_b5">XPRESSENGINE CMS 90%</P>
				<div class="progress">
				  <div class="progress-bar progress-bar-danger" style="width: 90%;"></div>
				</div>
			</div>
		</div>
	</div>
</div>
			

Our Team

KS Jade
Web Director

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="row mBottom20">
	<div class="col-md-12"><h4 class="head-line mBottom20"><span class="font-open">Our Team</span></h4></div>
	<div class="col-sm-6 col-md-3 mBottom20">
		<div class="thumbnail thumbnail-noBorder">
			<div class="text-center"><img class="img-circle marginAuto img-responsive" src="/home/hosting_users/ksostudio/www/respon/outerpage/img/avatar1.png" alt=""></div>
			<div class="caption">
				<h5 class="text-center">KS Jade</h5>
				<div class="text-center">Web Director</div><hr />
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				<div class="text-center">
					<a href="#" class="kso_thumbicon" title="facebook"><i class="icon-facebook-sign icon-2x"></i></a>
					<a href="#" class="kso_thumbicon" title="facebook"><i class="icon-twitter-sign icon-2x"></i></a>
					<a href="#" class="kso_thumbicon" title="facebook"><i class="icon-github-sign icon-2x"></i></a>
				</div>
			</div>
		</div>
	</div>
	<div class="col-sm-6 col-md-3 mBottom20 hidden-xs">
		<div class="thumbnail thumbnail-noBorder">
			<div class="text-center"><img class="img-circle marginAuto img-responsive" src="/home/hosting_users/ksostudio/www/respon/outerpage/img/avatar2.png" alt=""></div>
			<div class="caption">
				<h5 class="text-center">KS Jade</h5>
				<div class="text-center">Web Director</div><hr />
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				<div class="text-center">
					<a href="#" class="kso_thumbicon" title="facebook"><i class="icon-facebook-sign icon-2x"></i></a>
					<a href="#" class="kso_thumbicon" title="facebook"><i class="icon-twitter-sign icon-2x"></i></a>
					<a href="#" class="kso_thumbicon" title="facebook"><i class="icon-github-sign icon-2x"></i></a>
				</div>
			</div>
		</div>
	</div>
	<div class="col-sm-6 col-md-3 mBottom20 hidden-xs">
		<div class="thumbnail thumbnail-noBorder">
			<div class="text-center"><img class="img-circle marginAuto img-responsive" src="/home/hosting_users/ksostudio/www/respon/outerpage/img/avatar3.png" alt=""></div>
			<div class="caption">
				<h5 class="text-center">KS Jade</h5>
				<div class="text-center">Web Director</div><hr />
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				<div class="text-center">
					<a href="#" class="kso_thumbicon" title="facebook"><i class="icon-facebook-sign icon-2x"></i></a>
					<a href="#" class="kso_thumbicon" title="facebook"><i class="icon-twitter-sign icon-2x"></i></a>
					<a href="#" class="kso_thumbicon" title="facebook"><i class="icon-github-sign icon-2x"></i></a>
				</div>
			</div>
		</div>
	</div>
	<div class="col-sm-6 col-md-3 mBottom20 hidden-xs">
		<div class="thumbnail thumbnail-noBorder">
			<div class="text-center"><img class="img-circle marginAuto img-responsive" src="/home/hosting_users/ksostudio/www/respon/outerpage/img/avatar4.png" alt=""></div>
			<div class="caption">
				<h5 class="text-center">KS Jade</h5>
				<div class="text-center">Web Director</div><hr />
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				<div class="text-center">
					<a href="#" class="kso_thumbicon" title="facebook"><i class="icon-facebook-sign icon-2x"></i></a>
					<a href="#" class="kso_thumbicon" title="facebook"><i class="icon-twitter-sign icon-2x"></i></a>
					<a href="#" class="kso_thumbicon" title="facebook"><i class="icon-github-sign icon-2x"></i></a>
				</div>
			</div>
		</div>
	</div>
</div>
			

Thumbnail Gallery

감성을 자극하다
<div class="row">
	<div class="col-sm-6 col-md-4 mBottom20">
		<div class="thumbnail">
			<img src="/home/hosting_users/ksostudio/www/respon/outerpage/img/slide02.jpg" alt="">
			<div class="caption">
				<h5 class="text-center koText">감성을 자극하다</h5>
			</div>
		</div>
	</div>
	<div class="col-sm-6 col-md-4 mBottom20 hidden-xs">
		<div class="thumbnail">
			<img src="/home/hosting_users/ksostudio/www/respon/outerpage/img/slide03.jpg" alt="">
			<div class="caption">
				<h5 class="text-center koText">디자인을 말하다</h5>
			</div>
		</div>
	</div>
	<div class="col-sm-6 col-md-4 mBottom20 hidden-xs">
		<div class="thumbnail">
			<img src="/home/hosting_users/ksostudio/www/respon/outerpage/img/slide01.jpg" alt="">
			<div class="caption">
				<h5 class="text-center koText">발상의 전환</h5>
			</div>
		</div>
	</div>
</div>
			
이미지 경로에 유의하세요~!
Thumbnail label

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Read More

<div class="row mBottom20">
	<div class="col-sm-6 col-md-3 mBottom20">
		<div class="thumbnail">
			<img src="/home/hosting_users/ksostudio/www/respon/outerpage/img/slide01.jpg" alt="">
			<div class="caption">
				<h5>Thumbnail label</h5>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
				<p><a href="#" class="btn-kso btn-small">Read More</a></p>
			</div>
		</div>
	</div>
	<div class="col-sm-6 col-md-3 mBottom20 hidden-xs">
		<div class="thumbnail">
			<img src="/home/hosting_users/ksostudio/www/respon/outerpage/img/slide02.jpg" alt="">
			<div class="caption">
				<h5>Thumbnail label</h5>
				<p>단순히 고통이라는 이유 때문에 고통 그 자체를 사랑하거나 추구하거나 소유하려는 자는 없다. 다만 노역과 고통이 아주 큰 즐거움을 선사하는 상황이 고통을 찾는 사람이 있는 것이다.</p>
				<p><a href="#" class="btn-kso btn-small">Read More</a></p>
			</div>
		</div>
	</div>
	<div class="col-sm-6 col-md-3 mBottom20 hidden-xs">
		<div class="thumbnail">
			<img src="/home/hosting_users/ksostudio/www/respon/outerpage/img/slide01.jpg" alt="">
			<div class="caption">
				<h5>Thumbnail label</h5>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
				<p><a href="#" class="btn-kso btn-small">보러가기</a></p>
			</div>
		</div>
	</div>
	<div class="col-sm-6 col-md-3 mBottom20 hidden-xs">
		<div class="thumbnail">
			<img src="/home/hosting_users/ksostudio/www/respon/outerpage/img/slide02.jpg" alt="">
			<div class="caption">
				<h5>Thumbnail label</h5>
				<p>단순히 고통이라는 이유 때문에 고통 그 자체를 사랑하거나 추구하거나 소유하려는 자는 없다. 다만 노역과 고통이 아주 큰 즐거움을 선사하는 상황이 고통을 찾는 사람이 있는 것이다.</p>
				<p><a href="#" class="btn-kso btn-small">보러가기</a></p>
			</div>
		</div>
	</div>
</div>
			

Carousel

<div class="row mBottom20">
	<div class="col-md-12">
		<h4 class="head-line mBottom20"><span class="font-open">Carousel</span></h4>
		<div class="row">
			<div class="col-sm-6 col-md-6 mBottom20">
				<div id="carousel-img-generic" class="carousel slide">
				  <ol class="carousel-indicators">
					<li data-target="#carousel-img-generic" data-slide-to="0" class="active"></li>
					<li data-target="#carousel-img-generic" data-slide-to="1"></li>
					<li data-target="#carousel-img-generic" data-slide-to="2"></li>
				  </ol>
				  <div class="carousel-inner">				
					<div class="item text-center active">
						<img src="/home/hosting_users/ksostudio/www/respon/outerpage/img/slide01.jpg" class="img-responsive marginAuto">
						<div class="carousel-caption hide">
							<h4>Header text 1</h4>
							<p>Description text 1</p>
						</div>
					</div>
					<div class="item text-center">
						<img src="/home/hosting_users/ksostudio/www/respon/outerpage/img/slide02.jpg" class="img-responsive marginAuto">
						<div class="carousel-caption hide">
							<h4>Header text 2</h4>
							<p>Description text 2</p>
						</div>
					</div>
					<div class="item text-center">
						<img src="/home/hosting_users/ksostudio/www/respon/outerpage/img/slide03.jpg" class="img-responsive marginAuto">
						<div class="carousel-caption hide">
							<h4>Header text 3</h4>
							<p>Description text 3</p>
						</div>
					</div>				
				  </div>			 
				  <a class="left carousel-control" href="#carousel-img-generic" data-slide="prev">
					<span class="icon-prev"></span>
				  </a>
				  <a class="right carousel-control" href="#carousel-img-generic" data-slide="next">
					<span class="icon-next"></span>
				  </a> 
				</div>
			</div><!-- end Image carousel -->
			<div class="col-sm-6 col-md-6 mBottom20">
				<div id="carousel-text-generic" class="carousel slide">
				  <ol class="carousel-indicators">
					<li data-target="#carousel-text-generic" data-slide-to="0" class="icon-black active"></li>
					<li data-target="#carousel-text-generic" data-slide-to="1" class="icon-black"></li>
					<li data-target="#carousel-text-generic" data-slide-to="2" class="icon-black"></li>
				  </ol>
				  <div class="carousel-inner">				
					<div class="item active">
						<h3 class="slide-text text-center">
							<i class="icon-quote-left"></i><br />
							단순히 고통이라는 이유 때문에 고통 그 자체를 사랑하거나 추구하거나 소유하려는 자는 없다.<br />
							<i class="icon-quote-right"></i><br />
							<small>- KSJade</small>
						</h3>
						<div class="carousel-caption">
						</div>
					</div>
					<div class="item">
						<h3 class="slide-text text-center">
							<i class="icon-quote-left"></i><br />
							다만 노역과 고통이 아주 큰 즐거움을 선사하는 상황이 때로는 발생하기 때문에 고통을 찾는 사람이 있는 것이다.<br />
							<i class="icon-quote-right"></i><br />
							<small>- KSJade</small>
						</h3>
						<div class="carousel-caption">
						</div>
					</div>
					<div class="item">
						<h3 class="slide-text text-center">
							<i class="icon-quote-left"></i><br />
							아무런 즐거움도 생기지 않는 고통을 회피하는 사람을 누가 탓할 수 있겠는가?<br />
							<i class="icon-quote-right"></i><br />
							<small>- KSJade</small>
						</h3>
						<div class="carousel-caption">
						</div>
					</div>				
				  </div>			 
				  <a class="left carousel-control" href="#carousel-text-generic" data-slide="prev">
					<span class="icon-prev"></span>
				  </a>
				  <a class="right carousel-control" href="#carousel-text-generic" data-slide="next">
					<span class="icon-next"></span>
				  </a> 
				</div>
			</div><!-- end Text carousel -->
		</div>
	</div>
</div><!-- End Slider -->
<script>
	 (function ($) {
		// carousel start
		$('.carousel').carousel({
			interval: 7000
		});
	}) (jQuery);
</script>
			

Table Default

Student-ID First Name Last Name Grade
001 Rammohan Reddy A+
002 Smita Pallod A
003 Rabindranath Sen A+

Table Bordered

Student-ID First Name Last Name Grade
001 Rammohan Reddy A+
002 Smita Pallod A
003 Rabindranath Sen A+
<div class="row mBottom20">
	<div class="col-xs-12 col-md-6 mBottom20">
		<h4 class="head-line mBottom20"><span class="font-open">Table Default</span></h4>
		<table class="table table-hover" id="world_clock">
			<thead>  
			  <tr>  
				<th>Student-ID</th>  
				<th>First Name</th>  
				<th>Last Name</th>  
				<th>Grade</th>  
			  </tr>  
			</thead>  
			<tbody>  
			  <tr>  
				<td>001</td>  
				<td>Rammohan </td>  
				<td>Reddy</td>  
				<td>A+</td>  
			  </tr>  
			  <tr>  
				<td>002</td>  
				<td>Smita</td>  
				<td>Pallod</td>  
				<td>A</td>  
			  </tr>  
			  <tr>  
				<td>003</td>  
				<td>Rabindranath</td>  
				<td>Sen</td>  
				<td>A+</td>  
			  </tr>  
			</tbody>  
		</table>
	</div>
	<div class="col-xs-12 col-md-6 mBottom20">
		<h4 class="head-line mBottom20"><span class="font-open">Table Bordered</span></h4>
		<table class="table table-striped table-bordered table-hover" id="world_clock">
			<thead>  
			  <tr>  
				<th>Student-ID</th>  
				<th>First Name</th>  
				<th>Last Name</th>  
				<th>Grade</th>  
			  </tr>  
			</thead>  
			<tbody>  
			  <tr>  
				<td>001</td>  
				<td>Rammohan </td>  
				<td>Reddy</td>  
				<td>A+</td>  
			  </tr>  
			  <tr>  
				<td>002</td>  
				<td>Smita</td>  
				<td>Pallod</td>  
				<td>A</td>  
			  </tr>  
			  <tr>  
				<td>003</td>  
				<td>Rabindranath</td>  
				<td>Sen</td>  
				<td>A+</td>  
			  </tr>  
			</tbody>  
		</table>
	</div>
</div>
			
©2013 KSODESIGN.All Rights Reserved