<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>네이버 : 회원가입</title>
<link href = "16.네이버회원가입.css" rel = "stylesheet">
</head>
<body>
<div id = "wrap"> <!-- 전체 레이아웃 -->
<div id = "header"> <!-- 헤더 -->
<div class = "logo"> <!-- 헤더 부분의 내용 부분 : 가운데 정렬을 위한... -->
<a href = "htttps://www.naver.com"> <!-- 로고 클릭시 naver로 이동 -->
<img src = "../Img/naverlogo.png">
</a>
</div>
</div>
<form id = "join_form"> <!-- 본문 ; 저장할려고 form을 씀 -->
<div> <!-- 아이디, 비밀번호 비밀번호 확인 구역 -->
<!-- 1개 입력창 -->
<h3> 아이디 </h3>
<span class = "signup_input">
<input class = "input_info" type = "text">
<span class = "signup_at">@naver.com</span>
</span>
<!-- 1개 입력창 -->
<h3> 비밀번호 </h3>
<span class = "signup_input">
<input class = "input_info" type = "password">
<span class = "signup_lock"></span>
</span>
<!-- 1개 입력창 -->
<h3> 비밀번호 확인 </h3>
<span class = "signup_input">
<input class = "input_info" type = "password">
<span class = "signup_lock"></span>
</span>
</div>
<div> <!-- 이름, 생년월일, 성별, 이메일 -->
<h3>이름</h3>
<span class = "signup_input">
<input class = "input_info" type = "text">
</span>
<h3>생년월일</h3>
<span class = "birthbox"> <!-- 여기 -->
<span class = "signup_input" id = "birth_y">
<input class = "input_info" type = "text" placeholder="년(4자)">
</span>
<span class = "signup_input" id = "birth_m">
<select class = "input_info">
<option>월</option><option>1</option><option>2</option><option>3</option>
<option>4</option><option>5</option><option>6</option><option>7</option>
<option>8</option><option>9</option><option>10</option><option>11</option>
<option>12</option>
</select>
</span>
<span class = "signup_input" id = "birth_d">
<input class = "input_info" type = "text" placeholder="일">
</span>
</span> <!-- 여기 -->
<h3>성별</h3>
<span class = "signup_input">
<select class ="input_info">
<option>성별</option><option>남자</option><option>여자</option><option>선택 안함</option>
</select>
</span>
<h3>본인 확인 이메일<span id ="choice_txt">(선택)</span></h3>
<span class = "signup_input">
<input class = "input_info" type = "text" placeholder="선택입력">
</span>
</div>
<div class = "tele"> <!-- 휴대 전화 -->
<h3>휴대전화</h3>
<span class = "signup_input" id = "tele_group">
<select class ="input_info">
<option>대한민국 +82</option>
<option>일본 +81</option>
<option>미국/캐나다 +1</option>
<option>독일 +49</option>
<option>영국 +44</option>
</select>
</span>
<span class = "phone_box">
<span class = "signup_input" id = "input_phone">
<input class = "input_info" type = "text" placeholder="전화번호입력">
</span>
<input class = "btn" type ="button" value = "인증번호 받기">
</span>
<span class = "signup_input" id = "authbox">
<!-- readonly : 읽기만! -->
<input readonly="readonly" id = "input_auth" class = "input_info" type = "text" placeholder="인증번호 입력하세요">
</span>
</div> <!-- 휴대 전화 end -->
<div>
<input class = "signup_btn" type ="button" value = "가입하기">
</div>
</form>
<div id = "footer"> <!-- 푸터 -->
<div class = "footer_contents">
<div class ="ft_up">
<div>
<a href = "#">이용약관</a><span id = "div_txt">|</span>
<a href = "#"><span>개인정보처리방침</span></a><span id = "div_txt">|</span>
<a href = "#">책임의 한계와 법적고지</a><span id = "div_txt">|</span>
<a href = "#">회원정보 고객센터</a>
</div>
</div>
<div class ="ft_down"> <!-- footer 하단 내용 start -->
<img src = "../Img/naverlogo.png"/>
<p>Copyright NAVER Corp. All Rights Reserved.</p>
</div> <!-- footer 하단 내용 end -->
</div> <!-- footer_contents end -->
</div> <!-- footer end -->
</div> <!-- wrap end -->
</body>
</html>
@charset "UTF-8";
/* 아이디가 더 우선 ! 클래스보다 */
/*-----------------------------공통---------------------------*/
a{color : black; text-decoration: none;}
*{ font-family: "맑은 고딕"; }
body{
background-color: #F5F6F7; /*전체 배경 색 */
}
/*input 입력창에 포커스를 주는게 기본 값.*/
*:focus{outline: none;} /*input입력창에 마우스 커서[포커스] 생겼을 때 이벤트*/
li{ list-style-type: none;} /*글머리 제거*/
/*---------------------------헤더-----------------------------*/
#header .logo{ /*로고 박스권*/
width: 460px; /*로고 가로 사이즈*/
/*가운데 정렬*/
margin : 0 auto;
/* text-align: center; */
/*가운데 정렬 flex : 하위 요소한테 적용하는 것 */
display: flex; /*하위 요소를 가운데 정렬 */
justify-content: center;
}
.logo img{
height: 50px; /* 사진 높이 사이즈*/
margin: 40px 0px; /*위 아래 여백 40px*/
padding : 20px;
}
/*---------------------------본문-----------------------------*/
h3{
text-align: left;
font-size: 14px;
font-family : "돋움";
margin-bottom: 10px;
}
#join_form{
width: 460px;
margin : 0 auto;
}
.signup_input{
border: solid 1px #DADADA; /*input, span 의 테두리*/
background-color: white;
padding : 10px;
display: flex; /*사이즈가 넘쳐도 맞춰서 가로배치함.*/
align-items: center;
/*세로 정렬*/
}
.input_info{
border : none; /*input에 테두리 지움*/
width : 100%; /*input의 가로 사이즈 전체 -> 가로 사이즈 전체를 쓴다는 의미*/
height: 30px; /*input의 세로 사이즈 */
}
.signup_lock{
/*네이버에서 아이콘 주소를 가져와 배경으로 설정*/
background-image: url("<https://static.nid.naver.com/images/ui/join/m_icon_pw_step.png>");
width: 25px; height: 25px; /*해당 요소의 사이즈*/
background-size: 120px 75px; /*배경 사이즈 이미지를 잘라서 가져옴*/
margin-top: 4px;
}
.signup_at{
color : #8E8E8E;
}
.birthbox{
display: flex;
justify-content: space-between;
}
#birth_y, #birth_m, #birth_d{
width : 30%;
}
#birth_m{ margin : 0px 20px;}
#choice_txt{
font-size: 10px;
color : #8E8E8E;
font-weight: normal;
}
/*휴대전화 입력란, 인증 버튼 */
.phone_box{
display: flex;
justify-content: space-between;
margin : 10px 0px;
width : 100%;
}
.phone_box .btn{
background-color: #03C75A;
color: white;
border: none;
width : 120px;
margin-top : 10px;
margin-bottom : 10px;
margin-left : 10px;
font-weight: bold;
}
#input_phone{
width : 300px;
}
.tele{
margin-top: 30px;
}
.tele .signup_input{
margin : 10px 0px;
}
#input_auth{ background-color: #F5F6F7; }
#authbox{ background-color: #F5F6F7; }
.signup_btn{
width : 100%;
background-color: #03C75A;
color: white;
border: none;
margin-top: 30px;
height: 50px;
font-size: 18px;
font-weight: bold;
}
.footer_contents{ width: 460px; margin: 0 auto; text-align: center;}
.ft_up{ display: flex; justify-content: center; margin-top : 20px;}
.ft_up a{ font-size: 8px;}
.ft_up a:hover{ /*마우스를 올렸을 떄*/
color: #008329;
text-decoration: underline;
}
.ft_up span{ font-weight: bold;}
.ft_down{ display: flex; justify-content: center; margin-top: 5px; align-items: center; }
.ft_down img{
height : 20px;
padding : 10px;
}
.ft_down p{font-size: 5px;}
#div_txt{ color: #9d9d9d; font-size: 5px; margin : 0px 3px;}
