이번에는 홈화면을 따로 빼는 것을 알아보겠습니다.

index 파일에 계속하여 작성하다보면 보기가 불편해지고 나중에 관리의 어려움을 야기할 수 있기 때문에

저는 홈화면을 때로 빼서 php의 include_once 를 통해서 넣어 보도록 하겠습니다.

방법은 우선 만드신 프로젝트에서 하위 폴더를 작성해 줍니다.

저는 home이라는 폴더를 생성하였습니다.

그 밑에 home.php 파일을 만들어서 기존에 홈화면에 넣은 소스를 그대로 붙여 넣기 해주었습니다.

이후 index.php로 돌아와 <?php include_once "./home/home.php"; ?> 를 넣어 index.php 파일에서 home/home.php 파일을 불러와서 보여줍니다.

그러면 기존과 같은 화면을 보실 수 있습니다.

저는 일전에 있던 막 넣은 텍스트를 빼고 넣으니 상단에 이미지와 기존 홈화면 디자인을 위해 만들어 놓은 내용이 딱 붙어서 보기 좋지 않아

margin-top css 속성을 이용하여 여백을 주었습니다.

그러면 아래와 같은 화면을 보실 수 있습니다.

다음에는 본격적으로 home화면을 만들어 보도록 하겠습니다.

이상입니다.^^

이번에는 Home 화면 구성을 만들어 보려고 합니다.

저는 부트스트랩에 있는 썸네일 예제를 가져와서 구성하고자 합니다.

부트스트랩에서 해당 부분을 찾아 들어가 복사 후 하단에 추가해 줍니다.

그러면 아래처럼 나오는데 이미지 이는 이미지 경로가 제대로 추가 되어 있지 않아서 발생하는 문제입니다.

img src 안에  http://placehold.it/190x200을 넣어주면 주어진 크기로 이미지가 들어가게 됩니다.

alt의 경우 이미지를 로드하지 못했을 경우 대체하는 텍스트로 저는 삭제하였습니다.

아래 소스를 참고 하세요.^^

<div class="row">

        <div class="col-sm-6 col-md-4">

          <div class="thumbnail">

            <img src="http://placehold.it/190x200">

            <div class="caption">

              <h3>Thumbnail label</h3>

              <p>...</p>

              <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

            </div>

          </div>

        </div>

      </div>

이미지가 들어갔음에도 불구하고 예제처럼 화면이 나오지 않네요. 이유는 내용을 포함하고 있는 div의 크기가 동적으로 지정이 되어 있기 때문입니다.

div에 style을 넣고 max-width값을 지정해 주면 크기를 조절할 수 있습니다.

style을 지정하면서 저는 이미지 크기도 변경을 하였습니다.

<div class="row">

        <div class="col-sm-6 col-md-4" style="max-width:250px;">

          <div class="thumbnail">

            <img src="http://placehold.it/240x200">

            <div class="caption">

              <h3>Thumbnail label</h3>

              <p>...</p>

              <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

            </div>

          </div>

        </div>

      </div>

하지만 해당 방법은 동적 사이트를 만들기에는 해상도가 높은 모니터에서 보면 배열이 맞지 않기 때문에 부트스트랩의 클래스 값을 변경해주는 방법으로 변경해 주는 것이 좋을 것 같아  class 값을 변경했습니다.

부트스트랩을 보시면  col-sm과 col-md에 대한 설명이 나와 있습니다.

부트스트랩은 12개의 칸으로 구성되어 있으며 뒤에 나오는 숫자는 차지하고 있는 공간을 의미합니다.

저는 작은 기기에서는 6칸을 차지하고 중간 기기에서는 3칸을 차지하게 만들고자 합니다.

그러면 아래 사진처럼 나옵니다. 화면을 줄였다 키웠다가 하면 크기가 변동 되는 것을 볼 수 있습니다.

아래 소스를 참고 하세요.

<div class="row">

        <div class="col-sm-6 col-md-3">

          <div class="thumbnail">

            <img src="http://placehold.it/240x200">

            <div class="caption">

              <h3>Thumbnail label</h3>

              <p>...</p>

              <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

            </div>

          </div>

        </div>

나중에 삭제하겠지만 화면이 허전하니 해당 소스를 동일하게 복사하여 4개를 채우면 아래처럼 나옵니다.

주의 하실 점은  class 값이 row로 되어 있는 항목 아래부터 복사를 해서 넣으셔야 합니다.

부트스트랩에서 class row 값은 다음줄을 의미하기 때문에 row까지 복사하면 일렬로 4개가 생기는 것을 보실 수 있습니다.

나중에 해당 부분은 DB와 연동하여 반복문으로 만들어 줄 것이기 때문에 많이 만들어 놓으실 필요는 없습니다.

오늘은 이만 마치도록 하겠습니다.

지난 글에서는 부트스트랩 소스를 가져와서 넣는 것까지 진행이 되었습니다.

이제는 부트스트랩 소스를 내가 원하는데로 바꾸는 방법에 대해서 안내를 드리겠습니다.

지난 시간에 붙여넣고 사이트를 웹사이트 상으로 보면 아래 사진과 같이 나옵니다.

이제 위에 나오는 Project name과 네비게이션에 항목을 변경하겠습니다.

예제에 있는 소스를 보면 아래처럼 나와 있습니다.

<nav class="navbar navbar-default">

        <div class="container-fluid">

          <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

              <span class="sr-only">Toggle navigation</span>

              <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 id="navbar" class="navbar-collapse collapse">

            <ul class="nav navbar-nav">

              <li class="active"><a href="#">Home</a></li>

              <li><a href="#">About</a></li>

              <li><a href="#">Contact</a></li>

              <li class="dropdown">

                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>

                <ul class="dropdown-menu" role="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>

            <ul class="nav navbar-nav navbar-right">

              <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>

              <li><a href="../navbar-static-top/">Static top</a></li>

              <li><a href="../navbar-fixed-top/">Fixed top</a></li>

            </ul>

          </div><!--/.nav-collapse -->

        </div><!--/.container-fluid -->

      </nav>

우선은 해당 소스에서 빨간색으로 나오는 부분을 수정할 예정인데 저는 Dropdown Menu를 사용하지 않을 예정이기 때문에

과감하게 삭제를 해주겠습니다.

페이지 상의 있는 글자를 나에게 맞는 항목으로 변경해 줍니다.

참고하실 만한 사항으로 class="active"로 되어 있는 부분은 선택되어 있다는 것을 표현하기 위해 강조하여 표현이 됩니다.

저는 하나의 항목만 강조가 되어 있으면 되기 때문에 네비게이션에 Default 부분에 들어가 있는 active를 삭제해 줍니다.

그렇게 수정된 항목은 아래와 같습니다.

<nav class="navbar navbar-default" style="margin-bottom:0;">

        <div class="container-fluid">

          <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

              <span class="sr-only">Toggle navigation</span>

              <span class="icon-bar"></span>

              <span class="icon-bar"></span>

              <span class="icon-bar"></span>

            </button>

            <a class="navbar-brand" href="./index.php">공방장인</a>

          </div>

          <div id="navbar" class="navbar-collapse collapse">

            <ul class="nav navbar-nav">

              <li class="active"><a href="#">Home</a></li>

              <li><a href="#">장터</a></li>

              <li><a href="#">의뢰</a></li>

            </ul>

            <ul class="nav navbar-nav navbar-right">

              <li><a href="./">로그인</a></li>

              <li><a href="../navbar-static-top/">회원가입</a></li>

            </ul>

          </div><!--/.nav-collapse -->

        </div><!--/.container-fluid -->

      </nav>

이렇게 내용을 수정하면 아래와 같이 네비게이션이 변경되는 것을 볼 수 있습니다.

소스를 보면 중간에 style="margin-bottom:0;" 라는 소스를 볼 수 있는데요

네비게이션과 아래 내용과의 공간을 없게 만들겠다는 내용으로 아래와 같이 네비게이션과 내용 사이에 공간이 있는 부분을 없애 남는 공간이 없도록 지정한 것입니다.

저는 Jumbotron을 사용하지 않을 것이기 때문에 해당 내용을 지워버리고 이미지를 임시로 넣어 놨습니다.

참고 하세요.

갑자기 만들고 싶은 사이트가 생겨 홈페이지 만드는 블로그도 같이 작성하려고 합니다.

홈페이지를 만들기 위해서 저는 Atom과 Bitnami를 사용할 예정입니다.

(Bitnami는 Apache Server와 Mysql를 편리하게 설치해주는 프로그램입니다.

설치는 http://inboda.tistory.com/14?category=649277 를 참고 해주세요.)

우선 디자인을 잘 못하는 저는 부트스트랩을 사용할 예정입니다.

아래 사이트를 참고하세요.

http://bootstrapk.com/

부트스트랩 사이트에 들어 가시면 아래와 같이 나옵니다.

그러면 시작하기를 눌러주세요.

다운로드 받아서 파일을 넣어 놓을 수도 있지만 저는 CDN를 통해 별도의 다운로드 없이 진행하려고 합니다.

처음에는 속도에 차이가 클 것 같아 다운로드 받아서 사용했지만 CDN을 이용해도 속도의 차이가 느껴지지 않더군요.

혹시나 사이트를 들어가서 복사 붙여넣기가 귀찮으신 분들을 위해서 테스트만 복사한 내용입니다.

<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- 합쳐지고 최소화된 최신 자바스크립트 --> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

해당 내용을 과감하게 Atom을 실행해서 head 부분에 붙여넣기를 해줍니다.

**Bitnami와 Atom의 사용법을 잘 모르시는 분들을 위해 간단하게 설명을 드리면

우선 Bitnami가 설치되어 있는 경로로 들어가 apache2 -> htdocs 안에 폴더를 만들고 Atom에 들어가 htdocs 폴더를 추가해줍니다.

그 후 새로운 폴더를 만들고 해당 폴더에서 우클릭하여 New File로 index 파일을 만들어 줍니다.

저는 index.php 파일로 만들었으며 만들고나서 html을 치고 엔터를 치면 아래와 같이 기본 형태가 만들어 집니다.

다시 부트스트랩 사이트로 돌아가 마음에 드는 아래로 내리다보면 예제들이 있습니다.

예제들을 보고 마음에 드는 예제를 선택합니다.

해당 예제로 들어가 우클릭 후 검사를 눌러 소스를 확인합니다.

그 후 소스를 복사하여 Atom으로 돌아가 body부분에 붙여 넣습니다.

그러면 메인페이지의 기본 형태가 만들어 집니다.

결과를 확인하기 위해서 'localhost:8080/만든폴터' 로 들어가시면 index 파일을 불러와 확인이 가능합니다.

index.php 혹은 index.html 파일이 아니라고 한다면 만든폴더 뒤에 '/파일이름' 까지 넣으셔야 됩니다.

**주의사항은 MAC 사용자들은 localhost 뒤에 :8080을 꼭 넣으셔야 합니다.

혹 8080을 붙였는데 안들어 가시는 분들은 bitnami에서 포트 설정이 어떻게 되어 있는지 확인하시고 해당 포트를 넣으시면 됩니다.

아래 사진을 참고해 주세요.

이상으로 마치겠습니다.