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

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에서 포트 설정이 어떻게 되어 있는지 확인하시고 해당 포트를 넣으시면 됩니다.

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

이상으로 마치겠습니다.

제가 공부하고 있는 c언어 내용에 대한 정리 내용입니다.

은근히 사용하게 되는 escape 문자에 대한 내용입니다.

이번에는 맥에서 안드로이드 스튜디오 설치하는 방법을 안내 드립니다.

우선 하기 사이트에 접속하셔서 설치파일을 다운로드 합니다.

https://developer.android.com/studio/index.html

다운로드가 완료 되시면 dmg 파일을 더블클릭하셔 실행 하시면 설치화면이 나옵니다.

그 후 하기 그림에서와 같이 어플리케이션 폴더로 이동 시켜줍니다.

그 후에 응용 프로그램에 들어가시면 하기와 같이 Android Studio가 옴겨져 있는 것을 확인 하실 수 있습니다.

Android Studio를 더블 클릭해서 실행시킵니다.

인터넷으로 받은 파일이라고 나오면 열기를 눌러 실행해주시면

아래와 같이 나옵니다.

그럼 그냥 OK 버튼을 눌러주시면 됩니다.

그 후 별도의 세팅을 하시지 않을 실 경우 Next만 계속 누르시다가 Finish를 누르시면 설치가 진행됩니다.

저의 경우 어두운 화면을 좋아하기 때문에 기본값이 아닌 어두운 화면으로 선택을 하였습니다.^^

설치가 완료되면 보게 되는 처음 화면입니다.

기존에 저장해놓은 프로젝트가 없기 때문에 제일 첫번째에 있는 항목을 클릭해 줍니다.

다음 페이지로 이동하게 되면

이름 설정 등의 필요한 설정을 해주고 Next 버튼을 누릅니다.

그 후 개발하고자 하는 기기를 선택하고 버전을 선택해 줍니다.

그 후 사용하고자 하는 처음 화면을 설정해주고 Next

이름 설정 해주고 Next

이 후 Finish를 클릭하시면 됩니다.

아래의 화면이 나오면 개발을 시작하시면 됩니다.^^

이상으로 마치도록 하겠습니다.^^

C언어 관련 서적들을 보면 MAC에 대해서 설명이 자세히 나와 있는 책은 거의 없는 것 같습니다.

그래서 Mac에서 C언어를 공부하기 위한 방법에 대해서 안내 드립니다.

우선 Xcode를 설치합니다.

설치는 AppStore에서 다운로드 받으시면 됩니다.

저는 미리 받아놨기 때문에 열기로 나오네요.^^

그 후 응용 프로그램에 가서 Xcode를 실행합니다.

실행을 하시면 아래 같은 화면이 나옵니다.

그 후 하기 빨간색으로 둘러싸인 항목을 클릭합니다.

다음 화면이 나오면 Command Line Tool를 누룹니다.

아래의 입력 창을 모두 입력하시면 Next 버튼이 활성화 되어 누르실 수 있습니다.

Language를 C로 바꾸시는 것을 까먹으시면 안되요.^^

그렇다면 다음과 같이 화면이 나오고 저장 위치를 선택 후 create 를 누르시면 됩니다.

처음 생선된 화면으로 main.c를 눌르셔서 코딩하시면 됩니다.^^

이상으로 Xcode에서 C언어 개발하기 위한 환경 준비를 마치겠습니다.

MAC에서 MAMP 설치 관련 내용 안내 드립니다.

우선 설치파일을 다운로드 해보겠습니다.

하기 사이트에 접속하셔서 설치파일을 다운로드 하시면 됩니다.

https://www.mamp.info/en/

다운로드 버튼 클릭 후 다음페이지에서도 다운로드 클릭!!

일반버전과 프로버전의 차이는 하단 사이트에서 확인 부탁 드립니다.

https://www.mamp.info/en/mamp-pro/

개인적으로는 모바일 테스팅 기능이 있는게 프로를 사용하는 것도 좋아 보이네요.^^

가격 정보는 하기 스크린샷을 참고해주세요.

다운로드가 다 되시면 설치파일을 더불 클릭합니다.

그 후 계속만 누르다가 설치를 누르시면 됩니다.

설치가 다 되시면 응용프로그램 안에서 확인이 됩니다.

mampstack으로 따로 있는 것은 구버전 mamp로 이번 버전 설치전에 사용 했었습니다.

MAMP와 MAMP PRO가 설치가 되어 있네요.

저는 프로버전을 사용하진 않을 것이기 때문에 MAMP 폴더 안으로 들어가면 MAMP를 클릭하여 서버를 시작할 수 있습니다.

그 후 Start Servers를 클릭하시면 서버가 시작이 되니 참고 하시면 되고

htdocs 폴더 안에 웹프로그래밍 소스를 올리시면 됩니다.

저는 간단하게 하기의 소스로 서버에 확인을 해봤습니다.

저는 구버전이 포트를 8080을 잡고 있어서 그런지 포트가 8888로 되어 있네요.

phpMyAdmin을 사용하실 분은 하기 스크린샷에 있는 링크를 타고 가시면 편하게 들어가실 수 있습니다.

이상 글을 마칩니다.^^

이번에는 이클립스를 설치해 보도록 하겠습니다.

이클립스를 설치하기 전에 JDK를 설치해야 합니다.

(JDK는 다운로드 후 그냥 설치하면 되기 때문에 생략하겠습니다.)

우선 다운로드 받으신 설치파일을 더블클릭 합니다.

그러면 하기와 같이 나오는데 2번째 항목인 Eclipse IDE for Java EE Developers를 선택합니다.

그 후 설치할 경로를 선택하시고 인스톨하시면 됩니다.

하기 사진처럼 나오시면 정상적으로 설치가 된 것입니다.

그 후 상단에 Eclipse를 클릭하여 환경설정을 클릭하여 하기 화면을 띄웁니다.

Add를 클릭하신 후 사용하실 서버를 추가하시면 됩니다.

이상으로 이클립스 설치를 마치겠습니다.

Tomcat 실행방법에 대해서 알아보겠습니다.

우선 Tomcat을 다운로드 합니다.

(해당 내용 참고 부탁 드립니다.  http://inboda.tistory.com/5)

다운로드 받은 파일을 압축을 풀어줍니다.

그후 터미널을 실행합니다.

(finder 안에 응용프로그램 -> 유틸리티에 들어가시면 터미널이 있습니다.)

압축을 푼 폴더 안에 bin폴더 안 Startup.sh 를 터미널로 드레그 합니다.

위에 사진처럼 나오시면 정상적으로 Tomcat이 실행된 것입니다.

Tomcat을 끄실 때는 shutdown.sh파일을 드래그 후 엔터를 치시면 됩니다.