CodeIgniter

파일 & Twitter Bootstrap

수업 소개

이번 시간에는 에플리케이션에서 사용하는 파일을 다루는 방법에 대해서 알아본다. 그 과정에서 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

댓글

댓글 본문
  1. 의기천추
    2023-04-02

    * http://getbootstrap.com/

    1, bootstrapv5.3은 하단 우측의 CDN으로 링크
    2, 페이지가 많이 바뀌어서.. read the docs 참고 해야함
    3, - 'row-fluid' -> 'row'
    - 'span*' -> 'col-*' (*는 숫자)

    밑에 알려주신 분들께 감사..
  2. 존레논아부지
    2022-10-25 완
  3. dueto park
    2022.07.02. 파일 & 트위터 Bootstrap 수강 완.

    - 강의에 나온 부트스트랩의 그리드 클래스명은 현재 사용되지 않으므로, 다음과 같이 교체해야한다.
    - 'row-fluid' -> 'row'
    - 'span*' -> 'col-*' (*는 숫자)
    (출처) https://www.ualberta.ca......tml

    - Bootstap의 예제가 다양해짐
    (출처) https://getbootstrap.com......ar/
    (출처) https://getbootstrap.com......bs/
  4. jeisyoon
    2021.08.17 File & Twitter Bootstrap - OK
  5. Haibane
    몇년 전부터 봐야지, 봐야지 하다가 이제서야 늦게나마 보기 시작했습니다.
    좋은 강의 감사합니다.
  6. Kun-Woo Lee
    좋은 강좌 감사합니다
  7. Yosi Gom
    경로 설정이 정말 중요하다는 것을 다시 한번 느꼈습니다!!
  8. 정태일
    왼쪽메뉴 클릭시 오버된 이미지 처리는 어떻게 해야할까요?
  9. 김세창
    잘보고 갑니다~^^ ㅎ
  10. 감사합니다.
  11. ys94411
    항상 감사드립니다.!
  12. JustStudy
    고맙습니다
  13. gnsdl106@naver.com
    어디에 layout이 있는거죠? grid system에 들어가도 없던데;
  14. will
    메소드를 불러오는 페이지에서 오류가납니다
    topic 컨트롤러
    function get($id){
    }
    위에 topic/get/$id 페이지 로드시 $id값을 불러오지 못하고 오류발생
    대화보기
    • ch8773
      <div class="span10">을 <div class="col-sm-10">으로 적용하니 되네요
      http://www.w3schools.com......ap/ 을 참조해 보세요
      대화보기
      • will
        구버젼에서 이고잉님이 설명한대로 똑같이했는데 왜 적용이 안되는지 모르겠네요.
        그래서 새버젼으로 해보니 레이아웃 적용되네요

        http://getbootstrap.com/
        부츠트랩 최신버젼입니다. 사용방법은 같습니다 .
        사이트내에 메뉴scaffolding 대신 css 로 바꼇고
        세부옵션에서 layout이아닌 glid option으로 들어가야됩니다.
      • will
        1
      • pathfinder
        참 명강의이십니다. 이것만 달달 외우면, 나같은 늦깍기도 잘 할수 있겠네요... 감사 또 감사합니다...
      • 샤핀
        정말 알아 둬야 할 것이 많은 곳입니다. 감사합니다. 생활코딩 ^^
      • jio1122
        정말감사합니다 ㅎㅎㅎㅎ
      • 김승갑
        좋은 강의 감사합니다. 많이 배워가네요 :D
      • 쌈닭
        컨트롤러에 다음과 같이 추가해 주시면 됩니다...

        public function _remap($method)
        {
        //헤더 include
        $this->load->view('header_v');

        if( method_exists($this, $method) )
        {
        $this->{"{$method}"}();
        }

        //푸터 include
        $this->load->view('footer_v');
        }
        대화보기
        • YoonWoo
          그건 서버 세팅에서 <?php 를 사용할때
          <? 만 사용해도 묵시적으로 <?php 로 인정하는것을 설정해주어야됩니다.

          php.ini 에서
          short_open_tag 을 검색해서 short_open_tag=off 상태이거나 설정이 되지 않았다면
          short_open_tag=on 으로 입력하시거나 설정해주세요
          대화보기
          • magichim
            오타인지 모르겠으나

            topic_list.php

            부분에서 두 번 째 <? ?> php선언문 에 앞 물음표에 <?php 가 안써져있어 아무것도 안뜨는 것 같습니다.

            수정하니 저는 다시 떴구요

            php버전마다 다르게 출력되는 것 같아 글 남겨요.
          • 이성
            궁금한것이있는데요
            view 에서 공통적으로 사용되는 head, footer php 파일들에 관하여 컨트롤러에서 매개 메소드 작성할때마다
            head,foot파일 로드 하는것이 좀 번거로운것같은데 해결방안이 없을까요?
          • 총이
            대단히 감사합니다.^^
            복받으세요~!
          • uteol
            사랑 합니다.
          • 서리
            이 강의는 2.3.2 버전을 기준으로 작성된 거네요...
            http://getbootstrap.com/2.3.2/

            그냥 다운 받아서 했더니 3.0.3버전이라 css가 무너지네요...;;
          • Planetis
            http://getbootstrap.com/
            부트스트랩 링크가 안되길래 검색해보고 가져왔습니다 :)
          • 감사!
            정말좋네요~
          • 겅부쟁이
            감사합니다~
          • 김태훈, 호치민
            대단히 감사합니다.
          • 지지고
            고맙습니다.
          버전 관리
          egoing@gmail.com
          현재 버전
          선택 버전
          graphittie 자세히 보기