네이버 form01

회원가입폼

by David Oh

HTML

<body>
    <div id="body">
      <div id="logo">
        <a class="naver_logo" href="http://www.naver.com">
          <img id="naver_logo" src="http://logoproject.naver.com/img/img_about.gif" alt="NAVER">
        </a>
      </div>
      <div id="agreement_form">
        <div class="agree" id="all_agree">
          이용약관, 개인정보 수집 및 이용,<br>
          위치정보 이용약관(선택), 프로모션 안내<br>
          메일 수신(선택)에 모두 동의합니다.
          <input type="checkbox" id="check_all" class="check_button">
        </div>
        <div class="agree" id="use_agree">
          <div class="agree_title" id="use_agree_title">
            네이버 이용약관 동의<span class="mandatory">(필수)</span>
            <input type="checkbox" id="check_use" class="check_button">
          </div>
          <div class="agree_scroll" id="use_agree_scroll">
            <div class="agree_scroll_box" id="box1">
              <div>
                <h3 class="agreement_header">
                  제 1 조 (목적)
                </h3>
                <article class="agreement_article">
                  이 약관은 네이버 주식회사 ("회사" 또는 "네이버")가 제공하는 네이버 및 네이버 관련 제반 서비스의 이용과 관련하여 회사와 회원과의 권리, 의무 및 책임사항, 기타 필요한 사항을 규정함을 목적으로 합니다.
                </article>
              </div>
              <div>
                <h3 class="agreement_header">
                  제 2 조 (정의)
                </h3>
                <article class="agreement_article">
                  이 약관에서 사용하는 용어의 정의는 다음과 같습니다.
                  <ol class="agreement_list">
                    <li>
                      ①"서비스"라 함은 구현되는 단말기(divC, TV, 휴대형단말기 등의 각종 유무선 장치를 포함)와 상관없이 "회원"이 이용할 수 있는 네이버 및 네이버 관련 제반 서비스를 의미합니다.
                    </li>
                    <li>
                      ②"회원"이라 함은 회사의 "서비스"에 접속하여 이 약관에 따라 "회사"와 이용계약을 체결하고 "회사"가 제공하는 "서비스"를 이용하는 고객을 말합니다.
                    </li>
                    <li>
                      ③"아이디(ID)"라 함은 "회원"의 식별과 "서비스" 이용을 위하여 "회원"이 정하고 "회사"가 승인하는 문자와 숫자의 조합을 의미합니다.
                    </li>
                    <li>
                ...

CSS

body {
  background-color: #f4f4f4;
}

ol, ul {
  list-style: none;
}

#body #logo {
  width: 500px;
  margin: 50px auto;
}

#naver_logo {
  width: 224px;
  padding: 30px 138px 0px 138px;
}

#agreement_form{
  width: 500px;
  margin: 5px auto;
  border: 2.2px solid #ededed;
  background-color: white;
}

#agreement_form .agree {
  padding: 10px;
  font-family: "돋움"
}

#all_agree {
  font-size: 15px;
  font-weight: bold;
  border-bottom: 0.5px solid #f2f2f2;
}

.agree_title {
  margin: 5px 0px;
  font-size: 15px;
  font-weight: bold;
  padding: 0 0 5px 0;
}

.agree_scroll {
  margin: 5px 0px;
  background-color: #f4f4f4;
}

.agreement_header {
  font-size: 12px;
  font-weight: bold;
}

.agreement_article {
  font-size: 12px;
  font-weight: normal;
}

.agree_scroll_box {
  height: 100px;
  overflow-y: scroll;
}

#consensus {
  width: 500px;
  margin: 0 auto;
  overflow: hidden;
}

.consensus_button {
  float: left;
  width: 48%;
  height: 50px;
  text-align: center;
  line-height: 3;
  margin: 0 5px;
}

#consensus_yes {
  display: block;
  background-color: #1fbc02;
  color: white;
  text-decoration: none;
  font-weight: bold;
}

#consensus_no {
  display: block;
  background-color: white;
  color: grey;
  text-decoration: none;
  font-weight: bold;
}

#group {
  width: 500px;
  margin: 10px auto;
}

.to_group {
  font-size: 12px;
  font-family: "돋음";
  color: grey;
  text-align: center;
  margin-bottom: 50px;
}

.mandatory {
  font-size: 12px;
  color: #1fbc02;
}

.optional {
  font-size: 12px;
  color: lightgrey;
}

.check_button {
  background-image: url("https://static.nid.naver.com/images/join/pc/ico_check_off.gif") no-repeat;
  float: right;
}