아침 일찍 상사에게 전화를 하여 현재상황에 대해서 설명을 하고 휴가를 받았다. 마음의 정리를 잘하고 복귀하라는 이야기를 마지막으로 통화를 끊었다. 그 후 옷을 챙겨 입고 밖으로 나왔다. 머리가 너무 복잡해 그냥 정처없이 걷고 싶었다. 근처 공원으로 가서 걸었다. 이른 아침이었지만 아침부터 공원을 걷고 있는 사람들이 많이 있었다. 걷는 동안 생각이 정리 하는데 도움이 될 거라고 생각했지만 머리 속은 점점 더 복잡해졌다. 얼마를 걸었을까? 경찰서에서 전화가 왔다.

 

 안녕하십니까? 김상호씨 맞으시죠?”

 , 제가 김상호입니다.”

 잠시 경찰서로 와주셔야겠습니다.”

 무슨 일이시죠?”

 아내 분 부검 동의서를 작성해 주셔야 됩니다.”

 

 부검 동의서를 작성해 달라는 경찰의 말에 잠시 생각에 잠겼다. 아내의 죽음에 대해서 정확히 알기 위해서는 부검을 해야겠지만 죽은 아내의 몸에 칼을 대는게 기분이 좋지 않았다. 하지만 적어도 어떻게 아내가 죽었는지 정확히 알려면 부검을 하겠구나 라는 생각을 하게 되었다.

 

 네 지금 경찰서로 가겠습니다.”

 

 라는 말과 함께 전화를 끊었다. 공원에서 경찰서까지 거리가 멀지 않아 걸어서 경찰서를 갔다. 경찰서 문을 열고 들어가니 곧 낯이 익은 경찰이 다가왔다. 이내 나에게 말을 걸었다.

 

 오시느라 고생 많으셨습니다. 이쪽으로 오시죠.”

 

 나는 조용히 고개를 끄덕이고 경찰의 뒤를 따라 들어갔다. 여기 잠시 앉아서 기다리는 말과 함께 경찰은 나갔다가 종이 몇 장과 펜을 들고 나타났다.

 

 부검 동의서입니다. 하단에 서명해서 주시면 됩니다.”

 

 경찰이 내민 종이를 천천히 읽어 보았다. 이내 경찰을 보고 질문을 했다.

 

 수사는 잘 진행이 되고 계신가요?”

 지금으로서는 뭐라고 말씀을 드릴 말씀이 없네요. 국가수에서도 현장에서 범인의 것으로 추정되는 흔적을 찾지 못했다고 합니다. 수사를 계속 진행하면 뭔가 단서를 찾을 수 있겠죠. 저희 경찰을 믿으시고 조금만 기다려주세요.”

 , 알겠습니다. 혹시 새로운 진행 내용이 있으시면 연락 부탁 드리겠습니다.”

 

 수사를 기다려 달라는 말이 나에게는 별로 기대가 되지 않았지만 서명한 부검동의서를 건내 주고 경찰서를 나왔다. 이내 경찰을 믿고 기다려서는 안될 것 같다는 생각이 들었다. 경찰서를 나와 근처에 있는 PC방으로 갔다. 사설 탐정이라도 알아볼 심상이었다. PC방에서 탐정에 대해서 검색을 했다. 하지만 생각보다 탐정사무소에 대한 정보는 많지 않았다. 그나마 몇개의 탐정사무소은 불륜 전문 탐정이라고 나와 있어 신뢰가 가지 않았다. 역시 살인사건에 대한 탐정의 이야기는 만화가 영화에서만 나오는 이야기였다는 생각이 들었다. 더 검색해봤자 도움이 되지 않을거라 생각이 들어 PC방을 나왔다.

 

 다시 무작정 공원을 걸었다. 걷는 것 말고는 내가 할 수 있는 일이 없었다. 걷는 동안 문득 내가 직접 조사를 해야겠다는 생각이 들었다. 그 후 문구점을 가서 포스트잇과 노트 펜을 가서 경찰이 잡아준 모텔로 들어갔다. 3시 밖에 되지 않았는데도 들어가는 복도에는 신음소리가 들려왔다. 신음소리에 짜증이 났지만 곧 방에 들어가니 신음소리가 들리지 않았다. 방을 들어가자마자 구매한 노트를 펴고 그 날의 일을 생각했다.

 

 나는 아침 7시에 집을 나섰고 오후 7시에 경찰에게서 아내가 죽었다는 연락을 받았다. 그 후 8시쯤 집에 도착을 하였고 그 때 경찰들은 집을 수사하고 있었다. 아내는 독극물로 죽었으며 신고는 옆집 청년에 의해서 되었다. 현재 내가 알고 있는 내용은 이게 전부였다. 이래서는 범인을 찾을 수 없겠다는 생각이 들었다. 우선 의심이 가는 사람을 용의자를 생각해보았다. 아무래도 처음 신고를 한 그 청년이 가장 유력한 용의자가 아닐까? 라는 생각이 들었다.


'글쓰기 > LIE' 카테고리의 다른 글

[LIE]1화 아내의 죽음  (0) 2016.08.27

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

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

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


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

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


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


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

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


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

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


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


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

이상입니다.^^

'Mac으로 개발하기 > 홈페이지 만들기' 카테고리의 다른 글

Home화면 구성하기  (0) 2018.05.23
네비게이션바 수정하기  (0) 2018.04.29
홈페이지 만들기 시작  (0) 2018.04.28

5월 31일부로 기존 SKT에서 제공하는 T라이프 앱 서비스가 종료 되었습니다.

저는 T라이프에서 제공하는 서비스 중 e-Book 서비스를 가장 메리트를 느꼈는데요

5월 31일까지 원스토어북스에서 T라이프 회원인증을 받은 분들에게는 6월 1일부터 새로운 콘텐츠관을 제공 합니다.


저도 오늘 원스토어북스를 사용해보면서 어떻게 사용하는지 잠깐 헤맸는데요.

다름이 아닌 e-book을 어떻게 받는지에 대해서 한참 헤맸네요.^^ 

기존에 앱이나 다른 앱과는 다르게 원스토어북스 사이트를 통해서 다운을 받는 형식입니다.

그 점이 약간 아쉽게 느껴졌지만 공짜로 책을 볼 수 있으니 참고 봐야겠죠.^^


사용법을 안내 드리자면 하기 사이트를 통해서 보고 싶은 책을 다운로드 받아서 사용하시면 됩니다.

m.onestorebooks.co.kr

(모바일만 지원하는 것으로 보입니다. 웹으로 접속하니 책 리스트가 나오질 않네요.)


아래 스크린샷을 보시면 사용하시는 방법에 대해서 잘 이해 하실 수 있을 실 겁니다.


우선 핸드폰으로 해당 사이트에 접속하면 책이 나옵니다.

홈화면에 나오는 책은 유료로 제공하는 것 같습니다.

왼쪽 위에 세줄이 그어져 있는 버튼을 눌러주면 메뉴가 나옵니다.



메뉴를 보시면 이용권이라는 항목이 나옵니다.

옆에 친절하게 무료혜택이라고도 나오네요.

사뿐히 터치해 줍니다.




이용중으로 나오는 항목은 이북, 매거진 패스 이용권과 만화, 웹툰 패스 이용권이 이용중으로 나오네요.^^

저는 이북을 이용하기 위해서 들어 왔으니 이북, 매거진 패스 이용권에서 상품보기를 눌러줍니다.



그러면 제공하고 있는 이북이 나옵니다.

읽고 싶은 책을 터치해 주시면 다음으로 넘어갑니다.



바로보기를 눌러 주시면 사전에 받아 놓은 원스토어북스 앱으로 이동하면서 서재에 책을 다운로드 하는 것을 볼 수 있습니다.



이상 글을 마치겠습니다.^^


구글의 애드센스를 달아보려고 노력하였으나 컨텐츠 부족으로 달수가 없어서

검색 중 우연히 찾게된 AdFit의 설정 방법에 대해서 설명 드리려고 합니다.


다음에서 제공하는 애드핏(AdFit)은 구글의 애드센스보다 인증이 간편한 것으로 보입니다.

구글 애드센스에서 컨텐츠 부족으로 광고를 달수 없었던 제 블로그에 승인이 떨어진 것으로 보면 왠만하면 달 수 있지 않을까? 라는 생각이 듭니다.


애드핏은 다음에서 제공하는 서비스인 만큼 원화로 계산이 되고

100달러가 되어야 출금이 가능한 애드센스와 비교하면 5만원이면 출금이 가능하다는 장점을 가지고 있습니다.


그러면 AdFit 설정 장법에 대해서 알아보겠습니다.


우선 다음 애드핏에 접속합니다.

하기 URL을 참고 하세요.


http://adfitinfo.biz.daum.net/


사이트에 접속하여 사업자 계정을 생성하고 접속을 하면 아래와 같은 화면이 나오실 겁니다.

저는 아직 접속자 수도 없고 어제 처음 달아서 12원 밖에 적립금이 없네요.^^


그 후 광고관리를 눌러보시면 매체를 등록하실 수 있습니다.


저는 이미 등록해서 가상의 주소로 입력을 해보겠습니다.

매체명에 내용을 넣고 매체유형 선택 후 운영 중인 블로그 주소를 넣어주시면 됩니다.

그 후 광고 단위 등록을 하실 수 있습니다.

그 후 사용하실 광고 사이즈를 선택 후 완료 버튼을 눌러주시면 광고가 만들어집니다.


그 후 스크립트가 나오는데 해당 스크립트를 복사 하신 후 사이트에 넣어 주시면 됩니다.


티스토리에서는 다음 AdFit 모바일 버전이 있습니다.

해당 플러그인을 사용하시면 모바일에서만 지원합니다. 참고 부탁 드립니다.


플러그인을 추가하여 광고위치를 선택 후 아래에 복사한 스크립트를 붙여 넣으시면 모바일 환경에서는 완료가 됩니다.


저는 컴퓨터에서도 광고가 보이게 하기 위해서

PC / 모바일용 광고를 추가하여 왼쪽 사이드바에 추가 하였습니다.

동일하게 생성 후 스크립트를 복사 후 스킨 편집에 html편집을 눌러서 html 소스를 확인 합니다.

저와 같이 사이드바에 달기 위해서는 div id 값이 sidebar로 되어 있는 html 소스를 찾아 붙여 넣기를 해줍니다.





그렇게 하시면 설정이 완료 됩니다.

인증은 하루정도 소요가 되며 구글의 애드센스를 기다릴 필요가 없어 아쉬운데로 사용하시면 될 것 같습니다.

궁금한신 점이 있으시면 글을 남겨주시면 제가 아는 한도내에서 최대한 설명 드리도록 하겠습니다.

'IT' 카테고리의 다른 글

2019년 디지털포렌식 전문가 자격증 시험 일정  (0) 2019.02.15
애드센스 신청 불허가  (0) 2018.03.09
티스토리 애드센스 달기 1단계  (0) 2018.03.08

이번에는 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와 연동하여 반복문으로 만들어 줄 것이기 때문에 많이 만들어 놓으실 필요는 없습니다.

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

'Mac으로 개발하기 > 홈페이지 만들기' 카테고리의 다른 글

홈화면 따로 빼기  (0) 2018.06.03
네비게이션바 수정하기  (0) 2018.04.29
홈페이지 만들기 시작  (0) 2018.04.28

수원 연극정보 공유 드립니다.

아래 포스터와 같이 6월 1일부터 6월 3일까지 위 아래 공연이 진행됩니다.

입장료도 단돈 만원 밖에 하지 않는 저렴한 공연이니 시간 되시면 많이들 보러 가시면 좋을 것 같습니다.





'극단칠보' 카테고리의 다른 글

수원연극축제 극단칠보 위아래 공연 리허설  (0) 2018.03.08
극단칠보 회원모집  (0) 2016.08.27

오늘은 입벌림방지밴드에 대해서 리뷰를 하려고 합니다.

저는 잠을 잘 때 입을 벌리고 자기 때문에 우연히 페이스북에서 본 입벌림방지밴드 광고에 혹해 구매하러 들어갔지만

페이스북에서 광고하는 제품은 금액이 너무 높은 것 같아 찾아보다가

교보문고에서 판매하는 입벌림방지밴드를 보고 구매를 하였습니다.



만원도 되지 않는 제품이라 큰 퀄리티를 기대하지 않았지만

실제로 받아보니 비닐안에 제품과 간단 설명서면 들어 있더군요

겉포장에 크게 신경 쓰지 않기 때문에 밴드를 착용하고 잠을 자기 시작했습니다.


처음 사용할 때는 입이 벌어지지 않게 잘 잡아주었고 얼굴에 베기지도 않아 좋게 사용하였습니다.

다만 귀가 위치가 맞지 않아 귀가 살짝 눌리는 느낌을 받았지만 잠을 못 잘 정도로 눌리지는 않았습니다.


하지만 2주 쯤 사용할 때부터 문제가 발생했습니다.

싸구려 제품을 구매해서 그런지 입이 벌어지지 않게 잡아주던 탄력이 약해지고

자면서 입이 벌려지는게 느껴지기 시작하였습니다.

제가 얼굴이 커서 그런지? 아니면 내구성이 좋지 않은지 잡아주는 느낌이 현저히 떨어지는게 느껴졌습니다.

그런 이유로 저는 해당 제품을 추천 드리지는 않습니다.


비싼 제품은 사용하지 않아 어떤지 모르지만

입을 벌리고 자지 않으면 아침이 개운해진다는 광고처럼 아침이 개운하지는 않았습니다.

그래서 비싼 제품으로 다시 구매할 생각도 없네요.

이상 리뷰를 마치겠습니다.


아래 사진은 제가 구매한 제품 사진입니다.



이번에 본 책은 정태섭 교수의 '하루를 살아도 후회 없이 살고 싶다' 라는 책을 보았습니다.

이 책도 T라이프 앱에서 제공하는 무료 도서로 책 제목에서 한번 읽어보고 싶다고 생각이 들었습니다.


책 내용 중 인생에는 여섯 발의 총알이 있다 라는 부분이 인상이 깊었습니다.

80년 인생을 하루 24시간으로 계산하면 스물살은 오전 6시 서른살은 오전 9시라는 이야기와

9시는 늦은 시간이 아니라는 내용에서 마음의 위로를 받았고

20살부터 80살까지 여섯 발의 10년에 한번씩 총알이 있다는 내용이 인상 깊었습니다.


책의 저자인 정태섭 교수는 의사이면서 엑스레이 아티스트로 살고 있으며

늦은 나이에 새로운 분야에 뛰어들 수 있는 용기를 보며 본 받아야겠다는 생각을 하게 되었습니다.


저도 영업을 하다 엔지니어로 이직을 하기전에

많은 고민과 걱정이 있었고 

아직도 엔지니어로서의 지식이 부족하여 걱정하고 있던 찰라에 이 책은 마음의 걱정을 덜어주는 책이였습니다.

혹시 현재 하고 있는 공부나 일이 자신의 적성과 맞지 않다고 생각하신다면 한번 읽어보는 것을 추천 드리고 싶습니다.


'최근 본 책' 카테고리의 다른 글

As the crow files 소설 영국인 제프리 아처  (0) 2018.06.28
매일 아침 써봤니? 책을 읽고  (0) 2018.04.28

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

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

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



이제 위에 나오는 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을 사용하지 않을 것이기 때문에 해당 내용을 지워버리고 이미지를 임시로 넣어 놨습니다.

참고 하세요.

'Mac으로 개발하기 > 홈페이지 만들기' 카테고리의 다른 글

홈화면 따로 빼기  (0) 2018.06.03
Home화면 구성하기  (0) 2018.05.23
홈페이지 만들기 시작  (0) 2018.04.28

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


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

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

  

이상으로 마치겠습니다.

'Mac으로 개발하기 > 홈페이지 만들기' 카테고리의 다른 글

홈화면 따로 빼기  (0) 2018.06.03
Home화면 구성하기  (0) 2018.05.23
네비게이션바 수정하기  (0) 2018.04.29

+ Recent posts