제가 html과 css를 어느정도 다루기 때문에 UI관련된 프론트엔드툴을 쓸생각이 없었는데 모바일도 동일 페이지를 재공한다는 가정하에 레이아웃을 잡게 되면 이야기가 달라 집니다;;;
손봐야할 것들이 너무 많기 때문이죠;;;
그래서 유명한 웹 프론트엔드 도구인 부트스트랩(bootstrap)을 사용하기로 결정했습니다.
저 같이 디자이너를 따로 두지 않았는데 디자인 센스도 꽝이 개발자에게 이런 툴들을 여러가지면으로 좋습니다 ㅎㅎㅎ
0. 시작하기 전에...
재미있게도 누겟(NuGet)에는 이미 부트스트랩의 최신버전이 올라와 있습니다.
그런데 다운받아서 부스트랩 샘플을 돌려보니 레이아웃이 깨집니다-_-;;;
소스를 확인해보니 누겟으로 받은 부트스트랩파일에는 빠진파일이 몇게 있습니다 -_-a
그래서 결국 그냥 부트스트랩 홈페이지에서 파일을 받아서 사용했습니다.
가뜩이나 MVC4의 기본 템플릿에 있는 기능도 거의 안써서 지저분하다고 느끼고 있던 터라 이 기회에 그냥 빈 템플릿에 부트스트랩을 적용 시키겠다고 생각하고 이 포스팅을 씁니다 ㅎㅎㅎ
1. 필요한 파일 다운받기
프로젝트는 '빈 프로젝트'로 생성 합니다.
1-1. JQuery 받기
부트스트랩은 jQuery를 사용하기 때문에 제이쿼리를 다운받아야 합니다.
(참고 : jQuery 홈페이지)
전 최신 버전인 2.0.3을 받겠습니다.
'Scripts'폴더를 만들고 다운받은 제이쿼리 파일을 넣습니다.
1-2. Bootstrap 받기
부트스트랩 홈페이지에가서 파일을 받습니다.
(참고 : Bootstrap )
'Content'폴더를 만듭니다.
받을 파일을 압축을 풉니다.
압축푼 파일들중 'dist'폴더를 찾아 내용물을 'Content'로 옵깁니다.
원래 css와 img 'Content'폴더에 js는 'Scripts'넣고 관리하는 것이 일반적이지만......
저는 버전관리 문제때문에 그냥 한곳에서 관리합니다.
(나중에 부트스트랩이 업데이트 되면 파일만 덮으면 됩니까요 ㅎㅎㅎ)
1-3. 샘플 받기
부트스트랩이 잘적용됬는지 확인할 셈플입니다.
(참고 : bootstrap - Getting Started - Examples)
저는 일반적으로 많이 사용하는 레이아웃인 'Jumbotron'를 받겠습니다.
해당 샘플로 들어가서 '소스 보기'를 통해 내용을 받아오시면 되겠습니다.
(어차피 제가 뒤에 전체 코드를 올려둘 것이기 때문에 신경 안쓰셔도 됩니다 ㅎㅎㅎ)
2.프로젝트 준비하기
'빈 프로젝트'를 선택 했기때문에 마스터 페이지(마스터 레이아웃)이 없습니다.
'View'폴더에 'Shared'폴더를 만들고 '_Layout.cshtml' 레이아웃을 생성합니다.
'_Layout.cshtml'의 내용은 자동으로 생성된 데로 둡니다.
( '@{Layout = null;}'와 html 코드만 들어가 있는 것이 정상입니다.)
'View'폴더에 '_ViewStart.cshtml' 뷰를 추가하고 아래 코드를 넣습니다.
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
만약 여기서
'ASP.NET 런타임 오류: '.cshtml' 확장명에 대해 등록된 빌드 공급자가 없습니다.'
에러가 난다면 비주얼 스튜디오를 닫았다가 다시 여시면 됩니다.
비주얼 스튜디오 버그인듯 하네요;;
이제 기본 컨트롤러를 만들어야 합니다.
(그래야 화면을 보죠.)
'Controllers'폴더에서 오른쪽 클릭을 하고
추가 > 컨트롤
을 선택합니다.
컨트롤러의 이름은 'HomeController'로 해줍니다.
생성된 코드에서 'Index()'함수에서 오른쪽 클릭하고 '뷰 추가'를 선택하여 'Home'의 인덱스 뷰를 생성합니다.
이제 첫화면이 보이는지 확인해 봅시다.
이렇게 나오면 잘 만들어 진겁니다 ㅎㅎ
3. 부트스트랩 연결하기
이제 부트스트랩을 쓰기 위한 기본적인 선언들을 해봅시다.
마스터 페이지인 '_Layout.cshtml'에 선언을 하면 됩니다.
3-1. css연결하기
<title> 밑에 다음 코드를 추가 합니다.
<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
3-2. JQuery연결와 스크립트 연결하기
부트스트랩은 제이쿼리를 사용하기 때문에 제이쿼리를 먼저 선언하고 부트스트랩 스크립을 선언 해야 합니다.
</body>위에 다음 코드를 추가 합니다.
<script src="/Scripts/jquery-2.0.3.min.js" ></script>
<script src="/Content/bootstrap/js/bootstrap.min.js" ></script>
4. 샘플 넣기
원래 샘플을 그냥 넣으면 안되지만 일단 테스트를 위해서 그냥 넣어 봅시다.
<body> 밑에 다음 코드를 넣습니다.
<!-- 샘플 -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse 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>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg">Learn more »</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
</div>
<hr>
<footer>
<p>© Company 2013</p>
</footer>
</div> <!-- /container -->
<!-- //샘플 -->
그냥 이대로 돌려 봅시다.
스크롤을 해서 맨 아래로 내려가면 'Index'를 볼수 있습니다.
5. MVC 코드 옮기기
MVC(Razor 뷰 엔진)에서 차일드에서 차일드가 바인딩되는 위치는 '@RenderBody()' 이 부분입니다.
샘플의 '<div class="row">'의 내용을 지우고 아래 있는 '@RenderBody()'를 지운 부분에 넣습니다.
<div class="container">
<!-- Example row of columns -->
<div class="row">
@RenderBody()
</div>
<hr>
<footer>
<p>© Company 2013</p>
</footer>
</div> <!-- /container -->
<!-- //샘플 -->
드디어 원하는 데로 화면이 나왔습니다 ㅋ
화면이 줄어들면 부트스트랩이 자동으로 몇가지 처리를 해줍니다.
화면이 줄어드니 메뉴와 로그인 인터페이스가 메뉴형태로 바뀌는걸 볼수 있습니다.
마무리
이게 뭐라고 한글 자료가 별로 없는지 OTL
자습서나 블로그 같은 곳에서는 자동으로 생성되는 탬플릿을 기준으로 해서 불편한 점이 많아서 직접 만들어 봤습니다 ㅎㅎㅎ
역시 프로젝트는 깔끔해야 제맛이죠 ^^b
참고 자료
My Tec Bits - Bootstrap 3.0.0 with ASP.NET Web Forms – Step by Step – Without NuGet Package
