[공지] SMS114.CO.KR 바로가기
www.sms114.co.kr
👉 텔레그램 상담 바로가기

1 분 소요

회원가입과 로그인 - VIEW

main.php 를 생성 후, 반복된 수정 과정을 통해 완성된 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>메인</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- 이것은 안 넣어도 됨     
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 -->    
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
    <style>
        body{font-family: 'Noto Sans KR', sans-serif;}
       .login_box{max-width:350px;margin:0 auto;} 
       .input_wrap{font-size:12px;margin-bottom:10px;}
       .input_wrap input{width:100%;height:26px;border:0px;border-bottom:solid #000 1px;}
       .login_box .join_text{font-size:12px;text-align:center;with:100%;margin-top:10px;}
       .login_box .join_text span{text-decoration:underline;font-weight:600px;cursor:pointer;}

       .join_box .login_text{font-size:12px;text-align:center;with:100%;margin-top:10px;}
       .join_box .login_text span{text-decoration:underline;font-weight:600px;cursor:pointer;}

       .login_box .email{}
       .login_box .pwd{}
       .join_box{max-width:350px;margin:0 auto;display:none;}
       .join_box .j_email{}
       .join_box .j_pwd{}
       .join_box .j_pwdcf{}
       .join_box .j_name{}
       .login_btn{border:solid #000 1px;width:100%;height:32px;line-height:32px;text-align:center;cursor:pointer;border-radius:8px;}
       .join_btn{border:solid #000 1px;width:100%;height:32px;line-height:32px;text-align:center;cursor:pointer;border-radius:8px;}
       .page_title{font-size:18px;font-weight:500;text-align:center;width:100%;margin-top:30px;margin-bottom:5px;}
       .site_title{font-size:20px;font-weight:700;text-align:center;width:100%;margin-bottom:20px;}
    </style>
</head>

<body>
    <div class="page_title">무엇이든 적어두세요.</div>
    <div class="site_title">로그</div>

    <div class="login_box">
        <div class="input_wrap"> 이메일 <input type="email" class="email" > </div>
        <div class="input_wrap"> 패스워드 <input type="password" class="email" > </div>
        <div class="login_btn">로그인</div>
        <div class="join_text">아직 가입하지 않으셨나요? <span>회원가입</span></div>
    </div>

    <div class="join_box">
        <div class="input_wrap"> 이메일 <input type="email" class="j_email" > </div>
        <div class="input_wrap"> 패스워드 <input type="password" class="j_pwd" > </div>
        <div class="input_wrap"> 패스워드 확인 <input type="password" class="j_pwdcf" > </div>
        <div class="input_wrap"> 이름 <input type="text" class="j_name" > </div>
        <div class="join_btn">회원가입</div>
        <div class="login_text">이미 가입하셨나요? <span>로그인</span></div>
    </div>

    <script>
        $(document).ready(function(){
            $('.join_text span').click(function(){
                $('.login_box').hide();
                //$('.join_box').fadeIn();
                //$('.join_box').fadeIn(5000);
                $('.join_box').show();
            });

            $('.login_text span').click(function(){
                $('.join_box').hide();
                //$('.join_box').fadeIn();
                //$('.join_box').fadeIn(5000);
                $('.login_box').show();
            });


            
            $.ajax({
                url: '/api/test2',          // 호출할 API URL
                type: 'POST',               // HTTP 메서드 (GET, POST, 등)
                //dataType: 'json',          // 응답 데이터 형식 (json, text, 등)
                success: function(response) {
                    // 호출 성공 시 콘솔에 출력
                    console.log('Success:', response);
                },
                error: function(xhr, status, error) {
                    // 호출 실패 시 에러 로그 출력
                    console.error("Error:", error);
                }
            });
            
        });
    </script>
</body>
</html>

  1. google 폰트는 Noto Sans Korea 체.

    구글 폰트 Noto Sans Korea 바로가기.

    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">

    위에서 두 줄은 삭제해도 괜찮음.

  2. style 요소에 대해서도 깊게 들여다봐야 할 것.

댓글남기기

참고