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

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

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

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

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

이상으로 마치겠습니다.

해당 내용은 저의 개인적인 생각으로 재미로 봐주시면 좋겠습니다.

4차 산업혁명에 따른 인류는 어떻게 될 것 인가에 생각을 해보았다.

우선 4차 산업혁명을 무엇인가?

뭐 대략적으로 로봇, AI, IOT, 자율주행차, 드론, 3D 프린터, 빅데이터 등등 많은 내용이 이야기 된다.

4차 산업혁명이 인류에게 끼칠 영향은 무엇일까?

많은 일들이 로봇과 AI가 할 것이며, 인간들은 직업이 많이 사라질 것이라고 하는 전문가들이 많다고 한다.

그렇다면 인간들은 무엇을 하면서 돈을 벌 것인가? 에 대한 생각이 들기 시작했다.

물론 로봇과 AI가 대처하지 못할 일도 있을 것이다.

하지만 AI가 작곡도 하고 소설도 쓰고 그림도 그리고 있다는 내용을 봤을 때

점점 인간이 설 자리를 잃을 것이라고 생각이 들었다.

그렇다면 인류는 어떻게 될 것인가?

자본주의에서는 자본 즉 돈이 중요한 개념이라고 생각한다.

제품이나 서비스를 생산하여 수요와 공급의 원칙에 따라 자본주의가 돌아가며

노동자들은 자신의 시간과 생산력을 제공하여 돈을 벌고

그 돈으로 소비를 하면서 자본주의가 돌아가고 있다고 생각한다.

하지만 그 시간과 생산력을 로봇과 AI가 대체한다면 인간의 노동력은 더이상 필요가 없어 질 것이다.

그렇다면 소비를 해야 하는 사람들이 돈을 벌 수 없을 것이고

돈이 없으니  소비를 하지 못할 것이고 수요가 없으니 공급 또한 필요가 없을 것이다.

그렇다면 자본주의 체제는 무너질 것이라고 본다.

뭐 체제는 중요한 것이 아니라고 생각하니 앞으로 어떻게 바뀔 것인가?

다양한 전문가들의 의견이 있으나 내 생각과 가장 비슷했던 내용은

로봇세를 걷고 그 세금을 인간들에게 나누어줘 소비를 시키는 방법이 경제를 유지하고 사회를 유지 할 수 있는 방법이라고 생각한다.

그렇게 인간들이 일을 하지 않으면서 소비를 할 수 있는 방법을 만들어 낼 수 있을 것이다.

더 이상 일을 할 필요가 없는 인간들은 무엇을 할 것인가?

작년에 스타트업캠퍼스에서 들었던 인문학 강의가 떠올랐다. 진중권 교수의 강의 내용으로 강의 내용을 요약하면

'인간은 유희를 하는 동물이다.' 라는 내용으로 더 많은 내용이 있었지만 나는 그렇게 한 줄 요약을 했다.

그 강의를 듣고 많은 생각을 하게 되었으나 강의에 대한 자세한 내용은 현재 그건 중요한 내용이 아니니 앞으로 인간들은 무엇을 할 것인가?에 대해서 생각해보면

더 이상 일을 할 필요가 없는 인간들은 유희에 시간을 보내 것이라고 생각한다.

그래서 취미 산업이 크게 커질 것이라고 생각이 들고 인간들은 그 취미 서비스를 이용하며 살지 않을까? 라는 생각을 해본다.

로봇세를 걷어 사람들에게 나눠주고 소비를 만들어 지지 않는다면 어떻게 될 것인가?

로봇세를 걷어 사람들에게 나눠주는 것이 되지 않는다면서 로봇을 가지고 있는 사람들과 로봇을 가지고 있지 않은 사람들 사이에

부의 차이가 더 크게 날 것이며 인간은 로봇을 통해 수익을 얻을 것이고 로봇이 없는 사람들은 사회에 적응하기 어렵지 않을까 생각이 든다.