티스토리 스킨을 사용한지 오래되서 이번에 부트스트랩을 이용해서 스킨을 만드려고 합니다.
이번에 부트스트랩도 3.0으로 판올림을 했으니 겸사겸사 부트스트랩 3.0을 이용해서 HTML5 반응형웹으로 만들까 합니다.
티스토리의 경우는 사실 별도의 모바일스킨이 있어서 반응형웹이 크게 필요는 없는데, 이번에 티스토리에서 모바일스킨을 On/Off할 수 있는 기능이 추가되어서 원한다면 반응형웹으로 모바일 디자인을 할 수 있습니다.
추후에라도 여러가지 다양한 형태로 만들기 위한 기본 템플릿을 제작하여 포스팅 했습니다.
![[웹에서 볼때나오는 화면]](https://t1.daumcdn.net/cfile/tistory/2368F34C52426B4C1E)
위의 화면은 웹브라우저로 볼때 나오는 디자인입니다.
기본 레이아웃 수준이라 특별히 디자인이 적용되어 있지않아 밍밍 하죠? 이제 이쁘게 채워넣고 꾸며야 겠죠.
![[모바일에서 볼때나오는 화면]](https://t1.daumcdn.net/cfile/tistory/2553544C52426B4C29)
화면 가로사이즈가 작아지면 자동으로 테블릿이나 모바일로 인식해서 위와 같이 레이아웃이 변경됩니다.
GNB 메뉴를 보이지 않게 가려놓고 우상단에 버튼을 누르면 GNB메뉴가 나오게 처리되어 있고 사이드바영역도 보이지 않게 가려놓고 “Toggle nav” 버튼을 누르면 사이드바가 우즉에서 나오도록 처리되어 있습니다.
HTML5 소스코드
기본 코드는 아래와 같습니다.
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>부트스트램을 이용한 반응형웹 기본 HTML 탬플릿</title>
<link rel="shortcut icon" href="../../assets/ico/favicon.png"> <!-- 1. 파비콘 걸기 -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <!-- 2.부트스트랩용 CSS -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" /> <!-- 3.폰트아이콘용 CSS -->
<style type="text/css">
body {padding-top: 70px;}
footer {padding-left: 15px;padding-right: 15px;}
@media screen and (max-width: 768px) { /* 4. 모바일용 레이아웃이 되었을때 적용되는 CSS */
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-right .sidebar-offcanvas {right: -50%;}
.row-offcanvas-left .sidebar-offcanvas {left: -50%;}
.row-offcanvas-right .active {right: 50%;}
.row-offcanvas-left .active {left: 50%;}
.sidebar-offcanvas {position: absolute; top: 0; width: 50%;}
}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <!-- 5. 인터넷익스플로러 9버전 이하일 경우 html5가 인식될 수 있게 해주는 스크립트 -->
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="./images/respond.min.js"></script>
<![endif]-->
<!--[if IE 7]> <!-- 6. 인터넷익스플로러 7버전 일 경우 폰트아이콘이 인식될 수 있게 해주는 스크립트 -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">
<![endif]-->
</head>
<body>
<header class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<!--7. 모바일 시 GNB 메뉴 숨기기 시작 -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--모바일 시 GNB 메뉴 숨기기 끝 -->
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</header><!-- /.navbar -->
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<section class="col-xs-12 col-sm-9">
<!--8. 모바일 시 사이드 메뉴 숨기기 시작 -->
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
<!--모바일 시 사이드 메뉴 숨기기 끝 -->
#################<br>
매인 컨텐츠 영역<br>
#################<br>
</section><!--/span-->
<nav class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="well">
##############<br>
사이드바 영역<br>
##############<br>
</div><!--/.well -->
</nav><!--/nav-->
</div><!--/row-->
</div><!--/.container-->
<hr>
<footer>
<p>© Company 2013</p>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!--9. jquery 스크립트 -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script><!--10. bootstrap 스크립트 -->
<script type="text/javascript">
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});
</script>
</body>
</html>
아래에 티스토리 스킨에 맞게 필요한 파일을 저장해 놨습니다.
2015.03.05 갱신 : jquery.js파일과 bootstrap.js파일을 CDN으로 포함시켰으나 로드가 잘 되지 않아 직접 첨부했습니다.
htmlTemplate.zip
