<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>회원가입 화면 샘플 - Bootstrap</title>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <style>
    /* 전체 배경 스타일 */
    body {
      min-height: 100vh;
      background: linear-gradient(to top right, #92b5db 0%, #1d466c 100%);
    }

    /* 입력 폼 스타일 */
    .input-form {
      max-width: 680px;
      margin-top: 80px;
      padding: 32px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15);
    }

    /* 우편번호 찾기 iframe 스타일 */
    #wrap {
      display: none;
      border: 1px solid;
      width: 100%;
      height: 300px;
      margin: 5px 0;
      position: relative;
    }

    /* 접기 버튼 스타일 */
    #btnFoldWrap {
      cursor: pointer;
      position: absolute;
      right: 0px;
      top: -1px;
      z-index: 1;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="input-form-background row">
      <div class="input-form col-md-12 mx-auto">
        <h4 class="mb-3">회원가입</h4>
        <form class="validation-form" novalidate>
          <!-- 아이디 입력 필드 -->
          <div class="mb-3">
            <label for="username">아이디</label>
            <input type="text" class="form-control" id="username" placeholder="아이디를 입력하세요" required>
            <div class="invalid-feedback">
              아이디를 입력해주세요.
            </div>
          </div>

          <!-- 닉네임 입력 필드 -->
          <div class="mb-3">
            <label for="nickname">닉네임</label>
            <input type="text" class="form-control" id="nickname" placeholder="닉네임을 입력하세요" required>
            <div class="invalid-feedback">
              닉네임을 입력해주세요.
            </div>
          </div>

          <!-- 비밀번호 입력 필드 -->
          <div class="mb-3">
            <label for="password">비밀번호</label>
            <input type="password" class="form-control" id="password" placeholder="비밀번호" required>
            <div class="invalid-feedback">
              비밀번호를 입력해주세요.
            </div>
          </div>

          <!-- 전화번호 입력 필드 -->
          <div class="mb-3">
            <label for="phone">전화번호</label>
            <input type="tel" class="form-control" id="phone" placeholder="010-1234-5678" required>
            <div class="invalid-feedback">
              전화번호를 입력해주세요.
            </div>
          </div>

          <!-- 우편번호 입력 필드 -->
          <div class="mb-3">
            <label for="sample3_postcode">우편번호</label>
            <input type="text" id="sample3_postcode" class="form-control" placeholder="우편번호" readonly>
            <input type="button" class="btn btn-outline-secondary mt-2" onclick="sample3_execDaumPostcode()" value="우편번호 찾기">
          </div>

          <!-- 주소 입력 필드 -->
          <div class="mb-3">
            <label for="sample3_address">주소</label>
            <input type="text" id="sample3_address" class="form-control" placeholder="주소" readonly>
          </div>

          <!-- 상세주소 입력 필드 -->
          <div class="mb-3">
            <label for="sample3_detailAddress">상세주소<span class="text-muted">&nbsp;(필수 아님)</span></label>
            <input type="text" id="sample3_detailAddress" class="form-control" placeholder="상세주소를 입력해주세요.">
          </div>

          <!-- 참고항목 입력 필드 (숨김 처리) -->
          <input type="text" id="sample3_extraAddress" class="form-control" placeholder="참고항목" style="display:none;">

          <hr class="mb-4">
          <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="agreement" required>
            <label class="custom-control-label" for="agreement">개인정보 수집 및 이용에 동의합니다.</label>
          </div>
          <div class="mb-4"></div>
          <button class="btn btn-primary btn-lg btn-block" type="submit">가입 완료</button>
        </form>
      </div>
    </div>
    <footer class="my-3 text-center text-small">
      <p class="mb-1"> </p>
    </footer>
  </div>

  <!-- 우편번호 찾기 iframe -->
  <div id="wrap">
    <img src="//t1.daumcdn.net/postcode/resource/images/close.png" id="btnFoldWrap" onclick="foldDaumPostcode()" alt="접기 버튼">
  </div>

  <!-- 다음 주소 API 스크립트 -->
  <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
  <script>
    // 우편번호 찾기 iframe을 넣을 element
    var element_wrap = document.getElementById('wrap');

    // iframe을 닫는 함수
    function foldDaumPostcode() {
      element_wrap.style.display = 'none';
    }

    // 우편번호 찾기 실행 함수
    function sample3_execDaumPostcode() {
      // 현재 스크롤 위치 저장
      var currentScroll = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
      new daum.Postcode({
        oncomplete: function(data) {
          var addr = ''; // 주소 변수
          var extraAddr = ''; // 참고항목 변수

          // 선택한 주소 타입에 따라 주소 값을 가져옴
          if (data.userSelectedType === 'R') {
            addr = data.roadAddress; // 도로명 주소
          } else {
            addr = data.jibunAddress; // 지번 주소
          }

          // 도로명 주소일 경우 참고항목 조합
          if (data.userSelectedType === 'R') {
            if (data.bname !== '' && /[동|로|가]$/g.test(data.bname)) {
              extraAddr += data.bname; // 법정동
            }
            if (data.buildingName !== '' && data.apartment === 'Y') {
              extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName); // 건물명
            }
            if (extraAddr !== '') {
              extraAddr = ' (' + extraAddr + ')'; // 최종 문자열 조합
            }
            document.getElementById("sample3_extraAddress").value = extraAddr; // 참고항목 필드에 넣기
          } else {
            document.getElementById("sample3_extraAddress").value = ''; // 지번 주소일 경우 참고항목 초기화
          }

          // 우편번호와 주소 정보를 입력 필드에 넣기
          document.getElementById('sample3_postcode').value = data.zonecode;
          document.getElementById("sample3_address").value = addr;

          // 상세주소 필드로 포커스 이동
          document.getElementById("sample3_detailAddress").focus();

          // iframe을 닫기
          element_wrap.style.display = 'none';

          // 스크롤 위치 복원
          document.body.scrollTop = currentScroll;
        },
        onresize: function(size) {
          element_wrap.style.height = size.height + 'px'; // iframe 크기 조정
        },
        width: '100%', // iframe 너비
        height: '100%' // iframe 높이
      }).embed(element_wrap);
      
      // iframe을 보이게 함
      element_wrap.style.display = 'block';
    }
  </script>
</body>

</html>
이코드를 활용해서 회원가입 환경을 만들려면
mysql을 사용할꺼야