본문 바로가기
예제 실습

실습) 네이버 회원가입 창

멩멩멩 2024. 6. 21. 16:49

* 스프라이트 이미지

우클릭해서 이미지 다른이름으로 저장이 안뜨면 백그라운드 이미지로 불러온거라서

우클릭 검사 - a태그 안에 아래 css - background-image 링크 들어가서 저장해준다. 

저장하면 배경이 투명하다

예제

! 인증요청 버튼은 form 태그 안에 들어가있어야한다. 그래야 서버로 전송되니깐. 

 

아이디 비밀번호에 필수입력란 required 설정
비밀번호 최소 최대문자 지정
비밀번호에 autucomplete=off 로 자동완성 해지 

 

form 안의 div들을 display: flex; flex-direction: column;으로 박스들을 위에서 아래로 나열해줬다. 

html

더보기 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>네이버 : 회원가입</title>
    <!-- css -->
    <link rel="stylesheet" href="./css/member.css" />
  </head>
  <body>
    <div class="container">
      <div class="inner_wrap">
        <header>
          <!-- 로고 -->
          <h1>
            <a href="http://naver.com">로고</a>
          </h1>
        </header>
        <section class="inner_con">
          <div class="text_top">
            <div class="top_area">
              <span>실명 인증된 아이디로 가입</span>
            </div>
          </div>
          <!-- 입력창 -->
          <form action="#" method="post" id="member_form" class="member">
            <!--아이디 비밀번호 이메일 묶어주는 div-->
            <div class="user_list">
              <div class="user_info">
                <!-- 아이디 -->
                <label for="user_id" class="user_icon">
                  <input
                    type="text"
                    name="user_id"
                    id="user_id"
                    placeholder="아이디"
                    required
                  />
                  <span class="grey">@naver.com</span>
                </label>
              </div>
              <!-- 비밀번호 -->
              <div class="user_info">
                <label for="user_pw" class="user_password">
                  <input
                    type="password"
                    name="user_pw"
                    id="user_pw"
                    placeholder="비밀번호"
                    minlength="8"
                    maxlength="16"
                    required
                  />
                </label>
              </div>
              <!-- 이메일 -->
              <div class="user_info">
                <label for="user_mail" class="user_mail">
                  <input
                    type="email"
                    name="user_mail"
                    id="user_mail"
                    placeholder="[선택]이메일주소 (비밀번호 찾기 등 본인확인용)"
                  />
                </label>
              </div>
            </div>
            <div class="user_list">
              <!-- 이름-->
              <div class="user_info">
                <label for="user_name" class="user_icon">
                  <input
                    type="text"
                    name="user_name"
                    id="user_name"
                    placeholder="이름"
                    required
                  />
                </label>
              </div>
              <!-- 생년월일 -->
              <div class="user_info">
                <label for="user_birth" class="user_icon4">
                  <input
                    type="datetime"
                    name="user_birth"
                    id="user_birth"
                    placeholder="생년월일 8자리"
                    minlength="8"
                    maxlength="8"
                    required
                  />
                </label>
              </div>
              <!-- 통신사선택 -->
              <div class="user_info">
                <label for="agency" class="user_icon5">
                  <select name="agency" id="agency" required>
                    <option>통신사 선택</option>
                    <option>SKT</option>
                    <option>KT</option>
                    <option>LG U+</option>
                    <option>SKT 알뜰폰</option>
                    <option>KT 알뜰폰</option>
                    <option>LG U+ 알뜰폰</option>
                  </select>
                </label>
              </div>
              <!-- 성별선택 -->
              <div class="user_info info_btn">
                <!--공백으로 구분하여 이름을 여러 개 지을 수 있다.(위 클래스)-->
                <div class="btn_group">
                  <label for="gender">
                    <button type="button" value="male">남자</button>
                    <button type="button" value="female">여자</button>
                  </label>
                </div>
                <!-- 국적 선택 -->
                <div class="btn_group">
                  <label for="foreigner">
                    <button type="button" value="0">내국인</button>
                    <button type="button" value="1">외국인</button>
                  </label>
                </div>
              </div>
              <!-- 휴대전화번호 -->
              <div class="user_info">
                <label for="phone" class="user_icon6">
                  <input
                    type="tel"
                    name="phone"
                    id="phone"
                    placeholder="휴대전화번호 (-제외)"
                    maxlength="11"
                    required
                  />
                </label>
              </div>
            </div>
            <!-- 약관전체동의 -->
            <div class="user_list">
              <div class="user_info">
                <label for="user_check" class="user_icon7">
                  <input
                    type="checkbox"
                    name="user_check"
                    id="user_check"
                    required
                  />
                  <span class="green">[필수]</span>
                  <strong>인증 약관 전체동의</strong>
                </label>
              </div>
            </div>
            <!-- 회원가입 -->
            <button class="submit_btn" type="submit">회원가입</button>
            <!--버튼 타입 안쓰면 기본값submit이다. -->
          </form>
        </section>
      </div>
    </div>
  </body>
</html>

css

더보기 
@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/jgthms/minireset.css@master/minireset.min.css");

a {
  text-decoration: none;
}
.container {
  width: 100%;
  height: 100vh; /*스크롤이 안생기는 최대 넓이*/

  overflow: hidden; /*스크롤 안생기게 */
}
.inner_wrap {
  width: 500px;
  height: 100vh;
  background-color: #fff;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 16px 20px;
  overflow: hidden;
}
header {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  /* background-color: lightcoral; */
  padding-bottom: 16px;
}
h1 {
  width: 94px;
  height: 18px;
  /* background-color: lightblue; */
}
h1 > a {
  display: block; /*인라인속성이라 넓이 가지기 위해 블록으로 바꿔줌*/
  width: 100%;
  height: 100%;
  font-size: 0;
  background-image: url(./../img/sprite.png);
  background-repeat: no-repeat;
  background-size: 372px 326px;
  background-position: 0px -244px;
}
/* 컨텐츠 영역 */
.inner_con {
  width: 100%;
  height: 94%;
  box-sizing: border-box;

  overflow: hidden;
}
.text_top {
  width: 100%;
  height: 20px;
  font-size: 13px;
  color: #888;
  line-height: 20px;
  letter-spacing: -0.5px; /*자간*/
  margin-bottom: 10px;
}
.top_area {
  width: fit-content;
  height: 100%;
  position: relative;
  top: 0;
  left: -28px; /*가상선택자 아이콘이라 뒤에 짤려서 앞으로 끌어당겨줬다*/
  float: right;
}
.top_area span::after {
  content: "체크아이콘";
  font-size: 0;
  display: inline-block; /*인라인 속성이라 인라인블럭으로 설정해서 넓이를 가지면서 가로로 출력되게 한다*/
  width: 20px;
  height: 20px;
  position: absolute; /*글자랑 위치선이 안맞아서 부모박스에 position: relative;를 주고 여기에 position: absolute; 적용*/
  margin-left: 8px;
  background-image: url(./../img/sprite.png);
  background-size: 372px 326px;
  background-position: -343px -269px;
  background-repeat: no-repeat;
}
/* 폼 양식 */
input {
  outline: none; /*클릭하면 테두리 진해지는 거 없애기*/
  width: 90%;
  border: none;
  font-size: 16px;
}
.member {
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  position: relative;
}
.user_list {
  width: 100%;
  height: fit-content; /*자식에 알아서 맞추겠다*/
  border: 1px solid #c6c6c6;
  box-sizing: border-box; /*border을 박스 안으로 넣어주기 위해서*/
  border-radius: 8px;
}
.user_info {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #c6c6c6;
  box-sizing: border-box;
  padding: 12px 10px 11px 40px;
  position: relative;
}
.user_info label {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
}
.user_info:last-child {
  border-bottom: none; /*보더가 중첩되어서 밑에 얘만 없애줬다*/
}
.user_info #user_id {
  width: 77%;
}
.grey {
  font-size: 15px;
  color: #777;
}
/*  항목 아이콘 공통 속성 */
.user_info label::before {
  width: 30px;
  height: 30px;
  display: inline-block;
  position: absolute;
  left: 5px;
  font-size: 0;
  background-image: url(./../img/sprite.png);
  background-size: 372px 326px;
  background-repeat: no-repeat;
}

.user_icon::before {
  content: "아이디";

  background-position: -342px -64px;
}
.user_password::before {
  content: "비밀번호";
  background-position: -310px 0;
}

.user_mail::before {
  content: "메일주소";
  background-position: -96px -296px;
}
.user_icon4::before {
  content: "생년월일";
  background-position: -192px -296px;
}
/* 통신사 선택 */
.user_info select {
  width: 98%;
  border: none;
  outline: none;
  font-size: 16px;
  color: #777;
}
.user_info select option {
  color: #000;
}
.user_icon5::before {
  content: "통신사";
  background-position: -224px -296px;
}
/* 성별/국적 
이름이 여러개로 되어 있을 때는 .user_info.info_btn로 띄어쓰기 없이 불러온다. .user_info면서.info_btn인 얘를 불러와라*/
.user_info.info_btn {
  width: 98%;
  height: fit-content;
  display: flex;
  column-gap: 20px;
  padding-left: 10px;
}
.btn_group {
  width: 50%;
  box-sizing: border-box;
  border: 1px solid #c6c6c6;
  border-radius: 4px;
}
.btn_group button {
  width: 50%;
  background-color: transparent; /*투명*/
  color: #777;
  font-size: 13px;
  border: none;
  padding: 6px 0;
  box-sizing: border-box;
  cursor: pointer; /*마우스 올렸을때 손가락마우스로 전환*/
}
.btn_group button:first-child {
  border-right: 1px solid #c6c6c6;
}
.user_icon6::before {
  content: "전화번호";
  background-position: -310px -128px;
}
/* 약관전체동의 */
input[type="checkbox"] {
  display: none;
}
.user_info .user_icon7::before {
  width: 22px;
  height: 22px;
  content: "필수";
  background-position: -342px -199px;
  left: 10px;
}
.user_icon7 {
  font-size: 15px;
}
/* 회원가입버튼 */
.submit_btn {
  position: absolute;
  bottom: 36px;
  width: 100%;
  height: 52px;
  background-color: #09aa5c;
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 16px;
  font-weight: bold;
  border-radius: 6px;
  line-height: 40px;
}
.green {
  color: #09aa5c;
  font-size: 15px;
  line-height: 22px;
}

'예제 실습' 카테고리의 다른 글

실습) split shire 사이트 클론 코딩  (0) 2024.06.25
실습) Google  (0) 2024.06.24
실습) table 게시판 만들기  (0) 2024.06.19
2차 메뉴가 있는 header 구성해보기  (0) 2024.06.18
1차 메뉴만 있는 Header 구성해보기  (0) 2024.06.17

'예제 실습' Related Articles

티스토리툴바