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 소스를 찾아 붙여 넣기를 해줍니다.

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

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

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

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

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