본문 바로가기
Develop/HTML_CSS

네이버화면 만들기

by jaekk 2018. 7. 6.







1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
/* commonCss.css*/
*{
    padding: 0px;
    margin: 0px;
    background-color:#F5F6F7;
    /* border: 1px solid black; */
}
#wrap {
    margin: 0 auto;
    width: 700px;
}
#header {
    margin: 0 auto;
    padding: 50px;
}
#header>img {
    margin: 0 auto;
    display: block;
}
#content {
    width: 600px;
    margin: 0 auto;
}
.allAgree,
.agreeForm {
    padding: 2%;
    margin: 0 auto;
}
#btnDiv{
    margin: 20px auto;
    padding-left:50px;
}
#footer{
    margin: 0 auto 15px auto;
    padding:10px;    
}
#btnDiv h3,#joinBtn h3{
    background-color: rgba(0,0,0,0);
}
h3 {
    display:inline;
    font-size: 18px;
    font-weight: 700;
}
h7{
    margin-left:-3px;;
    padding:1px;
    font-size:14px;
}
h7:nth-child(1){
    display:block;
    margin:0 auto 15px auto;
    margin-bottom:15px;
}
h7:nth-child(3){
    font-weight:bold
}
/*체크박스 설정*/
.chk {
    float: left;
    margin-top:6px;
    margin-right:10px;
}
.txt {
    display: block;
}
/*(필수,선택) 공통*/
.commonTxt{
    font-size:14px;
    display:inline; 
}
.etlTxt{ /*(필수)-setting*/
    color:green;            
}
.selTxt{ /*(선택)-setting*/
    color:darkgray;
}
/* textarea 태그 설정*/
textarea {
    padding: 10px;
}
/*동의,비동의 button*/
.commonbtn{
    padding: 10px 30px;
    margin-left:20px;
    width:200px;
    height:60px;
}
.commonbtn> h3, #joinBtn{
    color:white;
}
.btnAgree{
    background-color:darkgray;
}
.btnNotAgree{
    background-color:green; 
}
#footer a{
    text-decoration: none;
    color:#211C3D;
}
/* #####################neverJoin.html파일의 css 시작 ######################## */
.joinForm{
    padding: 5px;
    margin: 0 auto;
    width:500px;
}
/* defaultTextDiv 설정 */
.txtBorder{
    width:400px;
    height: 51px;
    padding: 5px 100px 0px 0px; 
    border: solid 1px #dadada;
    background: #fff;
}
/* text 박스 설정 */
.inputTxt{
    width:80%;
    height:39px;
    border:none;
    margin-left:20px;
    background: #fff;
    position:relative;
}
.txtBorder h7{
    float:right;
    margin-left:20px;
    line-height:39px;
    position:absolute;
    background-color: rgba(0,0,0,0);
    color:gray;
}
h2 {
    font-size: 16px;
    margin-bottom:10px;
}
/* 연도, 일 Border */
.birthBorder{
    display:inline;
    padding: 15px 10px ; 
    border: solid 1px #dadada;
    background: #fff;
}
/* 생년월일- 월 */
#month{
    width:100px;
    height:25px;
    margin-top:-10px;
}
/* 가입하기 버튼 */
#joinBtn{
    display:block;
    width:100%;
    height:60px;
    background-color:green;
}
.btnGender{
    margin-top:-1px;
    margin-right:-6px;
    width:48%;
    height:50px;
    border:none;
    background-color:white;
}
 
cs



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!-- naverJoin.html 두번째 페이지-->
<!DOCTYPE html>
<html>
 
<head>
    <title>네이버</title>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <script src="common.js"></script>
    <script src="agreeText.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <link type="text/css" rel="stylesheet" href="commonCss.css">
</head>
 
<body>
        <div id="wrap">
            <div id="header">
                <img src="m_naver_logo.png"; width="300px">
            </div>
            <div id="content">
                <div class="joinForm">
                    <h2>아이디</h2>
                    <div class="txtBorder">
                        <input type="text" class="inputTxt" id="idValue"><h7>@naver.com</h7>
                    </div>
                </div>
                <div class="joinForm">
                    <h2>비밀번호</h2>
                    <div class="txtBorder">
                        <input type="password" class="inputTxt">
                    </div>
                </div>
                <div class="joinForm">
                    <h2>비밀번호 재확인</h2>
                    <div class="txtBorder">
                        <input type="password" class="inputTxt">
                    </div>
                </div>
                <div class="joinForm">
                    <h2>이름</h2>
                    <div class="txtBorder">
                        <input type="text" class="inputTxt">
                    </div>
                </div>
                <div class="joinForm">
                    <h2>생년월일</h2>
                    <input type="text" placeholder="년(4자)" class="birthBorder" id="yearValue">
                    <div class="birthBorder" style="padding-top:-20px";>
                    <select id="month">
                        <option>월</option>
                    </select>
                </div>
                    <input type="text" placeholder="일" class="birthBorder" id="dayValue">
                </div>
                <div class="joinForm">
                    <h2>성별</h2>
                    <div class="birthBorder">
                        <button class="btnGender">남자</button>
                        <button class="btnGender">여자</button>
                    </div>
                </div>
                <div class="joinForm">
                    <h2>본인 확인 이메일</h2>
                    <div class="txtBorder">
                        <input type="text" placeholder="선택입력" class="inputTxt" id="phoneValue">
                    </div>
                </div>
                <div class="joinForm">
                    <h2>휴대전화</h2>
                    <div class="txtBorder">
                        <input type="text" placeholder="전화번호 입력" class="inputTxt">
                    </div>
                </div>
                <div class="joinForm">
                    <button id="joinBtn" class="btnNotAgree"><h3>가입하기</h3></button>
                </div>                 
            </div>
                <div id="footer"><h7>회사, 동아리 등 단체에서 사용할ID가 필요하세요?</h7><h7>단체 회원 가입</h7> | 
                <h7>개인정보처리방침</h7> | 
                <h7>책임의 한계와 법적고지</h7> | 
                <h7>회원정보 고객센터</h7>
                </div>
            </div>
        </div>
    </body>
</html>
 
cs



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!-- naverRegister.html 첫번째페이지-->
<!DOCTYPE html>
<html>
<head>
    <title>네이버</title>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <script src="common.js"></script>
    <script src="agreeText.js"></script>
    <link type="text/css" rel="stylesheet" href="commonCss.css">
</head>
<body>
    <div id="wrap">
        <div id="header">
            <img src="m_naver_logo.png"; width="300px">
        </div>
        <div id="content">
            <div class="allAgree">
                <input type="checkbox" id="chk-all" class="chk">
                <label for="chk-all"><h3 class="txt">이용약관, 개인정보 수집 및 이용, 위치정보 이용약관(선택), <br>프로모션 안내 메일 수신(선택)에 모두 동의합니다.</h3></label>
            </div>
            <div class="agreeForm">
                <input type="checkbox" class="chk estCheck">
                <h3>네이버 이용약관 동의</h3><h6 class="commonTxt etlTxt">(필수)</h6>
                <textarea rows="5" cols="70" class="agreeForm1"></textarea>
            </div>
            <div class="agreeForm">
                <input type="checkbox" class="chk estCheck">
                <h3>개인정보 수집 및 이용에 대한 안내</h3><h6 class="commonTxt etlTxt">(필수)</h6>
                <textarea rows="5" cols="70" class="agreeForm1"></textarea>
            </div>
            <div class="agreeForm">
                <input type="checkbox" class="chk">
                <h3>위치정보 이용약관 동의</h3><h6 class="commonTxt selTxt">(선택)</h6>
                <textarea rows="5" cols="70" class="agreeForm1"></textarea>
            </div>
            <div class="agreeForm">
                <input type="checkbox" class="chk">
                 <h3>이벤트 등 프로모션 알림 메일 수신</h3><h6 class="commonTxt selTxt">(선택)</h6>
                <div id="btnDiv">
                <button type="button" class="commonbtn btnNotAgree"><h3>비동의</h3></button><button type="button" id="btnAgreeId" class="commonbtn btnAgree"><h3>동의</h3></button>
                </div>
            </div>
            <div id="footer"><h7>회사, 동아리 등 단체에서 사용할ID가 필요하세요?</h7><h7>단체 회원 가입</h7> | 
            <h7>개인정보처리방침</h7> | 
            <h7>책임의 한계와 법적고지</h7> | 
            <h7>회원정보 고객센터</h7>
            </div>
        </div>
    </div>
</body>
</html>
 
cs



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
// common.js
$(document).ready(function() {
        
    /* 이용약관 Text 세팅 */
    $('.agreeForm1').each(function(index,item){
        $(item).val(agreeTxtArray[index]);
    });
    
    $('#footer > h7').each(function(index,item){
            var inner = '<a href="'+aTag[index]+'">'+item.innerText+'</a>';
            $(item).html(inner);
    });
 
    /* Check-All */
    $('#chk-all').change(function(){
        if (this.checked) {
                $('#agreeForm>input[type=checkbox]').prop('checked', true);
            } else {
                $('#agreeForm>input[type=checkbox]').prop('checked', false);
            }
    });
    
    /* 동의 버튼 클릭 - 필수체크 확인 및 페이지 이동*/
    $('#btnAgreeId').on('click',function(){
        if(($('.estCheck:checked').length)!=2){
            alert("필수 이용약관 동의해주세요");
        }else{
            location.href='naverJoin.html';
        };
    });
 
    /* 정규식 메서드 */
    $('#joinBtn').click(function(){
        /* idCheck */
        var idValue = $('#idValue').val();
        var regexp = /^[a-z0-9-_]{5,20}$/;
        if( !regexp.test(idValue) ) {
            $('<h4>5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능합니다.</h4>').appendTo($('.joinForm').first());
        }
 
        /* yearCheck */
        var yearValue  = $('#yearValue').val();
        var regexp = /^[0-9]{4}$/;
 
        /* dayCheck */
        var dauValue  = $('#dayValue').val();
        var regexp = /^[0-9]{1,2}$/;
        if( !regexp.test(yearValue) || !regexp.test(dayValue) ) {
            $('<h2>생년월일 설정이 잘못되었습니다.</h2>').appendTo($('#joinForm').eq(4));
        }
 
        /* phoneCheck */
        var phoneValue  = $('#phoneValue').val();
        var regexp = /^[0-9]{11,12}$/;
        if( !regexp.test(yearValue) ) {
            $('<h2>숫자만 가능합니다</h2>').appendTo($('#joinForm').eq(6));
        } 
     });
 
 
    /* 월 추가하기*/
    var monthArray=[1,2,3,4,5,6,7,8,9,10,11,12];
    
    $.each(monthArray,function(index,item){
        $('#month').append('<option>'+item+"</option>");
    });
 
});
cs



1
2
3
4
5
6
7
8
9
/* 이용약관 설명*/
var agreeTxtArray = ['\n1네이버 서비스 및 제품(이하 ‘서비스’)을 이용해 주셔서 감사합니다. 본 약관은 다양한 네이버 서비스의 이용과 관련하여 네이버 서비스를 제공하는 네이버 주식회사(이하 ‘네이버’)와 이를 이용하는 네이버 서비스 회원(이하 ‘회원’) 또는 비회원과의 관계를 설명하며, 아울러 여러분의 네이버 서비스 이용에 도움이 될 수 있는 유익한 정보를 포함하고 있습니다.\n네이버 서비스를 이용하시거나 네이버 서비스 회원으로 가입하실 경우 여러분은 본 약관 및 관련 운영 정책을 확인하거나 동의하게 되므로, 잠시 시간을 내시어 주의 깊게 살펴봐 주시기 바랍니다.\n다양한 네이버 서비스를 즐겨보세요.\n네이버는 www.naver.com을 비롯한 네이버 도메인의 웹사이트 및 응용프로그램(어플리케이션, 앱)을 통해 정보 검색, 다른 이용자와의 커뮤니케이션, 콘텐츠 제공, 상품 쇼핑 등 여러분의 생활에 편리함을 더할 수 있는 다양한 서비스를 제공하고 있습니다.\n여러분은 PC, 휴대폰 등 인터넷 이용이 가능한 각종 단말기를 통해 각양각색의 네이버 서비스를 자유롭게 이용하실 수 있으며, 개별 서비스들의 구체적인 내용은 각 서비스 상의 안내, 공지사항, 네이버 웹고객센터(이하 ‘고객센터’) 도움말 등에서 쉽게 확인하실 수 있습니다.\n네이버는 기본적으로 여러분 모두에게 동일한 내용의 서비스를 제공합니다. 다만, \'청소년보호법\' 등 관련 법령이나 기타 개별 서비스 제공에서의 특별한 필요에 의해서 연령 또는 일정한 등급을 기준으로 이용자를 구분하여 제공하는 서비스의 내용, 이용 시간, 이용 횟수 등을 다르게 하는 등 일부 이용을 제한하는 경우가 있습니다. 자세한 내용은 역시 각 서비스 상의 안내, 공지사항, 고객센터 도움말 등에서 확인하실 수 있습니다.\n네이버 서비스에는 기본적으로 본 약관이 적용됩니다만 네이버가 다양한 서비스를 제공하는 과정에서 부득이 본 약관 외 별도의 약관, 운영정책 등을 적용하는 경우(예, 네이버페이, V LIVE 등)가 있습니다. 그리고 네이버 계열사가 제공하는 특정 서비스의 경우에도(예, LINE, SNOW등) 해당 운영 회사가 정한 고유의 약관, 운영정책 등이 적용될 수 있습니다. 이러한 내용은 각각의 해당 서비스 초기 화면에서 확인해 주시기 바랍니다.\n회원으로 가입하시면 네이버 서비스를 보다 편리하게 이용할 수 있습니다.', '\n2네이버 서비스 및 제품(이하 ‘서비스’)을 이용해 주셔서 감사합니다. 본 약관은 다양한 네이버 서비스의 이용과 관련하여 네이버 서비스를 제공하는 네이버 주식회사(이하 ‘네이버’)와 이를 이용하는 네이버 서비스 회원(이하 ‘회원’) 또는 비회원과의 관계를 설명하며, 아울러 여러분의 네이버 서비스 이용에 도움이 될 수 있는 유익한 정보를 포함하고 있습니다.\n네이버 서비스를 이용하시거나 네이버 서비스 회원으로 가입하실 경우 여러분은 본 약관 및 관련 운영 정책을 확인하거나 동의하게 되므로, 잠시 시간을 내시어 주의 깊게 살펴봐 주시기 바랍니다.\n다양한 네이버 서비스를 즐겨보세요.\n네이버는 www.naver.com을 비롯한 네이버 도메인의 웹사이트 및 응용프로그램(어플리케이션, 앱)을 통해 정보 검색, 다른 이용자와의 커뮤니케이션, 콘텐츠 제공, 상품 쇼핑 등 여러분의 생활에 편리함을 더할 수 있는 다양한 서비스를 제공하고 있습니다.\n여러분은 PC, 휴대폰 등 인터넷 이용이 가능한 각종 단말기를 통해 각양각색의 네이버 서비스를 자유롭게 이용하실 수 있으며, 개별 서비스들의 구체적인 내용은 각 서비스 상의 안내, 공지사항, 네이버 웹고객센터(이하 ‘고객센터’) 도움말 등에서 쉽게 확인하실 수 있습니다.\n네이버는 기본적으로 여러분 모두에게 동일한 내용의 서비스를 제공합니다. 다만, \'청소년보호법\' 등 관련 법령이나 기타 개별 서비스 제공에서의 특별한 필요에 의해서 연령 또는 일정한 등급을 기준으로 이용자를 구분하여 제공하는 서비스의 내용, 이용 시간, 이용 횟수 등을 다르게 하는 등 일부 이용을 제한하는 경우가 있습니다. 자세한 내용은 역시 각 서비스 상의 안내, 공지사항, 고객센터 도움말 등에서 확인하실 수 있습니다.\n네이버 서비스에는 기본적으로 본 약관이 적용됩니다만 네이버가 다양한 서비스를 제공하는 과정에서 부득이 본 약관 외 별도의 약관, 운영정책 등을 적용하는 경우(예, 네이버페이, V LIVE 등)가 있습니다. 그리고 네이버 계열사가 제공하는 특정 서비스의 경우에도(예, LINE, SNOW등) 해당 운영 회사가 정한 고유의 약관, 운영정책 등이 적용될 수 있습니다. 이러한 내용은 각각의 해당 서비스 초기 화면에서 확인해 주시기 바랍니다.\n회원으로 가입하시면 네이버 서비스를 보다 편리하게 이용할 수 있습니다.','\n3네이버 서비스 및 제품(이하 ‘서비스’)을 이용해 주셔서 감사합니다. 본 약관은 다양한 네이버 서비스의 이용과 관련하여 네이버 서비스를 제공하는 네이버 주식회사(이하 ‘네이버’)와 이를 이용하는 네이버 서비스 회원(이하 ‘회원’) 또는 비회원과의 관계를 설명하며, 아울러 여러분의 네이버 서비스 이용에 도움이 될 수 있는 유익한 정보를 포함하고 있습니다.\n네이버 서비스를 이용하시거나 네이버 서비스 회원으로 가입하실 경우 여러분은 본 약관 및 관련 운영 정책을 확인하거나 동의하게 되므로, 잠시 시간을 내시어 주의 깊게 살펴봐 주시기 바랍니다.\n다양한 네이버 서비스를 즐겨보세요.\n네이버는 www.naver.com을 비롯한 네이버 도메인의 웹사이트 및 응용프로그램(어플리케이션, 앱)을 통해 정보 검색, 다른 이용자와의 커뮤니케이션, 콘텐츠 제공, 상품 쇼핑 등 여러분의 생활에 편리함을 더할 수 있는 다양한 서비스를 제공하고 있습니다.\n여러분은 PC, 휴대폰 등 인터넷 이용이 가능한 각종 단말기를 통해 각양각색의 네이버 서비스를 자유롭게 이용하실 수 있으며, 개별 서비스들의 구체적인 내용은 각 서비스 상의 안내, 공지사항, 네이버 웹고객센터(이하 ‘고객센터’) 도움말 등에서 쉽게 확인하실 수 있습니다.\n네이버는 기본적으로 여러분 모두에게 동일한 내용의 서비스를 제공합니다. 다만, \'청소년보호법\' 등 관련 법령이나 기타 개별 서비스 제공에서의 특별한 필요에 의해서 연령 또는 일정한 등급을 기준으로 이용자를 구분하여 제공하는 서비스의 내용, 이용 시간, 이용 횟수 등을 다르게 하는 등 일부 이용을 제한하는 경우가 있습니다. 자세한 내용은 역시 각 서비스 상의 안내, 공지사항, 고객센터 도움말 등에서 확인하실 수 있습니다.\n네이버 서비스에는 기본적으로 본 약관이 적용됩니다만 네이버가 다양한 서비스를 제공하는 과정에서 부득이 본 약관 외 별도의 약관, 운영정책 등을 적용하는 경우(예, 네이버페이, V LIVE 등)가 있습니다. 그리고 네이버 계열사가 제공하는 특정 서비스의 경우에도(예, LINE, SNOW등) 해당 운영 회사가 정한 고유의 약관, 운영정책 등이 적용될 수 있습니다. 이러한 내용은 각각의 해당 서비스 초기 화면에서 확인해 주시기 바랍니다.\n회원으로 가입하시면 네이버 서비스를 보다 편리하게 이용할 수 있습니다.'];
 
 /* footer에 a태그 추가하기 */
 var aTag = ['https://nid.naver.com/user2/join/groupJoin.nhn?lang=ko_KR'
            ,'https://policy.naver.com/rules/service.html'
            ,'https://policy.naver.com/policy/privacy.html'
            ,'https://policy.naver.com/rules/disclaimer.html'
            ,'https://help.naver.com/support/service/main.nhn?serviceNo=532'];
cs


저작자표시 비영리 변경금지

'Develop > HTML_CSS' 카테고리의 다른 글

DOCTYPE  (0) 2018.07.23
메뉴 바 만들기  (0) 2018.06.28
CSS  (0) 2018.06.11

관련글

댓글

티스토리툴바