<!-- 실제 모바일에서 구동해보면.. viewport문제로 인해 글씨가 너무 작게 보임 -->
    <!-- why? 모바일의 웹브라우저는 viewport가 무조건 980으로 고정되어 있음. 실제 디바이스의 viewport와 상관없이 크기가 결정됨 -->
    <!-- viewport[웹 브라우저의 document영역의 가상의 사각형영역]는 해상도와는 다름. Nexus 5x의 해상도는 1080*1920이지만 viewport는 412*712임-->
    <!-- 넥서스 5x의 뷰포트 412에서 200px인 img의 width가 모바일 웹브라우저에서는 기본 뷰포트크기인 980에서는 대략 2배정도 작아진 100px정도의 크기임 -->
    <!-- 디바이스의 실제 뷰포트로 변경해주는 작업이 필요 -->
    <!-- <meta name="viewport" content="width=412, initial-scale=1.0"> -->
    <!-- <meta name="viewport" content="width=600, initial-scale=1.0"> -->
    <!-- <meta name="viewport" content="width=980, initial-scale=1.0"> -->


<meta name = "google-signin-client_id" content = " 복사한 클라이언트 ID ">

<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>

<script type="text/javascript">
const CLIENT_ID = "f932d197237f18f68889018647ba71c4";
const REDIRECT_URI =  "http://localhost:8080/redirecturl/kakaologin";

const KAKAO_AUTH_URL = "https://kauth.kakao.com/oauth/authorize?client_id="+CLIENT_ID+"&redirect_uri="+REDIRECT_URI+"&response_type=code";
    
function kakaoLogin(){
    location.href=KAKAO_AUTH_URL;
}    

</script>
    

            /*구글 로그인 css*/
/*    *, *:before, *:after {
            box-sizing: border-box;
        }

        .g-sign-in-button {
            margin: 10px;
            display: inline-block;
            width: 200px;
            height: 50px;
            background-color: #4285f4;
            color: #fff;
            border-radius: 1.5px;
            transition: background-color .218s, border-color .218s, box-shadow .218s;
        }

        .g-sign-in-button:hover {
            cursor: pointer;
        }

        .g-sign-in-button:active {
            background-color: #3367D6;
            transition: background-color 0.2s;
        }

        .g-sign-in-button .content-wrapper {
            height: 100%;
            width: 100%;
            border: 1px solid transparent;
        }

        .g-sign-in-button img {
            width: 18px;
            height: 18px;
        }

        .g-sign-in-button .logo-wrapper {
            padding: 15px;
            background: #fff;
            width: 48px;
            height: 100%;
            border-radius: 1px;
            display: inline-block;
        }

        .g-sign-in-button .text-container {
            font-family: 'Roboto','arial',sans-serif;
            font-weight: 500;
            letter-spacing: .21px;
            font-size: 13px;
            line-height: 48px;
            vertical-align: top;
            border: none;
            display: inline-block;
            text-align: center;
            width: 140px;
        }*/
      

      <div class="g-signin2" data-width="200" data-onsuccess="onSignIn"></div>
       <div class="g-sign-in-button">
            <div class="content-wrapper">
                <div class="logo-wrapper">
                    <img src="https://developers.google.com/identity/images/g-logo.png">
                </div>
                <span class="text-container">
                  <span>구글 계정으로 로그인</span>
                </span>
            </div>
        </div>

        <div id="custom-login-btn" onclick="kakaoLogin()">
            <img
            src="//k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg"
            width="200"
            alt="카카오 계정으로 로그인"
            
            />
        </div>