php - 회원가입 약관동의

이태현·2025년 6월 30일

Web 개발

목록 보기

5/53

출처

유튜브 - 왕초보 홈페이지만들기

https://www.youtube.com/watch?v=hLoLjhEP13k&list=PLTb3qGCzYjS1sqYn00_g6t5W1Ikhn_dC4
해당 영상을 참고하여 클론코딩하였습니다. 시리즈로 영상이 제작되어서 따라하면서 공부하기 좋다고 판단하였습니다. php를 활용하여 웹페이지를 제작하시는 입문자분들께 추천드립니다.

stipulation.php - 약관동의

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js" integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="css/stipulation.css">
  <title>약관</title>
</head>
<body>
  <div class="container">
    <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
      <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
        <img src="images/logo.svg" alt="" class="me-2">
        <span class="fs-4">해커들의 놀이터</span>
      </a>
      <ul class="nav nav-pills">
        <li class="nav-item">
          <a href="#" class="nav-link active" aria-current="page">Home</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">소개</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">회원가입</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">게시판</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">로그인</a>
        </li>
      </ul>
    </header>
    <main>
      <h1 class="text-center mt-5">회원 약관 및 개인정보 취급방침 동의</h1>
      <h4>회원 약관</h4>
      <textarea name="" id="" class="form-control" rows="10">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat perspiciatis sit doloremque numquam pariatur quam, cum quis sed? Earum voluptate dolorum, repudiandae quae accusamus ea laudantium facilis at, id error fugit voluptatum nam enim quam doloremque rem! Iure officiis doloremque qui porro odit, esse officia fugiat. Hic soluta sed ipsam expedita! Fuga at accusantium vero excepturi obcaecati fugiat earum cupiditate, iste ipsam? Corrupti corporis amet rerum facilis, ullam dolorum modi repellendus quam perferendis et eveniet veritatis asperiores velit magni incidunt officia, quod veniam. Eum sit perferendis laudantium maxime sint exercitationem officia. Ipsum cupiditate dicta sed doloremque porro quidem, iure nisi accusantium rem quisquam ab dolorem! Unde, error commodi. Velit, vitae porro, at soluta maiores quis numquam officia neque corporis assumenda reiciendis. Corporis animi incidunt deserunt delectus doloremque, maiores laborum id necessitatibus vel blanditiis corrupti laudantium, cupiditate possimus quidem dolores molestias voluptatem at deleniti. Harum distinctio vero dolore dolorum sequi ex consectetur voluptatibus velit quis necessitatibus soluta facilis incidunt tempora repellat voluptates cumque iusto sapiente aspernatur voluptatem optio, consequuntur atque ea! Illo eaque officiis recusandae, nobis quis laboriosam, reiciendis rerum ut nihil tempore soluta odio quas maiores ipsam provident. Accusantium vel, impedit asperiores repellendus recusandae hic sunt eveniet ut a cupiditate! In, ducimus aperiam. Ipsam pariatur cupiditate fuga, dolor necessitatibus inventore provident possimus at laudantium quibusdam ut sed obcaecati sit, adipisci eveniet officiis similique neque animi veniam! Dolorem provident aut voluptate culpa harum rerum autem commodi facere accusantium delectus qui vel tempore assumenda sequi, corrupti sapiente corporis vero dolorum doloribus perferendis officiis recusandae voluptas similique. At rem cupiditate similique ullam molestias. Porro, totam commodi? Atque, maiores laudantium? Rerum voluptatem obcaecati placeat deserunt recusandae quae ratione dolores minima nihil enim libero vel nostrum soluta veniam, sit exercitationem fugiat eius accusamus doloribus! Quasi aliquid molestiae similique voluptatem eligendi, veritatis nemo voluptates architecto ratione.</textarea>
      <div class="form-check mt-2">
        <input class="form-check-input" type="checkbox" value="" id="checkDefault">
        <label class="form-check-label" for="checkDefault">
          위 약관의 동의 하시겠습니까?
        </label>
      </div>
      <h4 class="mt-5">개인정보 취급방침</h4>
      <textarea name="" id="" class="form-control" rows="10">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed delectus quam fuga et, quo corrupti cupiditate esse deserunt cum adipisci eos ex est praesentium at enim quia ducimus! Cupiditate dolore aperiam enim asperiores quas possimus est ratione eligendi odio recusandae illo soluta, sapiente delectus explicabo quidem commodi amet molestiae dolorum ullam veritatis beatae provident nostrum expedita. Quae, molestiae dolorem. Vero perspiciatis dolorem magnam, fugiat ratione quae reiciendis obcaecati, modi blanditiis velit quidem culpa illum dignissimos nisi quo explicabo quibusdam illo distinctio natus a aut. Ullam eligendi at beatae earum fuga, saepe tenetur quia nesciunt cum, aliquam dolore ea! Omnis earum beatae reiciendis sequi deserunt atque temporibus nostrum vel repellat doloribus nemo nisi deleniti, unde explicabo illum ab laboriosam non dolores! Officia optio, doloribus suscipit eligendi in nisi modi quibusdam perferendis. In sapiente dignissimos earum iste voluptatum distinctio ab quis, debitis totam culpa. Exercitationem ipsum excepturi quos ea, voluptas, at vel aliquid debitis facere optio, fugiat itaque. Dignissimos ducimus necessitatibus adipisci provident explicabo tempora eaque cumque, porro quos repellat? Nesciunt fuga quis asperiores, necessitatibus ab inventore fugit quisquam accusamus veniam maxime et illum alias labore voluptatum aliquid doloribus corporis cum veritatis deleniti pariatur expedita modi? Asperiores incidunt esse pariatur ut vero neque exercitationem voluptatem, ullam sapiente? Incidunt soluta quia, libero, accusantium quo asperiores quibusdam pariatur est a expedita sit explicabo debitis consequuntur ipsam magni ipsum sunt ut temporibus nam consequatur. Accusantium consectetur dolores ullam reiciendis laborum odit minima quisquam excepturi? Excepturi facilis deleniti quas quos totam. Dignissimos at, veniam odio voluptas facere cumque corporis odit optio rem? Dicta maxime iure minus inventore expedita voluptatem voluptas tenetur adipisci, facilis unde sint enim, tempora dolor ducimus, quae optio illum omnis aliquid deserunt! Veniam, ex ducimus. Error dolores voluptates consequatur dignissimos nobis debitis molestiae perspiciatis earum tempore possimus. Exercitationem beatae in aut blanditiis neque?</textarea>
      <div class="form-check mt-2">
        <input class="form-check-input" type="checkbox" value="" id="checkDefault">
        <label class="form-check-label" for="checkDefault">
          위 개인정보 취급방침에 동의하시겠습니까?
        </label>
      </div>
      <div class="mt-4 d-flex justify-content-center gap-2">
        <button class="btn btn-primary">회원가입</button>
        <button class="btn btn-secondary">취소</button>
      </div>
    </main>
  </div>
  <footer class="footer bg-primary py-3 mt-5">
    <div class="container d-flex gap-2">
      <img src="images/logo.svg" alt="" class="mt-2">
      <div class="d-flex flex-column mt-2">
        <span class="text-bg-primary">서울시 OO구 OO로 1번지 (우)123456</span>
        <span class="text-bg-primary">대표 : 이태현</span>
        <span class="text-bg-primary">Tel : 02-123-4567 Fax : 02-1111-2222</span>
      </div>
    </div>
  </footer>
</body>
</html>

코드 요약

1. bootstrap에서 js, css를 사용하기 위해서 해당 bootstrap사이트에서 코드를 가져옵니다.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js" integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q" crossorigin="anonymous"></script>

헤더부분을 꾸며주기 위해서 bootstrap에서 해당 헤더를 가져옵니다. 저는 최상단에 있는 헤더 부분을 가져왔습니다.

※ 참고
bootstrap사이트 -> 상단메뉴에 Examples 클릭 -> 아래쪽 Snippets에서 Headers부분 클릭 ->원하는 헤더 마우스 우측 클릭 후 소스보기 -> 해당 헤더 복사

※ bootstrap 간단한 사용법

필자도 css를 공부하면서 디자인쪽에 너무 재능이 없어서 힘들었는데 다행히 관련 css를 제공해주는 기능들이 있어서 소개하려합니다.

-모든 내용을 설명하지는 못하겠지만 어느정도 이런 느낌이다 라고 알아주시면 되겠고 더 필요하시다면 해당 문헌을 찾아보시면 되겠습니다.
참고자료 https://getbootstrap.com/docs/5.0/components/buttons/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q"
    crossorigin="anonymous"></script>
  <title>Document</title>
</head>
<body>
</body>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
</html>

button태그 안에 class를 보면 class="btn btn-primary" 같이 나와있습니다. bootstrap에서는 class에다가 bootstrap에서 제공하는 기능을 사용합니다. btn -> button의 줄임말이고 btn-primary는 해당 버튼에 primary 라는 색깔을 부여해준다 라고 생각하면 쉽습니다. 나머지 기능들도 비슷합니다. 처음에는 익숙하지 않아서 필자도 많이 틀렸는데 사용하는것만 사용하다보니 금방 쉽게 사용할 수 있게 되었습니다.

2. 가지고 온 헤더를 복사해서 넣어준 후 입맛에 맞게 코드를 수정해줍니다.

<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
      <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
        <img src="images/logo.svg" alt="" class="me-2">
        <span class="fs-4">해커들의 놀이터</span>
      </a>
      <ul class="nav nav-pills">
        <li class="nav-item">
          <a href="#" class="nav-link active" aria-current="page">Home</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">소개</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">회원가입</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">게시판</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">로그인</a>
        </li>
      </ul>
    </header>

flex-wrap : 요소안의 내용이 길면 줄바꿈이 됩니다.
하지만, 요소들의 배열 자체는 그대로 유지가 되고 그 안의 내용만 줄바꿈이 됩니다.
align-items-center : 수직을 기준으로 가운데 정렬합니다.
border-bottom : 해당 요소에 아래쪽 선을 그어줍니다.
py-1~5 : 패딩(padding)에 숫자만큼 top, bottom(y축) 간격을 둡니다.
mb-1~5 : 마진(margin)에 bottom 부분으로부터 숫자만큼 간격을 둡니다.
fs-1~5 : 폰트(font)사이즈를 숫자만큼 크기를 부여합니다.

Before

After

3. 메인 화면을 구성해줍니다.

    <main>
      <h1 class="text-center mt-5">회원 약관 및 개인정보 취급방침 동의</h1>
      <h4>회원 약관</h4>
      <textarea name="" id="" class="form-control" rows="10">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat perspiciatis sit doloremque numquam pariatur quam, cum quis sed? Earum voluptate dolorum, repudiandae quae accusamus ea laudantium facilis at, id error fugit voluptatum nam enim quam doloremque rem! Iure officiis doloremque qui porro odit, esse officia fugiat. Hic soluta sed ipsam expedita! Fuga at accusantium vero excepturi obcaecati fugiat earum cupiditate, iste ipsam? Corrupti corporis amet rerum facilis, ullam dolorum modi repellendus quam perferendis et eveniet veritatis asperiores velit magni incidunt officia, quod veniam. Eum sit perferendis laudantium maxime sint exercitationem officia. Ipsum cupiditate dicta sed doloremque porro quidem, iure nisi accusantium rem quisquam ab dolorem! Unde, error commodi. Velit, vitae porro, at soluta maiores quis numquam officia neque corporis assumenda reiciendis. Corporis animi incidunt deserunt delectus doloremque, maiores laborum id necessitatibus vel blanditiis corrupti laudantium, cupiditate possimus quidem dolores molestias voluptatem at deleniti. Harum distinctio vero dolore dolorum sequi ex consectetur voluptatibus velit quis necessitatibus soluta facilis incidunt tempora repellat voluptates cumque iusto sapiente aspernatur voluptatem optio, consequuntur atque ea! Illo eaque officiis recusandae, nobis quis laboriosam, reiciendis rerum ut nihil tempore soluta odio quas maiores ipsam provident. Accusantium vel, impedit asperiores repellendus recusandae hic sunt eveniet ut a cupiditate! In, ducimus aperiam. Ipsam pariatur cupiditate fuga, dolor necessitatibus inventore provident possimus at laudantium quibusdam ut sed obcaecati sit, adipisci eveniet officiis similique neque animi veniam! Dolorem provident aut voluptate culpa harum rerum autem commodi facere accusantium delectus qui vel tempore assumenda sequi, corrupti sapiente corporis vero dolorum doloribus perferendis officiis recusandae voluptas similique. At rem cupiditate similique ullam molestias. Porro, totam commodi? Atque, maiores laudantium? Rerum voluptatem obcaecati placeat deserunt recusandae quae ratione dolores minima nihil enim libero vel nostrum soluta veniam, sit exercitationem fugiat eius accusamus doloribus! Quasi aliquid molestiae similique voluptatem eligendi, veritatis nemo voluptates architecto ratione.</textarea>
      <div class="form-check mt-2">
        <input class="form-check-input" type="checkbox" value="" id="checkDefault">
        <label class="form-check-label" for="checkDefault">
          위 약관의 동의 하시겠습니까?
        </label>
      </div>

필자는 textarea태그 안에 lorem300을 입력해 주었습니다. 이 부분은 나중에 해당 법률을 넣어주면 되겠습니다. lorem은 더미 텍스트라고 생각해 주시면 되겠습니다.

<div class="form-check mt-2">
     <input class="form-check-input" type="checkbox" value="" id="checkDefault">
     <label class="form-check-label" for="checkDefault">
       위 개인정보 취급방침에 동의하시겠습니까?
     </label>
   </div>

check 박스 부분은 bootstrap에서 가져왔습니다.

4. 개인정보 취급방침도 위와 같은 방식으로 만들어 줍니다.

      <h4 class="mt-5">개인정보 취급방침</h4>
      <textarea name="" id="" class="form-control" rows="10">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed delectus quam fuga et, quo corrupti cupiditate esse deserunt cum adipisci eos ex est praesentium at enim quia ducimus! Cupiditate dolore aperiam enim asperiores quas possimus est ratione eligendi odio recusandae illo soluta, sapiente delectus explicabo quidem commodi amet molestiae dolorum ullam veritatis beatae provident nostrum expedita. Quae, molestiae dolorem. Vero perspiciatis dolorem magnam, fugiat ratione quae reiciendis obcaecati, modi blanditiis velit quidem culpa illum dignissimos nisi quo explicabo quibusdam illo distinctio natus a aut. Ullam eligendi at beatae earum fuga, saepe tenetur quia nesciunt cum, aliquam dolore ea! Omnis earum beatae reiciendis sequi deserunt atque temporibus nostrum vel repellat doloribus nemo nisi deleniti, unde explicabo illum ab laboriosam non dolores! Officia optio, doloribus suscipit eligendi in nisi modi quibusdam perferendis. In sapiente dignissimos earum iste voluptatum distinctio ab quis, debitis totam culpa. Exercitationem ipsum excepturi quos ea, voluptas, at vel aliquid debitis facere optio, fugiat itaque. Dignissimos ducimus necessitatibus adipisci provident explicabo tempora eaque cumque, porro quos repellat? Nesciunt fuga quis asperiores, necessitatibus ab inventore fugit quisquam accusamus veniam maxime et illum alias labore voluptatum aliquid doloribus corporis cum veritatis deleniti pariatur expedita modi? Asperiores incidunt esse pariatur ut vero neque exercitationem voluptatem, ullam sapiente? Incidunt soluta quia, libero, accusantium quo asperiores quibusdam pariatur est a expedita sit explicabo debitis consequuntur ipsam magni ipsum sunt ut temporibus nam consequatur. Accusantium consectetur dolores ullam reiciendis laborum odit minima quisquam excepturi? Excepturi facilis deleniti quas quos totam. Dignissimos at, veniam odio voluptas facere cumque corporis odit optio rem? Dicta maxime iure minus inventore expedita voluptatem voluptas tenetur adipisci, facilis unde sint enim, tempora dolor ducimus, quae optio illum omnis aliquid deserunt! Veniam, ex ducimus. Error dolores voluptates consequatur dignissimos nobis debitis molestiae perspiciatis earum tempore possimus. Exercitationem beatae in aut blanditiis neque?</textarea>
      <div class="form-check mt-2">
        <input class="form-check-input" type="checkbox" value="" id="checkDefault">
        <label class="form-check-label" for="checkDefault">
          위 개인정보 취급방침에 동의하시겠습니까?
        </label>
      </div>
      <div class="mt-4 d-flex justify-content-center gap-2">
        <button class="btn btn-primary">회원가입</button>
        <button class="btn btn-secondary">취소</button>
      </div>

justify-content-center : 수직을 기준으로 자식 요소들을 가운데 정렬 시켜준다
gap-1~5 : 요소들 사이에 간격을 숫자만큼 둡니다.

페이지 맨 밑에 이와같이 간략한 해당 사이트에 운영자 대표 소개글이 있습니다.

<div class="mt-4 d-flex justify-content-center gap-2">
        <button class="btn btn-primary">회원가입</button>
        <button class="btn btn-secondary">취소</button>
      </div>
    </main>
  </div>
  <footer class="footer bg-primary py-3 mt-5">
    <div class="container d-flex gap-2">
      <img src="images/logo.svg" alt="" class="mt-2">
      <div class="d-flex flex-column mt-2">
        <span class="text-bg-primary">서울시 OO구 OO로 1번지 (우)123456</span>
        <span class="text-bg-primary">대표 : 이태현</span>
        <span class="text-bg-primary">Tel : 02-123-4567 Fax : 02-1111-2222</span>
      </div>
    </div>
  </footer>

mt-1~5 : margin-top 에서 숫자만큼 간격을 둡니다.
d-flex : block요소들을 in-line요소로 바꿔준다.
flex-column : 수직방향으로 설정한다.

마무리

거의 한 달 동안 글을 못 올렸습니다.

여러가지를 공부하다보니 시간이 많이 없었네요.

조금씩 다시 시작해 보겠습니다.

긴 글 봐주셔서 감사합니다.

이태현

이해하고 분석하고 지배한다

이전 포스트

PHP - Session 활용하여 로그인, 로그아웃 구현

다음 포스트