수업 소개
이번 시간에는 에플리케이션에서 사용하는 파일을 다루는 방법에 대해서 알아본다. 그 과정에서 twitter bootstrap을 적용하는 방법도 함께 살펴본다.
파일
웹에플리케이션에서 파일은 크게 두가지 용도로 구분 할 수 있다. 하나는 에플리케이션에서 사용하는 CSS/JavaScript 파일이나 버튼에서 사용하는 이미지와 같은 에플리케이션 파일과 사용자가 업로드 한 사용자 파일이다.
CI와 파일
CodeIgniter에서 파일을 사용하기 위해서는 특별한 것은 없고 CI의 root 디렉토리에 파일을 위치시키면 된다. 그런데 이렇게 하면 파일을 관리하는 것이 어렵기 때문에 필자의 경우 static이라는 디렉토리를 만들고 그 하위에 파일의 종류에 따른 디렉토리를 구성하고 있다.
예를들어 css 디렉토리 하위의 style.css 파일에 접근하려면 아래와 같이 URL을 사용하면 된다.
http://ooo2.org/static/css/style.css
Twitter Bootstrap
twitter bootstrap를 예제에 적용시키는 방법을 통해서 파일을 사용하는 법을 알아보자. twitter bootstrap에 대한 자세한 사용법은 twitter bootstrap 수업을 참고하자.
bootstarp를 적용하기 하기 위해서 CI의 루트디렉토리에 static/lib 디렉토리를 만들자. 그리고 lib 디렉토리에 twitter bootstrap를 다운받아서 위치시키자. (bootstarp 다운로드 페이지로 바로가기)
다음과 같은 구조가 되면 된다. 나머지 자세한 설명은 동영상을 참고하자.
예제
application/views/head.php
차이점이란? 기존의 코드와의 차이점을 부각시키기 위해서 차이점을 캡처했다. 달라진 부분은 붉은 색으로 표시된다.
차이점
전체코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="/static/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
body{
padding-top:60px;
}
</style>
<link href="/static/lib/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">JavaScript</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
상단 메뉴가 float 되기 때문에 컨텐츠가 메뉴에 가리는 문제가 발생한다. 이것을 해결하기 위해서 body의 padding-top 값을 60px로 지정했는데, 이 CSS 속성은 bootstarp.min.css와 bootstarp.responsive.css 사이에 선언해야만 한다.
navbar의 container를 container-fluid로 지정해야지 brand인 JavaScript가 화면 왼쪽에 정렬된다. 그냥 conainer로 지정하면 화면 중앙에 정렬된다.
application/views/footer.php
차이점
전체코드
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="/static/lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
application/views/get.php
차이점
전체코드
<div class="span10"> <article> <h1><?=$topic->title?></h1> <div> <?=$topic->description?> </div> </article> </div>
application/views/main.php
차이점
전체코드
<div class="span10"> </div>
application/views/topic_list.php
차이점
전체코드
<div class="span2">
<ul class="nav nav-tabs nav-stacked">
<?php
foreach($topics as $entry){
?>
<li><a href="/index.php/topic/get/<?=$entry->id?>"><?=$entry->title?></a></li>
<?
}
?>
</ul>
</div>
태그
태그명 : file
태그주소 : https://github.com/egoing/codeigniter_codeingeverbody/tree/file
