'모바일' 태그의 글 목록

'모바일'에 해당되는 글 4건

[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작

Posted at 2019. 6. 18. 14:47 | Posted in JavaScript & jQuery/jQuery

※ 참고

해당 예제는 jQuery Mobile의 HTML TABLE을 반응형으로 바꿔 모바일 화면에 맞게 출력할 수 도 있게 해주는 예제이다.

그렇기에 해당 예제는 jQuery.mobile.css 파일이 반드시 필요하기에. 사전에 제작중인 사이트에서 사용할 경우 CSS의 충돌은 염두해 두어야 할것이다.

■ 모바일 화면 크기에 맞는 테이블 레이아웃 변경

실제 사이트를 제작하고 운영하는 단계에서

요즘 반드시 고려하게 되는것이,

디바이스 화면에 맞추어 화면을 변화시키는 것이고,

그중 가장 귀찮게 하는것이 바로 HTML TABLE일 것이다.

컴퓨터와 모바일 디바이스에서의 보여주어야 하는 정보를 어떻게 처리해야 할지 상당히 귀찮고.

피곤한데, 이 고민을 jQuery Mobile을 사용하면 어느정도 덜어 낼 수 있다.

# HTML 소스 코드

table_reaction.html

<html>

<head>

</script>

</head>

<body>

<thead>

<tr>

<th>미디어지수</th><th>소통지수</th><th>커뮤니티지수</th><th>총합</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

</body>

</html>

TABLE에 data-role="table" 속성을 추가하면

thead의 제목 필드값이 tbody의 td 값들 앞에 붙여지게 되지만.

그것은 jQuery.mobile.css 에서 노출을 막아주고 있기에

화면 사이즈의 변화에 따라서만 노출되게 된다.

# CSS 디자인

custom_table.css

/* 화면 사이즈 조절 */

@media screen and (min-width:36em) {

/* 화면의 사이즈가 560px 이상일 경우 table의 텍스트를 가운데 정렬 한다.*/

.ui-responsive th, .ui-responsive td {

text-align:center;

}

/* 테이블 디자인 */

table {

width:100%;

text-align:center;

border-collapse:collapse;

}

th {

background:linear-gradient(#333333 0%, #444444 100%);

color:#FFFFFF;

font-weight:bold;

height:60px;

font-size:20px;

}

td {

height:40px;

}

/* 홀수행 백그루안드 색상 */

tr:nth-child(even) td {

background:#EEEEEE;

}

/* 짝수행 백그루안드 색상 */

tr:nth-child(odd) td {

background:#FDFDFD;

}

코드의 준비가 끝났다면

브라우저를 통해 해당 HTML 코드를 불러와 보자.

# 출력결과01 - 풀 사이즈

처음 풀 사이즈로 본 화면은 평소 컴퓨터를 할때 자주 접하게 되는

HTML TABLE과 다른 부분을 찾아볼 수 없다.

그럼 이제 해당 화면이의 가로 넓이 사이즈를 줄여 나가 보자.

# 출력결과 - 모바일 사이즈

그럼 위와같이 모바일 화면에 맞게 새로 정의된 TABLE의 내용을 확인 할 수 있다.

저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] load( ) 메소드를 이용한 외부 데이터의 페이지 반영 (0)	2020.03.02
[jQuery] JCROP을 이용한 이미지 자르기 - Sample (5)	2020.02.11
[jQuery] 팝업 창 외에 다른 항목 클릭 막기 (0)	2019.06.04
[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기 (7)	2019.01.31
[jQuery] Mobile Web 사용시 KEYBOARD 이벤트 체크 (0)	2018.11.17

[Kakao] KakaoTalk으로 링크 공유하기 API[Kakao] KakaoTalk으로 링크 공유하기 API

Posted at 2018. 8. 31. 01:17 | Posted in API/Kakao

■ 카카오 디벨로퍼 애플리케이션 생성

01. 카카오 디벨로퍼(https://developers.kakao.com/) 사이트에 접속한다.

카카오 디벨로퍼에 가입하지 않은 사람이라면 우선 여기서 가입을 하고 다음 작업을 진행한다.

02. 이제 내 애플리케이션(https://developers.kakao.com/apps) 페이지로 이동해서 앱 만들기 버튼을 클릭해 주자.

03. 제작할 앱의 아이콘과 이름을 작성하고, 앱 만들기 버튼을 클릭하면 앱이 생성된다.

04. 앱이 다 만들어지면 자바스크립트 키를 발급받게 되는데 이 키를 잘 기억해 두자.

05. 마지막으로 생성한 애플리케이션에 사이트 도메인을 입력한다.

① 위에서 생성한 애플리케이션을 선택한다.

② 좌측 카테고리의 설정 → 일반을 선택한다.

③ 사이트 도메인부분에 사용할 사이트 도메인을 입력한다.

(해당 포스팅은 http://localhost 를 사용하였다.)

④ 저장 버튼을 눌러 설정을 저장하면 사용할 준비가 완료되었다.

■ 카카오 톡 공유 템플릿 제작하기

#01. 카카오톡 피드 템플릿 제작

# 소스코드

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: 카카오톡 공유하기 ::</title>
<script type="text/JavaScript" src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
<script type="text/javascript">
    function shareKakaotalk() {
       Kakao.init("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");      // 사용할 앱의 JavaScript 키를 설정
       Kakao.Link.sendDefault({
              objectType:"feed"
           , content : {
                  title:"WARCRAFT3 THE REIGN OF CHAOS"   // 콘텐츠의 타이틀
               , description:"너흰아직 준비가 안되었다!"   // 콘텐츠 상세설명
               , imageUrl:"illidan_stormrage.jpg"   // 썸네일 이미지
               , link : {
                      mobileWebUrl:"http://magic.wickedmiso.com/"   // 모바일 카카오톡에서 사용하는 웹 링크 URL
                   , webUrl:"http://magic.wickedmiso.com/" // PC버전 카카오톡에서 사용하는 웹 링크 URL
               }
           }
           , social : {
                  likeCount:0       // LIKE 개수
                , commentCount:0    // 댓글 개수
                , sharedCount:0     // 공유 회수
           }
           , buttons : [
               {
                      title:"게시글 확인"    // 버튼 제목
                   , link : {
                        mobileWebUrl:"http://magic.wickedmiso.com/"   // 모바일 카카오톡에서 사용하는 웹 링크 URL
                      , webUrl:"http://magic.wickedmiso.com/" // PC버전 카카오톡에서 사용하는 웹 링크 URL
                   }
               }
           ]
       });
    }
</script>
</head>
<body>
    <h1>카카오톡 공유하기</h1>
    <input type="button" onClick="shareKakaotalk();" value="KAKOA Talk으로 공유하기"/>
</body>
</html>

# 출력결과

#02. 카카오톡 위치 템플릿 제작

# 소스코드

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: 카카오톡 공유하기 ::</title>
<script type="text/JavaScript" src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
<script type="text/javascript">
    function shareKakaotalk() {
        Kakao.init("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");      // 사용할 앱의 JavaScript 키를 설정
        Kakao.Link.sendDefault({
              objectType:"location"
            , address:"노스렌드"    // 공유할 위치의 주소
            , addressTitle:"얼음왕관의 성채"   // 카카오톡 내의 지도 뷰에서 사용되는 타이틀
            , content: {
                  title:"WARCRAFT3 THE FROZEN THRONE"   // 콘텐츠의 타이틀
                , description:"왕위를 계승하는 중입니다. 아버지" // 콘텐츠 상세설명
                , imageUrl:"arthas_menethil.jpg"    // 썸네일 이미지
                , link: {
                      mobileWebUrl:"http://magic.wickedmiso.com/"   // 모바일 카카오톡에서 사용하는 웹 링크 URL
                    , webUrl:"http://magic.wickedmiso.com/" // PC버전 카카오톡에서 사용하는 웹 링크 URL
                }
            }
            , social: {
                  likeCount:0       // LIKE 개수
                , commentCount:0    // 댓글 개수
                , sharedCount:0     // 공유 회수
            }
            , buttons: [
                {
                      title:"버튼 제목" // 버튼 제목
                    , link: {
                          mobileWebUrl:"http://magic.wickedmiso.com/"   // 모바일 카카오톡에서 사용하는 웹 링크 URL
                        , webUrl:"http://magic.wickedmiso.com/" // PC버전 카카오톡에서 사용하는 웹 링크 URL
                    }
                }
            ]
        });
    }
</script>
</head>
<body>
    <h1>카카오톡 공유하기</h1>
    <input type="button" onClick="shareKakaotalk();" value="KAKOA Talk으로 공유하기"/>
</body>
</html>

# 출력결과

저작자표시

'API > Kakao' 카테고리의 다른 글

[Kakao] Kakao 계정으로 Login 하기 (0)	2020.01.31

[Telegram] Telegram Bot을 사용하여 메세지 전송하기[Telegram] Telegram Bot을 사용하여 메세지 전송하기

Posted at 2018. 8. 29. 05:30 | Posted in API/Telegram

참고① : https://ncube.net/13536

참고② : https://bakyeono.net/post/2015-08-24-using-telegram-bot-api.html

■ 텔레그램 봇을 사용하여 메세지 전송하기

#01. BotFather를 통한 메세지 봇 생성하기

텔레그램의 봇은 @BotFather를 통해 관리된다.

텔레그램 응용프로그램을 실행한뒤 아래 이미지와 같은 순서대로 작업을 진행한다.

01. 메시지 봇 생성하기

① 텔레그램 검색창에 BotFather 라고 입력한다.

② 검색결과에서 BotFather를 선택하고 대화를 시작한다.

③ /start라고 입력한다.

④ /newbot이라고 입력하여 새로운 봇을 생성할 준비를 한다.

⑤ 자신이 사용할 봇의 아이디를 입력한다.(예 : wicked_test)

⑥ 생성한 봇 아이디에 _bot 이라고 추가적으로 입력해 준다.(예 : wicked_test_bot)

⑦ 텔레그램의 답변문구의 토큰 API키 값을 확인한다.

02. 정상적으로 메시지 봇이 생성되었다면 텔레그램 API에 getUpdate 값을 웹 브라우저로 전달하여 생성이 잘 되었는지를 확인해보자.

# 예시

https://api.telegram.org/bot + 토큰 API 키값 + /getUpdates

# 출력결과

https://api.telegram.org/bot682811095:AAEfPFpuEOrq5uCk7KK6aP8BLlX-fpHov8k/getUpdates

#02. Chart ID 확인하기

01. 먼저 메시지를 전달받을 텔레그램 계정으로 로그인한 텔레그램 채팅창에서 위에서 제작한 봇을 검색한다.

① 검색창에서 제작한 텔레그램 봇의 아이디 값을 입력한다.(예 : wicked_test)

② 검색결과에 제작한 봇 아이디가 나온다면 선택해준다.

③ 대화를 시작한다.

02. 대화가 시작되면 위와같이 /start 라고 자동으로 입력되는것을 확인 할 수 있다.

03. 이제 다시 위에서 실행한 웹 브라우저를 새로고침 하여 다시 getUpdates 를 전달해보면 입력한 값이 잘 출력되는 것을 확인 할 수 있다.

#03. 사용자에게 메세지 전송하기

01. 웹 브라우저를 실행해서 아래와 같이 코드를 작성하 메시지를 보내보도록 하자.

# 예시

https://api.telegram.org/bot + 토큰 API 키값 + /sendmessage?chat_id= + 사용자차트ID + &text= + 전송할 메세지

# 출력결과

https://api.telegram.org/bot682811095:AAEfPFpuEOrq5uCk7KK6aP8BLlX-fpHov8k/sendmessage?chat_id=39538219&text=Message

02. 실제 텔레그램 상에서도 작성한 메세지 내용이 정상적으로 출력되는 것을 확인 할 수 있다.

저작자표시

[PHP] 모바일 접속 여부 체크방법[PHP] 모바일 접속 여부 체크방법

Posted at 2018. 3. 29. 18:43 | Posted in PHP

참고 : http://esajin.kr/291

■ HTTP_USER_AGENT를 사용한 디바이스 확인

-. $_SERVER['HTTP_USER_AGENT']는 사용자의 웹 접속환경에 관한 정보를 담고있는 전역변수이다.

-. 사용자가 데스크탑으로 접속하였는지 모바일로 접속하였는지 확인을 위해 쓰일 수 있다.

# 소스코드 - 어떤 디바이스를 통해서 접근했는지를 파악할 mobile_check.php

<?php

class module {

function mobileConcertCheck() {

            $mobileArray = array(
                  "iphone"
               , "lgtelecom"
               , "skt"
               , "mobile"
               , "samsung"
               , "nokia"
               , "blackberry"
               , "android"
               , "sony"
               , "phone"
           );

$checkCount = 0;

for($num = 0; $num < sizeof($mobileArray); $num++) {

if(preg_match("/$mobileArray[$num]/", strtolower($_SERVER['HTTP_USER_AGENT']))) {

$checkCount++;

break;

}

return ($checkCount >= 1) ? "mobile" : "computer";

}

# 소스코드 - 접속 결과를 나타낼 screen_change.php

<?php

include "./mobile_check.php";

$obj = new module();

if($obj -> mobileConcertCheck() == "mobile") {

echo "현재 보고계신 화면은 모바일 입니다.";

} else {

echo "현재 보고계신 화면은 컴퓨터 입니다.";

}

# 출력결과

저작자표시

'PHP' 카테고리의 다른 글

[PHP] PHPExcel 서식 변경하기 (2)	2018.08.29
[PHP] 변수에 달러 기호가 삽입되는경우 (0)	2018.08.10
[PHP] DB 입출력시 따옴표( ' )를 처리방법 (0)	2018.04.06
[PHP] PDO 사용법 정리 (7)	2018.03.27
[PHP] ERROR : unterminated string literal (0)	2018.03.19

Prev Next

'모바일'에 해당되는 글 4건

[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[Kakao] KakaoTalk으로 링크 공유하기 API[Kakao] KakaoTalk으로 링크 공유하기 API

'API > Kakao' 카테고리의 다른 글

[Telegram] Telegram Bot을 사용하여 메세지 전송하기[Telegram] Telegram Bot을 사용하여 메세지 전송하기

[PHP] 모바일 접속 여부 체크방법[PHP] 모바일 접속 여부 체크방법

'PHP' 카테고리의 다른 글

CategoryCategory

Recent PostRecent Post

Recent CommentRecent Comment

Recent TrackbackRecent Trackback

Tag CloudTag Cloud

ArchiveArchive

LinkLink

티스토리툴바