안녕하세요!~

정말 오랜만에 이렇게 블로깅을 합니다.

요즘 마음의 여유가 없어서 그런지 블로그를 해야겠다는 마음먹기가 참 쉽지 않습니다.

하지만 그래도 좋은 정보를 제공해야겠다는 마음은 항상 변치 않습니다.

그래서 이렇게 애드센스 첫 수익에 대해서 블로깅을 합니다.

 

사실 블로그를 만든건 아주 오래전이지만 정식적으로 시작한것은 작년 5월쯤 되는것 같습니다.

전 블로그 비교를 위해 두 개의 블로그를 똑같이 운영중입니다. 하나는 네이버 블로그이며, 하나는 티스토리 블로그 입니다. 두 개의 블로그는 서로간의 장.단점이 확실히 있습니다. 두 블로그의 차이점에 대해선 추후 충분한 시간을 가지고 블로깅을 하겠습니다. ㅎㅎ;;

 

어쨋든 오늘 중요한 것은 티스토리의 블로그를 운영하면서 처음으로 $100를 넘어 첫 수익을 지급 받았다는 점입니다. 어떤들은 불과 2~3개월에도 $100를 금방 훌쩍 넘는 블로거도 많은것으로 알고 있지만 저는 상당히 오래 걸렸네요 ㅋ;

 

아래는 구글애드센스 지급관련 이미지 입니다.

1월31일까지의 광고 수익이 총 $108.41 입니다.

지급 기준은 해당하는 달에 $100이상이 되어야 다음달 말일에 수익금이 지급됩니다. 블로그를 하면서 누군가에게 도움을 준다는 뿌듯한 점이 제일 마음에 들지만 또 다른 즐거움은 이것입니다. 비록 많지는 않지만 블로그를 방문해주시는 방문자들께서 광고를 클릭하면 이렇게 수익이 들어오게 되죠.

 

그리고 아래 이미지는 구글에서 지급된 금액입니다. 잘 보시면 알겠지만 수수료 만원 ㅜㅜ

10만원 벌었는데 1만원을 수수료로 떼어가네요... 이런...

 

사실 예전의 애드센스 지급방식은 블로거들이 보통 직접 은행에 가서 찾는 웨스턴유니언 방식을 했다고 들었습니다. 그래서 저도 1월중순까지 웨스턴유니언 방식을 해놓고 언제나 수익금이 쌓이려나 지켜보고 있는중 구글에서 직접 계좌로 송금을 해주는 지급방식이 새로 생겼다고 이메일이 계속 오더군요. 그래서 은행에 가기도 귀찮기도 하고 일하다가 중간에 자리비우고 은행에 가기도 조금 그래서 계좌로 쏴준다면 편하겠다 싶었습니다. 그리고 바로 지급방식을 계좌로 직접 송금 시켜주는 방식으로 바꾸었습니다.

그리고 2월25일 구글에서 이메일이 하나 날아왔습니다. 귀하의 수익금이 지급되었습니다.

우리나라와 미국과의 시차가 있으니 뭐 대충 하루정도 더 걸리겠구나 생각하고 있었습니다. 그리고 오후 4시28분 아래 이미지처럼 구글아시아PA 에서 대략 10만9천원이 입금되었다는 메시지가 날아오더군요. 그러더니 10초도 안되어 출금수수료 1만원을 떼어가더군요. 해외송금 수수료가 원래 약10% 가 넘는지 궁금하네요.. 정말 힘들게 지급받은 금액인데 만원이나 떼어가다니 ㅡㅡ;;

 

뭐 그래도 9만9천원은 남아있으니 가족들과 외식할 금액은 충분히 되겠다 싶더라구요 ㅎㅎ

수수료 정보를 찾아보니 우체국은 5,000원 이고 그외 은행은 1만원 입니다. 만약 우체국에 계좌가 있다면 우체국 계좌로 변경해야 5000원이 더 들어오겠죠.

 

그래도 은행을 안가고 금액을 알아서 통장으로 송금하니 편하긴 합니다.

 

오랜만에 블로깅을 해서 감이 많이 떨어졌습니다. 글이 우왕자왕,중구난방이어도 양해바랍니다 ^^;;

즐거운 휴일 보내시기바랍니다.

 

Posted by 진격의 파파

댓글을 달아 주세요

  1. 욱아~~~ 2014.03.20 17:04 신고  댓글주소  수정/삭제  댓글쓰기

    축하드립니다.

 

 

안녕하세요!! 

또 오랜만에 jQuery Mobile 관련 내용을 올립니다. 요즘 이직한 새로운 직장에서 일배우느라 정신이 정말 없습니다. 지금도 공부를 해야하는데도 불구하고 이렇게 블로그를 씁니다. 6개월 넘게 블로그를 쓰다보니 정말 애착이 갑니다. 또 많은 분들이 질문도 주시고 답변하면서 보람도 느낍니다.

 

어쨋든 오늘 포스팅할 내용은 jQuery Mobile List 입니다. jQuery Mobile 을 사용하여 리스트 화면을 만들어보겠습니다.

jQuery Mobile 리스트를 만들경우 <OL> 또는 <UL>을 사용하여 나타냅니다. 그리고 <LI>를 사용하여 리스트들을 만들면 됩니다.

즉, 아래 소스와 같이 만들어지게 됩니다.

<ol data-role="listview">
  <li><a href="#">OL 리스트</a></li>
</ol>

<ul data-role="listview">
  <li><a href="#">UL 리스트 </a></li>
</ul>

 

리스트 화면을 직접 만들어보겠습니다.

 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="content">
    <h2>OL 리스트</h2>
    <ol data-role="listview">
      <li><a href="#">OL 리스트1</a></li>
      <li><a href="#">OL 리스트2</a></li>
      <li><a href="#">OL 리스트3</a></li>
    </ol>
    <h2>UL 리스트</h2>
    <ul data-role="listview">
      <li><a href="#">UL 리스트1</a></li>
      <li><a href="#">UL 리스트2</a></li>
      <li><a href="#">UL 리스트3</a></li>
    </ul>
  </div>
</div>

</body>
</html>

// 위 내용을 테스트 해보시면 리스트 화면이 만들어진 것을 확인할 수 있습니다.

 

위 내용을 토대로 나오는 화면 이미지 입니다.

 

 

그리고 약간의 소스만 변경해도 더욱더 깔끔한 리스트 화면을 만들수 있습니다.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
  <div data-role="content">
    <h2>직업의 종류</h2>
    <ul data-role="listview">
      <li data-role="list-divider">기술직</li>
      <li><a href="#">프로그래머</a></li>
      <li><a href="#">IT 컨설팅</a></li>
      <li data-role="list-divider">영업직</li>
      <li><a href="#">보험영업</a></li>
      <li><a href="#">자동차영업</a></li>
      <li data-role="list-divider">생산직</li>
      <li><a href="#">OO공장</a></li>
      <li><a href="#">XX공장</a></li>
    </ul>
  </div>
</div>
</body>
</html>

// 위의 소스를  html 화일로 저장 후 익스플로러, 크롬등의 웹브라우저로 열어보시면 아래와 같은 깔끔한 목록화면이 나오게 됩니다.

 

만약 DB와 연결되면 더 엔터프라이즈한 화면이 구성될듯합니다. 여러분들도 직접 테스트 해보시고 응용해보시기 바랍니다. 멋진 화면을 만들어 보세요!!~

 

새로운 내일을 위해 오늘은 여기까지 포스팅 하겠습니다. 그럼 오늘 하루도 고생 많으셨고 남은시간 푹 주무시기 바랍니다. 그리고 마지막으로 즐거운 프로그래밍 되세요~

 

'jQuery Mobile > JM Lists' 카테고리의 다른 글

jQuery Mobile 리스트 두 번째  (2) 2013.11.28
jQuery Mobile 리스트(List Views)  (0) 2013.11.26
Posted by 진격의 파파

댓글을 달아 주세요

 

 

안녕하세요!! 

요즘 8년 다닌 직장을 그만두고 새로운 직장에 취업해서 서울 본사에서 일 배우느라 정신없어서 포스팅을 이제야 씁니다. 주말 빼고 하루에 하나씩 계속 쓰는게 목표인데 이게 정말 쉽지 않은것 같습니다. ^^;

그래도 오늘 힘내서 jQuery Mobile 접고 펴는 기능(Collapsible)에 대해서 한번 알아보겠습니다.

접고 펴는 기능은 버튼을 클릭하면 열렸다가 다시 버튼을 클릭하면 닫히는 기능을 말합니다.

 

<div data-role="collapsible">
  <h1>이곳을 클릭하세요!!</h1>
  <p>내용을 입력하세요...</p>
</div>
기본 소스는 위와 같습니다. 위 구문에서 중요한것은 collapsible 입니다.

<h1>버튼</h1> 안의 내용은 자동적으로 버튼이 되고 <p>내용</p> 은 내용을 넣으시면 됩니다.

 

일단 소스를 보면서 다시 설명드리겠습니다.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Collapsible 접고 펴기</h1>
  </div>

  <div data-role="content">
    <div data-role="collapsible">
      <h1>이곳을 클릭하세요</h1>
      <p>내용을 입력하세요.</p>
    </div>
  </div>

  <div data-role="footer">
    <h1>Copyright by makand123. All Rights Reserved</h1>
  </div>
</div>

</body>
</html>
// collapsible 을 data-role 에 적고 <h1>버튼</h1> 이곳이 버튼이 됩니다. 그리고 그 아래 <p>내용</p> 내용을 입력하면 됩니다.

위 구문을 실행하면 아래와 같이 나오게 됩니다.

 

 버튼을 클릭하기전 화면!

버튼을 클릭했을때 화면!

 

그리고 처음부터 열려있는 화면을 만드려면 <div data-role="collapsible" data-collapsed="false"> 을 사용하면 됩니다.

 

그리고 또 두 개이상의 중첩된 기능을 만드려면

<div data-role="collapsible">
  <h1>첫 번째 클릭</h1>
  <p>내용을 입력하세요.</p>
  <div data-role="collapsible">
    <h1>두 번째 클릭</h1>
    <p>내용을 입력하세요!!!.</p>
  </div>
</div>

// 위의 내용을 첫 번째 소스에 적용하면 아래와 같이 나옵니다.

 

 처음 실행화면!

 

 첫 번째 버튼을 클릭했을때!

 

두 번째 버튼을 클릭했을때!!

 

그리고 마지막으로 Collapsible Set 이 있습니다. 말 그대로 세트 기능입니다.

collapsible-set 기능을 잘 살펴보시기 바랍니다.  

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>첫 번째 SET!</h1>
    <p>첫 번째 나오는 내용.</p>
  </div>
  <div data-role="collapsible">
    <h1>두 번째 SET!</h1>
    <p>두 번째 나오는 내용.</p>
  </div>

  <div data-role="collapsible">
    <h1>세 번째 SET!</h1>
    <p>세 번째 나오는 내용.</p>
  </div>
</div>

 

첫 번째 버튼을 클릭했을때!!

 

두 번째 버튼을 클릭했을때!!

 

세 번째 버튼을 클릭했을때!!!

 

소스를 적용하면 위 그림 처럼 나오게 됩니다. 클릭한 버튼의 내용이 나오게 되고 다른 버튼들은 닫히게 됩니다.

 

직접 테스트 해보면서 응용하여 소스를 만들어보시기 바랍니다.

오늘은 이것으로 포스팅을 마치겠습니다.

남은 시간 즐겁게 보내시고 즐거운 프로그래밍 되시기 바랍니다. 

 

'jQuery Mobile > JM Tutorial' 카테고리의 다른 글

jQuery Mobile Collapsible(접고 펴는 기능)  (0) 2013.11.20
jQuery Mobile 네비게이션 바(Navigation Bars)  (0) 2013.11.15
jQuery Mobile 툴바(Toolbars)  (0) 2013.11.13
jQuery Mobile 툴바(toolbars)  (0) 2013.11.11
jQuery Mobile 버튼  (0) 2013.10.31
jQuery Mobile 페이지2  (2) 2013.10.28
Posted by 진격의 파파

댓글을 달아 주세요

 

 

안녕하세요!!

이번에 포스팅할 jQuery Mobile 는 네비게이션 바(Navigation Bars) 입니다.

 

일반적으로 한 페이지의 구성은 상단, 내용, 하단 이렇게 3개의 단위로 나뉘어 지는데 네비게이션 바의 역할은 그 중간에 버튼등을 삽입하여 다른 페이지로 이동을 하는 기능을 합니다.

jQuery Mobile 은 최대한 부하를 줄이고 빠른 페이지 로딩을 추구하기 때문에 네비게이션 바 소스역시 매우 단순합니다. 일단 백번의 설명보다는 한번 소스를 보는게 낫겠지요.

기본적인 소스 구성은 아래와 같습니다.

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#link">홈</a></li>
      <li><a href="#link">1 페이지</a></li>
      <li><a href="#link">2 페이지</a></li>
    </ul>
  </div>
</div>
// data-role에서 navbar을 정의 하고 <ul>...</ul> 으로 메뉴를 설정합니다. 정말 깔끔하고 단순합니다.

 

그럼 이제부터 위의 내용이 적용된 소스를 만들어보겠습니다.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>나의 모바일 홈페이지</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#" data-icon="home">홈</a></li>
        <li><a href="#" data-icon="arrow-r">1 페이지</a></li>
        <li><a href="#" data-icon="arrow-l">2 페이지</a></li>
      </ul>
    </div>

  </div>

  <div data-role="content">
    <p>이곳에 내용을 입력하세요...</p>
  </div>

  <div data-role="footer">
    <h1>Copyright by makand123. All Rights Reserved</h1>
  </div>
</div>

</body>
</html>

// 위 소스의 내용을 보면 <div data-role="navbar"> 을 입력하고 그 안에 3개의 버튼을 넣은것을 확인 할 수 있습니다. 위 소스를 실행하면 아래와 같은 화면이 나오게 됩니다. 그리고 네비게이션 메뉴의 갯수에 따라서 버튼의 크기는 자동조절 됩니다. 예를들어서 2개의 버튼이 있을경우 50% 씩 자동으로 공간을 만들며, 위와같이 3개의 버튼이 있을경우 33.3%의 넓이를 가지며, 4개 일경우 어떻게 구성될지 이미 짐작하시겠지만 25%씩 공간을 차지하게 됩니다.

 

 

 

그리고 네비게이션 바를 만들면서 한가지 팁이 있는데 버튼을 클릭했을때 해당 버튼의 활성화를 위해 사용하는 기능이 있습니다. 버튼 활성화란 그 버튼을 클릭하면 색상을 다르게 표현하여 현재 그 위치에 페이지가 있다는것을 알려주는 기능입니다.

<li><a href="#anylink" class="ui-btn-active ui-state-persist">Home</a></li>

위 소스와 같이 class 값에 ui-btn-active ui-state-persist 라는 값을 주게 되면 해당 버튼을 클릭했을때 색상이 자동으로 바뀌게 됩니다.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
   <h1>나의 모바일 홈페이지</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#" class="ui-btn-active ui-state-persist" data-icon="home">홈</a></li>
        <li><a href="#pagetwo" data-icon="arrow-r">2 페이지</a></li>
      </ul>
    </div>
  </div>

  <div data-role="content">
    <p>네비게이션 색상을 살펴보세요!!</p>
  </div>

  <div data-role="footer">
    <h1>Copyright by makand123. All Rights Reserved</h1>
  </div>
</div>

<div data-role="page" id="pagetwo">
   <div data-role="header">
   <h1>나의 모바일 홈페이지</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#pageone" data-icon="home">홈</a></li>
        <li><a href="#" class="ui-btn-active ui-state-persist" data-icon="arrow-r">2 페이지</a></li>
      </ul>
    </div>
  </div>

  <div data-role="content">
    <p>jQuery Mobile 재미 있나요?</p>
  </div>

  <div data-role="footer">
    <h1>Copyright by makand123. All Rights Reserved</h1>
  </div>
</div>

</body>
</html>

// 붉은색 소스를 보면 class 값에 ui-btn-active ui-state-persist 이렇게 값이 들어가 있는것을 확인 할 수 있습니다. 그리고 아래 이미지는 위의 소스를 실행시킨 모습입니다.

 

       

 

 

이미지를 살펴보면 홈을 클릭하면 홈 버튼이 파란색으로  활성화 된것을 확인할 수 있으며, 마찬가지로 1페이지를 클릭하면 1페이지 버튼이 활성화 되어 있는 것을 확인 할 수 있습니다.

점점 jQuery Mobile 페이지가 완성되어 가는듯한 느낌이 드네요. 여러분들도 직접 소스를 만들어서 테스트를 해보시기 바랍니다. 그럼 실력이 쭉쭉 늘테니까요 ^^

 

오늘 jQuery Mobile 포스팅은 여기까지 입니다.

그럼 남은 하루 즐겁게 보내시기 바라고 즐거운 프로그래밍 되시기 바랍니다.

 

'jQuery Mobile > JM Tutorial' 카테고리의 다른 글

jQuery Mobile Collapsible(접고 펴는 기능)  (0) 2013.11.20
jQuery Mobile 네비게이션 바(Navigation Bars)  (0) 2013.11.15
jQuery Mobile 툴바(Toolbars)  (0) 2013.11.13
jQuery Mobile 툴바(toolbars)  (0) 2013.11.11
jQuery Mobile 버튼  (0) 2013.10.31
jQuery Mobile 페이지2  (2) 2013.10.28
Posted by 진격의 파파

댓글을 달아 주세요

 

 

안녕하세요!!

이번 포스팅은 jQuery Mobile 의 툴바에 대해서 알아보겠습니다.

내용이 조금 많은듯 해서 다음 포스팅과 반반 나눠서 포스팅해야 할듯 합니다. ^^;

우선 오늘 포스팅은 헤더 바(hearder bars)와 푸터 바(footer bars)에 설명하겠습니다.

 

사실 헤더(hearder)는 일반적으로 페이지 제목, 로고, 그리고 버튼을 포함하는 내용을 많이 담고 있습니다.

지금 보여드릴 예제는 여러분들이 왼쪽과 오른쪽에 버튼을 추가하는 내용입니다.

예제를 보시기 바랍니다.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
  <div data-role="header">
    <a href="#" data-role="button" data-icon="home">Home</a>
    <h1>나의 모바일 홈페이지</h1>
    <a href="#" data-role="button" data-icon="search">Search</a>
  </div>
</div>
</body>
</html>
// 붉은 글씨로 표시된 부분을 보면 <a>태그 <h1> 태그 <a> 태그로 나오는 것을 볼 수 있고 data-icon 은 home 과 search 를 넣어서 해당하는 아이콘이 나오게 한것을 알 수 있습니다. 그리고 만약 <a> 태그중 search  부분을 없애면 자동으로 home 버튼이 좌측으로 배치되는것을 확인할 수 있으며, 버튼을 두 개를 넣을 경우 첫 번째 버튼이 좌측, 두 번째 버튼이 우측으로 가는것을 알 수 있습니다.

 

 

그리고 만약 버튼을 하나만 넣고 싶은데 우측에 넣고 싶을 경우 아래와 같이 코딩합니다.(기본적으로 좌측에 버튼이 생성됨)

<div data-role="header">
  <h1>나의 모바일 홈페이지</h1>
  <a href="#" data-role="button" class="ui-btn-right">Search</a>
</div>
붉은색으로 표시된 부분을 보면 class="ui-btn-right" 버튼을 우측에 배치시키라는 명령입니다. 그리고 만약 아이콘을 넣고 싶은 경우 그 옆에 data-icon="넣고싶은 아이콘" 이렇게 하시면 됩니다.

 

마찬가지로 하단바에도 버튼을 넣을 수 있습니다.

<div data-role="footer">
  <a href="#" data-role="button">페이스북</a>
  <a href="#" data-role="button">트위터</a>
  <a href="#" data-role="button">인스타그램</a>
</div>

처럼 말이죠. 위 내용을 적용하려면 상단에 있는 헤더바의 소스중에서

<div data-role="header"></div>

...

<div data-role="footer"></div>

이렇게 하고 테스트를 해보면 됩니다. 그런데 그렇게 적용할 경우 헤더바, 하단바 이렇게 보기 안좋게 나오게 되는데 중간에

<div data-role="header"></div>

<div data-role="content">어쩌구 저쩌구 테스트 내용</div>

<div data-role="footer"></div>

이렇게 하면 중간 내용이 있어서 보기 좋게 나오겠죠.

 

그리고 위 하단바 처럼 버튼을 그냥 넣으면 좌측 정렬되어 나오게 됩니다. 이것을 중앙 정렬을 하려면

 <div data-role="footer" class="ui-btn">

부분을 넣으면 중앙 정렬이 됩니다.

 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
  <div data-role="header">
    <a href="#" data-role="button" data-icon="home">Home</a>
    <h1>나의 모바일 홈페이지</h1>
    <a href="#" data-role="button" data-icon="search">Search</a>
  </div>
  <div data-role="content">
    <p>어쩌구 저쩌구 테스트 글!! 입니다.</p>
  </div>
  <div data-role="footer" class="ui-btn">
    <a href="#" data-role="button" data-icon="plus">페이스북</a>
    <a href="#" data-role="button" data-icon="plus">트위터</a>
    <a href="#" data-role="button" data-icon="plus">인스타그램</a>
  </div>
</div>
</body>
</html>
// 위의 내용을 모두 적용한 소스 입니다. 실행하면 아래화면 처럼 나오게 됩니다.

 

 

모바일 화면에서 테스트 해야 제대로 된 화면을 볼 수 있을텐데 시간상 익스플로러 화면에 이미지를 보여주는점 양해 바랍니다. ^^;

그럼 오늘 포스팅은 여기까지 마치고 다음 포스팅에 이어서 툴바에 대해서 설명하겠습니다. 읽어주셔서 감사하며, 궁금하거나 문의사항 있으면 쪽지 또는 댓글 바랍니다.

 

즐거운 저녁식사 되기 바라고 즐거운 프로그래밍 되세요!!!

 

'jQuery Mobile > JM Tutorial' 카테고리의 다른 글

jQuery Mobile 네비게이션 바(Navigation Bars)  (0) 2013.11.15
jQuery Mobile 툴바(Toolbars)  (0) 2013.11.13
jQuery Mobile 툴바(toolbars)  (0) 2013.11.11
jQuery Mobile 버튼  (0) 2013.10.31
jQuery Mobile 페이지2  (2) 2013.10.28
jQuery Mobile 페이지  (0) 2013.10.25
Posted by 진격의 파파

댓글을 달아 주세요

 

 

 

안녕하세요!! 

이번에 포스팅할 jQuery Mobile 내용은 아이콘 입니다.

jQuery Mobile 은 아주 쉽게 아이콘을 생성할 수 있습니다.  오늘 그 부분에 대해서 알아보겠습니다.

 

우선 아래 간단한 소스를 보면서 설명드리겠습니다.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="content">
  <a href="#" data-role="button" data-icon="arrow-l">Left Arrow Button</a>
  </div>
</div>

</body>
</html> 

// 위 구문에서 중요하게 보아야 할 곳은 붉은색으로 표시된 부분입니다. data-icon="arrow-l" 입니다. 여기서 l 은 left 의 줄임말이라고 보면 되겠습니다. 위 구문을 실행하면 아래와 같은 화면이 나오게 됩니다.

 

// 위 그림을 보면 좌측에 아이콘이 생긴것을 확인할 수 있습니다. 

 

이렇게 아이콘을 만들고 싶은 경우 data-icon 을 이용하여 사용하고 싶은 아이콘을 적어주기만 하면 됩니다.

아래 내용은 기타 아이콘들에 대한 내용입니다. 이미지와 함께 설명하겠습니다.

 

 

사용하고 싶은 아이콘을 선택하여 적어주면 됩니다.

기본적인것만 숙지하시고 나머지는 굳이 다 외울 필요는 없을듯 하고 이런게 있구나 정도로 생각하세요~

사용방법은 위 소스에 나와 있으니 한번 테스트 해보시기 바랍니다.

 

그럼 오늘도 즐거운 하루 보내시고 즐거운 프로그래밍 되세요~

'jQuery > jQuery Tutorial' 카테고리의 다른 글

jQuery Mobile 아이콘  (0) 2013.11.07
jQuery Events hover(), focus(), blur()  (0) 2013.05.10
jQuery events mouseenter(), mouseleave(), mousedown(), mouseup()  (0) 2013.05.10
jQuery Events ( click(). dbclick() )  (0) 2013.05.10
jQuery Selectors  (0) 2013.05.08
jQuery 기초  (0) 2013.05.08
Posted by 진격의 파파

댓글을 달아 주세요

 

 

안녕하세요!! 

오랜만에 jQuery Mobile 포스팅을 하는것처럼 느껴집니다. 요즘 정신도 없고 게으르고 하다보니 그런듯하네요.

아무튼 이번에 포스팅할 내용은 jQuery Mobile 에서 사용되는 버튼의 종류 및 사용방법에 대해서 설명드립니다.

 

jQuery Mobile 은 3가지의 방법으로 버튼을 만들 수 있습니다. 

첫번째 방법은 <button> 입니다.

<button>Button</button>

 

두번째 방법은 <input> 입니다.

<input type="button" value="Button">

 

세번째 방법은 <href> 입니다.

<a href="#" data-role="button">Button</a>

// 여기서 특이점은 붉은 글씨로 표현된 부분입니다. 그냥 단순히 href 를 사용하면 텍스트에 링크만 걸게 되기 때문에 data-role="button" 이라고 정의를 하여 버튼을 생성합니다.

 

기본적으로 버튼은 화면의 전체 너비를 차지합니다. 하지만 두 개 이상의 버튼을 만들고자 할 경우 data-inline="true"을 사용합니다.

예제와 그림을 보며 설명 하겠습니다.

 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
  <h1>나의 모바일 홈페이지</h1>
  </div>

  <div data-role="content">
  <p>안녕하세요!!</p>
  <a href="#pagetwo" data-role="button" data-inline="true">두 번째 페이지</a>
  </div>

  <div data-role="footer">
  <h1>Copyright by makand123. All Rights Reserved.</h1>
  </div>
</div>

<div data-role="page" id="pagetwo">
  <div data-role="header">
  <h1>나의 모바일 홈페이지</h1>
  </div>

  <div data-role="content">
  <p>안녕히가세요!!</p>
  <a href="#pageone" data-role="button" data-inline="true">첫 번째 페이지</a>
  <a href="#pageone" data-role="button" data-inline="true">첫 번째 페이지</a>
  <a href="#pageone" data-role="button" data-inline="true">첫 번째 페이지</a>
  </div>

  <div data-role="footer">
  <h1>Copyright by makand123. All Rights Reserved.</h1>
  </div>
</div>

</body>
</html>

 

 

 

 

만약 위 소스에서 data-inline="true" 을 적용하지 않았다면  아래와 같은 이미지가 나오게 됩니다.

<a href="#pagetwo" data-role="button">두 번째 페이지</a> 처럼 말이죠

 

 

 

화면을 꽉 채우는 버튼이 생성되게 됩니다. 그래서 두 개 이상의 버튼을 생성코자 할 경우 data-inline="true" 을 사용합니다. 

 

그리고 기본적으로 버튼은 서로간의 공백을 두고 생성됩니다. 위 이미지에서 보다시피 말이죠. 하지만 버튼이 꼭 여백을 두고 생성되어야 한다는 법칙은 없지요. 그래서 jQuery Mobile은 버튼간의 공백없이 생성할 수도 있게 만들었습니다.

data-role="controlgroup" data-type="horizontal"  을 사용하여 만들수 있습니다.

아래 예제와 이미지를 참고하시면 되겠습니다.

 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
  <h1>그룹 버튼</h1>
  </div>

  <div data-role="content">
    <div data-role="controlgroup" data-type="horizontal">
    <p>수평적 그룹 버튼</p>
    <a href="#" data-role="button">Button 1</a>
    <a href="#" data-role="button">Button 2</a>
    <a href="#" data-role="button">Button 3</a>
    </div><br>
   
    <div data-role="controlgroup" data-type="vertical">
    <p>수직적 그룹 버튼</p>
    <a href="#" data-role="button">Button 1</a>
    <a href="#" data-role="button">Button 2</a>
    <a href="#" data-role="button">Button 3</a>
    </div>
  </div>

  <div data-role="footer">
  <h1>Copyright by makand123. All Rights Reserved.</h1>
  </div>
</div>

</body>
</html> 

 

 

 

위 이미지에서 보다시피 버튼들이 붙어서 나오는것을 확인할 수 있습니다. 현재 익스플로러 화면에서 테스트한 이미지를 올리고 있어서 버튼의 모양이 직사각형으로 보여지는데 크롬 또는 사파리 등의 브라우저에서 확인하면 양옆이 둥근모서리로 표현되는 것을 확인할 수 있습니다. 그리고 그림자효과도 버튼에 기본적으로 적용되어 있습니다. 

 

그리고 참고적으로 몇 가지 방법을 더 설명드릴까 합니다.

 

위에서 설명드렸지만 기본적으로 버튼은 둥근모서리를 만들어 줍니다. 하지만 둥근모서리가 싫고 직각모서리를 만들고 싶은 경우 추가하는 옵션이 있습니다. <a href="#" data-role="button" data-corners="false">버튼</a> 붉은 글씨로 되어 있는 data-corners="false" 를 사용하게 되면  라운딩효과 즉 둥근모서리를 하지 않겠다라는 의미 입니다.

 

또한 기본적으로 생성되는 버튼의 크기는 일정합니다. 하지만 조금더 작게 버튼을 만들고 싶을 경우 사용하는 옵션이 있습니다.

<a href="#" data-role="button" data-mini="true">버튼</a> 붉은 글씨로 되어 있는 data-mini="true" 를 사용하게 되면 더 작은 버튼을 만들 수 있습니다.

 

버튼을 생성하면 기본적으로 둥근모서리와 그림자효과가 적용되어 생성됩니다. 둥근모서리는 위에서 data-corners="false" 를 사용하여 없앨수 있습니다. 그리고 그림자효과를 지우는 방법은  <a href="#" data-role="button" data-inline="true" data-shadow="false">버튼</a> 붉은 글씨로 되어 있는 data-shadow="false" 를 사용하면 그림자효과가 없어지게 됩니다.

 

알면 알수록 신기하고 재미있는 jQuery Mobile 입니다.

 

'jQuery Mobile > JM Tutorial' 카테고리의 다른 글

jQuery Mobile 툴바(Toolbars)  (0) 2013.11.13
jQuery Mobile 툴바(toolbars)  (0) 2013.11.11
jQuery Mobile 버튼  (0) 2013.10.31
jQuery Mobile 페이지2  (2) 2013.10.28
jQuery Mobile 페이지  (0) 2013.10.25
jQuery Mobile 인스톨(Install)  (0) 2013.10.21
Posted by 진격의 파파

댓글을 달아 주세요

 

 

안녕하세요!! 

이번에 포스팅할 내용은 jQuery Mobile의 간단한 페이지를 만들어 보겠습니다.

 

원래 모바일이란 기기가 많이 업그레이드 되고는 있지만 우리가 흔히 사용하는 개인용 PC 처럼 CPU, 메모리 등이 많이 높지는 않습니다. 그래서 가끔 모바일 홈페이지들중에 버벅거리는 현상이 나타나는 경우가 종종 있죠. 아마도 계속 모바일 기기도 사양이 높아지고 있는 추세고 광대역 LTE도 나오고 있어서 점점 그런 경우는 줄어들거라 생각하지만 jQuery Mobile은 사실 모바일에 최적화 되어 있기 때문에 적은 소스 내용으로 최적의 모바일 환경을 구축할 수 있다고 보면 되겠습니다.

 

그럼 예제로 어떻게 구성되는지 간단히 알아보겠습니다.

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>나의 모바일 홈페이지</h1>
  </div>

  <div data-role="content">
    <p>자 이제 시작해봅시다!!</p>
  </div>

  <div data-role="footer">
    <h1> Copyright by makand123. All Rights Reserved.</h1>
  </div>
</div>

</body>
</html>

// 기본적인 소스의 작성은 위와 같습니다.

// 위 내용이 나오는 화면은 아래와 같습니다.

 

 

<div data-role="page">

  <div data-role="header">
    <h1>상단내용</h1>
  </div>

  <div data-role="content">

    <p>내용</p>
  </div>

  <div data-role="footer">
    <h1>하단내용</h1>
  </div>
</div>

// data-role 안에 page를 만들겠다는 선언을 먼저 하고 header(상단), content(내용), footer(하단) 로 작성을 하면 됩니다.

header 를 선언하면 위와 같이 상단에 자동배치되고 footer를 선언하면 하단에 자동배치되게 됩니다. 마찬가지로 content는 중간 내용을 삽입할 수 있는 공간을 만들어줍니다.

 

작성을 해보시면 알겠지만 정말 간단하고 깔끔하게 나오는 것을 볼 수 있고 화면의 크기에 따라서 자동으로 조절이 됩니다. 그래서 모바일 해상도에 상관없이 나오게 됩니다.

 

어쨋든 중요한것은 "data-role 에 이미지, 목록, 헤더, 푸터 등의 html 요소를 선언한다" 라는 것을 알아두시면 되겠습니다.

크게 어려운건 없을거라 생각되지만 혹시라도 궁금한점이 있으시면, 댓글, 쪽지 보내주세요~

 

다음 포스팅에서도 페이지에 대해 조금더 구체적으로 알아보도록 하겠습니다.

그럼 오늘도 즐거운 하루 보내시고 즐거운 프로그래밍 되세요!!

 

 

'jQuery Mobile > JM Tutorial' 카테고리의 다른 글

jQuery Mobile 툴바(toolbars)  (0) 2013.11.11
jQuery Mobile 버튼  (0) 2013.10.31
jQuery Mobile 페이지2  (2) 2013.10.28
jQuery Mobile 페이지  (0) 2013.10.25
jQuery Mobile 인스톨(Install)  (0) 2013.10.21
jQuery Mobile 소개  (2) 2013.10.18
Posted by 진격의 파파

댓글을 달아 주세요

 

 

안녕하세요!!

이번에 포스팅할 내용은 jQuery Mobile 의 Install(인스톨) 입니다.

 

인스토이라고 해서 사실 거창한건 크게 없으니 안심하셔도 됩니다.

이전 포스팅에서도 잠깐 설명을 드렸었죠.

jQuery Mobile 의 인스톨은 상단에 라이브러리 3줄의 내용만 있으면 끝입니다. 그리고 라이브러리를 직접 다운받아서 서버에 저장하여 사용해도 무관합니다. 인스톨을 하기 위해서 컴퓨터(서버)에 어떠한 설치도 요구하는건 없습니다.

라이브러리는 총 3개이며 하나의 CSS 파일과 두개의 자바스크립트(JS) 파일입니다.

 

<head>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="
http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="
http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

<head>

 

// 위 소스는 앞에서 설명드렸던 3개의 라이브러리입니다. 헤드와 헤드 사아에 3줄을 삽입하면 되며, 버전이 자주 업그레이드 되기 때문에 http://jquerymobile.com/download/ 에 가끔씩 방문하여 내용을 살펴보기 바랍니다.

 

그리고 라이브러리를 직접 다운 받았다면

<head>
<link rel=stylesheet href=jquery.mobile-1.3.2.css>
<script src=jquery.js></script>
<script src=jquery.mobile-1.3.2.js></script>
</head>

 

// 위 처럼 서버에 다운로드된 주소의 링크를 걸면 되겠습니다.

 

이제 인스톨을 했으니 다음 포스팅부터 jQuery Mobile 의 페이지를 만들어가며, 여러가지 기능에 대해서 알아보겠습니다.

 

그럼 즐거운 한주 되길 바라며, 즐거운 프로그래밍 되세요!!

 

'jQuery Mobile > JM Tutorial' 카테고리의 다른 글

jQuery Mobile 툴바(toolbars)  (0) 2013.11.11
jQuery Mobile 버튼  (0) 2013.10.31
jQuery Mobile 페이지2  (2) 2013.10.28
jQuery Mobile 페이지  (0) 2013.10.25
jQuery Mobile 인스톨(Install)  (0) 2013.10.21
jQuery Mobile 소개  (2) 2013.10.18
Posted by 진격의 파파

댓글을 달아 주세요

SQL MID() 함수

SQL 2013.10.12 12:13

 

 

안녕하세요!! 

이번 포스팅할 내용은 SQL MID() 입니다. 

 

MIN() 를 한마디로 표현하면 글자 자르기 정도가 될듯합니다.

 
기본적 문법은 아래와 같습니다.
SELECT MID(column_name,start[,length]) FROM table_name;
 

id

 coffee_name

 price

 guest

 1

 아메리카노

 2500

 김

 2

 카페라떼

 3000

 박

 3

 아메리카노

 2500

 이

 4

 카페모카

 3500

 송

// 처럼 테이블(coffee)이 있다고 가정하고 MID() 를 적용해 보겠습니다. 

 

select MID(coffee_name, 2) from coffee;

// 위와 같은 구문을 실행하면 결과값은 아래와 같습니다.

메리카노

페라떼

메리카노

페모카

// 즉 두번째 부터 값을 가져오게 됩니다.

 

select MID(coffee_name, 1,3) from coffee;

// 눈치가 빠른 분들이라면 짐작하시겠지만 위와 같은 구문을 실행하면 결과값은 아래와 같습니다.

아메리

카페라

아메리

카페모
// 즉 첫번째 부터 세번째 값까지 가져오게 됩니다.

 

게시판 리스트를 보면 보통 번호, 제목, 작성자, 작성일... 등으로 해서 목록이 보여집니다.

제목이 길 경우 또는 이름이 너무 길 경우 등에 위와 같은 구문을 이용하여 불러오면 편하겠죠.

 

모두 주말 즐겁게 보내고 계신가요?

날씨도 좋고 어디 나들이가기 정말 좋은 계절입니다.

좋은 추억 만드시기 바라면서 오늘 포스팅은 이만 마치겠습니다. ㅎㅎ;

 

'SQL' 카테고리의 다른 글

SQL 구문, 함수 포스팅 종료!! jQuery Mobile 시작!!  (1) 2013.10.17
SQL ROUND() 함수  (5) 2013.10.14
SQL MID() 함수  (0) 2013.10.12
SQL UCASE(), LCASE() 구문  (0) 2013.10.10
SQL HAVING 구문  (2) 2013.10.09
SQL GROUP BY 구문  (0) 2013.10.08
Posted by 진격의 파파

댓글을 달아 주세요