+ 여기에 더 보기

Source: tler.tistory.com

Date Published: 7/14/2022

View: 5879

네이버 회원가입창 만들기 동영상 – 다음블로그

네이버 회원가입창 만들기 동영상 youtu.be/peXkcV8MspA.

+ 자세한 내용은 여기를 클릭하십시오

Source: blog.daum.net

Date Published: 6/8/2022

View: 8745

주제와 관련된 이미지 회원 가입 창

주제와 관련된 더 많은 사진을 참조하십시오 로그인 페이지 만들기 실무편 | Animated Login page Tutorial (Label Text Animation). 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.

주제에 대한 기사 평가 회원 가입 창

• Author: 코딩왕홍키
• Views: 조회수 32,477회
• Likes: 좋아요 461개
• Date Published: 2019. 12. 12.
• Video Url link: https://www.youtube.com/watch?v=dWfpp-0riYA

[WEB] 회원가입 창 만들기 (HTML, CSS, JS / 입력형식체크, 문자인증 기능추가)

반응형

🚀

HTML, CSS, JavaScript를 이용해서 간단한 회원가입 폼을 만들어 보았습니다. 폼을 제작하고 자바스크립트로 형식 체크라던가, 커서이동, 에러표시, 문자인증 토큰발행과 인증확인, 버튼의 활성화, 비활성화와 같은 DOM조작을 하였습니다.

🔗 아래의 페이지에서 회원가입 창을 실제로 테스트 해보실 수 있습니다

https://k-junyyy.github.io/SIGN-UP-PAGE/signup.html

🔨 구현한 기능

✔️ 맨 처음 disabled 속성을 주어 인증번호 전송, 인증 확인, 가입하기 버튼 클릭 방지

✔️ 지역 선택란에서 초기값은 “지역을 선택하세요”로 하며, “지역을 선택하세요”는 선택 불가

✔️ 성별은 남성, 여성 둘 중 하나만 선택 가능

✔️ 휴대폰 번호 입력 시 3자리, 4자리, 4자리로 입력할 수 있도록 구현

✔️ 첫째 칸 3자리 입력 시 둘째 칸으로 포커스(커서) 이동

✔️ 둘째 칸 4자리 입력 시 셋째 칸으로 포커스(커서) 이동

✔️ 셋째 칸 4자리 입력 시 인증번호 전송 버튼 활성화

✔️ 인증번호 전송 버튼 클릭 시 토큰 생성 및 타이머 실행, 인증 확인 버튼 활성화

✔️ 3분 이내 인증 확인 버튼 클릭 시 “인증이 완료되었습니다” 알림 띄우기

✔️ 3분 동안 버튼을 누르지 않는 경우 인증번호 전송 버튼과 인증 확인 버튼 비활성화

✔️ 문자인증 후 토큰 정보를 “000000”, 시간을 “03:00″으로 초기화

✔️ 인증 확인 시 인증 확인 버튼을 “인증 완료”로 변경, 가입하기 버튼 활성화

✔️ 가입하기 버튼 클릭 시 이메일, 이름, 비밀번호, 비밀번호 확인, 지역, 성별 확인

✔️ 가입 시 이메일 형식(“아이디”+@+”서버”)을 준수하는지 판별

✔️ 가입 시 비밀번호와 비밀번호 확인이 일치하는지 비교

✔️ 가입 시 각 입력창에서 조건에 맞지 않는다면 입력창 아랫부분에 빨간 글씨로 에러 표시

✔️ 조건을 모두 만족시키고 가입하기 버튼 클릭 시 입력창 아래 에러 제거 후 가입 확인 메시지 띄우기

전화번호 부분(3자리, 4자리, 4자리) 입력 시 인증번호 전송 버튼이 활성화됩니다.

인증번호 전송 버튼 클릭 시 토큰이 발행되고 3분의 제한시간이 주어집니다.

(아래의 코드에선 빠르게 테스트해보기 위해 1초를 50ms로 설정하였습니다.)

인증확인 버튼을 클릭하면 인증번호전송 버튼과 인증확인 버튼이 비활성화 되고

인증확인 버튼의 값이 “인증완료”로 바뀌게 됩니다.

가입하기 클릭 시 위와같이 이메일 형식이 맞지 않는다거나 이름 누락, 비밀번호와 비밀번호확인이 일치하지 않음, 지역 미선택, 성별 미선택 등등 입력이 올바르지 않다면 빨간 글씨로 에러를 표시해줍니다.

형식을 올바르게 입력하고 가입하기 버튼을 클릭하면 가입이 완료되었다는 메시지를 표시하도록 하였습니다.

📋 코드

회원가입

– –

000000

인증번호 전송

03:00

인증확인

지역을 선택하세요.서울인천경기

남성 여성

---

가입하기

// 휴대폰 번호 입력 부분 function changePhone1(){ const phone1 = document.getElementById(“phone1”).value // 010 if(phone1.length === 3){ document.getElementById(“phone2”).focus(); } } function changePhone2(){ const phone2 = document.getElementById(“phone2”).value // 010 if(phone2.length === 4){ document.getElementById(“phone3”).focus(); } } function changePhone3(){ const phone3 = document.getElementById(“phone3”).value // 010 if(phone3.length === 4){ document.getElementById(“sendMessage”).focus(); document.getElementById(“sendMessage”).setAttribute(“style”,”background-color:yellow;”) document.getElementById(“sendMessage”).disabled = false; } } // 문자인증+타이머 부분 function initButton(){ document.getElementById(“sendMessage”).disabled = true; document.getElementById(“completion”).disabled = true; document.getElementById(“certificationNumber”).innerHTML = “000000”; document.getElementById(“timeLimit”).innerHTML = “03:00”; document.getElementById(“sendMessage”).setAttribute(“style”,”background-color:none;”) document.getElementById(“completion”).setAttribute(“style”,”background-color:none;”) } let processID = -1; const getToken = () => { // 인증확인 버튼 활성화 document.getElementById(“completion”).setAttribute(“style”,”background-color:yellow;”) document.getElementById(“completion”).disabled = false; if (processID != -1) clearInterval(processID); const token = String(Math.floor(Math.random() * 1000000)).padStart(6, “0”); document.getElementById(“certificationNumber”).innerText = token; let time = 180; processID = setInterval(function () { if (time < 0 || document.getElementById("sendMessage").disabled) { clearInterval(processID); initButton(); return; } let mm = String(Math.floor(time / 60)).padStart(2, "0"); let ss = String(time % 60).padStart(2, "0"); let result = mm + ":" + ss; document.getElementById("timeLimit").innerText = result; time--; }, 50); }; function checkCompletion(){ alert("문자 인증이 완료되었습니다.") initButton(); document.getElementById("completion").innerHTML="인증완료" document.getElementById("signUpButton").disabled = false; document.getElementById("signUpButton").setAttribute("style","background-color:yellow;") } // 가입부분 체크 function signUpCheck(){ let email = document.getElementById("email").value let name = document.getElementById("name").value let password = document.getElementById("password").value let passwordCheck = document.getElementById("passwordCheck").value let area = document.getElementById("area").value let gender_man = document.getElementById("gender_man").checked let gender_woman = document.getElementById("gender_woman").checked let check = true; // 이메일확인 if(email.includes('@')){ let emailId = email.split('@')[0] let emailServer = email.split('@')[1] if(emailId === "" || emailServer === ""){ document.getElementById("emailError").innerHTML="이메일이 올바르지 않습니다." check = false } else{ document.getElementById("emailError").innerHTML="" } }else{ document.getElementById("emailError").innerHTML="이메일이 올바르지 않습니다." check = false } // 이름확인 if(name===""){ document.getElementById("nameError").innerHTML="이름이 올바르지 않습니다." check = false }else{ document.getElementById("nameError").innerHTML="" } // 비밀번호 확인 if(password !== passwordCheck){ document.getElementById("passwordError").innerHTML="" document.getElementById("passwordCheckError").innerHTML="비밀번호가 동일하지 않습니다." check = false }else{ document.getElementById("passwordError").innerHTML="" document.getElementById("passwordCheckError").innerHTML="" } if(password===""){ document.getElementById("passwordError").innerHTML="비밀번호를 입력해주세요." check = false }else{ //document.getElementById("passwordError").innerHTML="" } if(passwordCheck===""){ document.getElementById("passwordCheckError").innerHTML="비밀번호를 다시 입력해주세요." check = false }else{ //document.getElementById("passwordCheckError").innerHTML="" } // 지역선택 확인 if(area === "지역을 선택하세요."){ document.getElementById("areaError").innerHTML="지역을 선택해주세요." check = false }else{ document.getElementById("areaError").innerHTML="" } // 성별체크확인 if(!gender_man && !gender_woman){ document.getElementById("genderError").innerHTML="성별을 선택해주세요." check = false }else{ document.getElementById("genderError").innerHTML="" } if(check){ document.getElementById("emailError").innerHTML="" document.getElementById("nameError").innerHTML="" document.getElementById("passwordError").innerHTML="" document.getElementById("passwordCheckError").innerHTML="" document.getElementById("areaError").innerHTML="" document.getElementById("genderError").innerHTML="" //비동기 처리이벤트 setTimeout(function() { alert("가입이 완료되었습니다.") },0); } }

* { margin: 0px; box-sizing: border-box; font-size: 11px; } html { width: 100%; display: flex; justify-content: center; padding-top: 20px; padding-bottom: 20px; } body { width: 45%; border: 1px solid black; } input{ border: 1px solid black; border-radius: 3px; line-height: 35px; font-size: 12px; padding-left: 10px; padding-right: 10px; } .wrapper { padding: 10px; } div { padding-top: 3px; padding-bottom: 8px; } .title { text-align: center; font-weight: 700; } .email input { width: 100%; } .name input { width: 100%; } .password input { width: 100%; } .passwordCheck input { width: 100%; } .phone { display: flex; justify-content: space-between; line-height: 35px; } #phone1 { width: 18%; } #phone2 { width: 30%; } #phone3 { width: 30%; } .auth { display: flex; justify-content: space-between; } .timer { display: flex; justify-content: space-between; } .auth div { width: 30%; text-align: center; font-weight: 700; font-size: 15px; } .auth button { width: 70%; } .timer div { width: 30%; text-align: center; font-weight: 700; font-size: 15px; } .timer button { width: 70%; } .area select { width: 100%; height: 40px; } .gender { text-align: center; } .signUp button { width: 100%; cursor:pointer; } button{ cursor: pointer; height: 30px; } .error{ font-size: 1px; height: 20px; color:red; font-weight: 700; }

🔗 GitHub 저장소 링크

https://github.com/K-Junyyy/SIGN-UP-PAGE

반응형

네이버 회원가입 페이지 따라 만들기(클론코딩) – HTML/CSS

HTML, CSS, Javascript 연습용으로 네이버 회원가입 페이지를 따라 만들어봤습니다.

회원가입 페이지 레이아웃을 html과 css로 비슷하게 따라하고,

Javascript로 사용자가 데이터를 입력했는지 확인하기 + 사용자가 입력한 데이터가 조건에 맞는지 확인하기(유효성 검사) -> (데이터가 입력되지 않았거나 조건에 맞지 않다면) 에러메세지 출력하기

이렇게 간단한 기능을 구현해봤습니다.

자바스크립트로 기능구현한 부분은 따로 글을 작성할 예정이고

이 글에서는 결과물과 html, css 소스코드를 간단한 설명과 함께 보여드리려고 합니다.

결과물부터 보여드릴게요

결과물

네이버 실제 회원가입 페이지

클릭하면 크게 볼 수 있어요

따라 만든 페이지

클릭하면 크게 볼 수 있어요

(휴대폰 인증, Footer 부분 등은 생략하고 만들었습니다. )

하필이면 제가 이거 만들고 나서 며칠 안돼서 네이버에서 회원가입페이지 로고랑 자물쇠 모양이랑 색상이랑 이것저것 수정했더라구요. 제가 만든 건 약간 구버전이 되어버렸네요ㅜ

* 글 하단에 html, css 전체 소스코드를 올려놨습니다. html, css, js 파일은 github에 전부 올려놨어요. github링크도 하단에 같이 첨부해놓았습니다.

1. HTML 코드

많은 기능을 구현할 것이 아니기 때문에 실제 네이버 회원가입페이지 html 소스코드에 비해

간단하게 작성했습니다.

전체 페이지 구성

먼저 전체 페이지 구성은 div태그를 이용해 header, wrapper, wrapper 안의 content 이렇게 세 부분으로 작성했습니다.

content 안에 아이디, 비밀번호, 이름 등 입력 폼들을 각각

태그로 묶어서 넣어주고, 버튼도 content 안에 포함시켰습니다.

id 입력폼 부분

아이디

@naver.com

content 안에 작성되어있는 id 입력폼 부분 소스코드입니다.

코드를 보시면 “아이디”라는 입력폼의 타이틀을 ,

태그로 감싸 줬는데

h3 태그는 의미상 구분 단위로 쓰기 위해서(입력폼의 제목이라는 뜻) + h3 태그를 모아서 한 번에 스타일을 적용하기 위해서 사용했고,

label 태그는 “아이디”라는 글자를 클릭하면 자동으로 아이디 입력폼에 포커스가 되는 기능을 주기 위해서 사용했습니다.

지금 보니까 h3 태그는 생략해도 큰 문제가 없을 것 같네요..?

*label태그에는 태그를 클릭하면, 동일한 아이디값을 가진 태그에 자동으로 포커스가 되는 기능이 포함되어 있습니다. 저는 이 기능을 사용하기 위해서 태그의 아이디값과 태그의 아이디값을 “id”로 동일하게 설정했습니다.

입력폼은 span태그로 묶어주고, 그 안에 텍스트를 입력받을 태그와 메일주소(“@naver.com”)를 표시해줄 또다른 sapn태그를 넣어줬습니다.

입력폼 전체를 묶은 span 태그에는 box라는 class값을 설정해주고, input 태그에도 int라는 class값을 설정해줬습니다. 아이디 입력폼 뿐 아니라 비밀번호, 이름 등 다른 입력폼에도 같은 클래스 값을 설정해줬습니다. 아이디, 비밀번호, 이름 등 모든 입력폼에 공통적인 스타일을 적용할 것이기 때문입니다. (단, 아이디 입력폼은 다른 입력폼들과 오른쪽 padding 값이 다르기 때문에 나중에 css코드에서 padding-right 스타일만 따로 적용해주기 위해서 int_id라는 class값도 추가로 설정해줬습니다. )

input 태그의 max-length 속성은 입력할 수 있는 글자수를 20자로 제한하는 속성입니다. 네이버에서 20자로 제한하고 있길래 그냥 저도 그렇게 했어요

태그는 아이디값을 잘못 입력했을 때, 입력 폼 아래에 에러 메세지가 표시될 부분을 나타내기 위해 사용했습니다.

각 태그들의 id명, class명은 대부분 실제 네이버 회원가입 페이지에서 그대로 가져왔습니다. (error_next_box, int_id 등)

비밀번호, 이름, 이메일, 휴대전화 등 나머지 입력폼들은 전부 id 입력폼과 비슷한 구성으로 작성했기 때문에 생략하고 넘어가겠습니다.

태그 구성이 조금 다른 생년월일 입력폼만 추가로 볼게요

생년월일 입력폼

생년월일

월123456789101112

생년월일 입력폼 부분의 소스코드입니다.

크게 보면 (입력폼 전체를 묶는)div태그 > bir_wrap > bir_yy, bir_mm, bir_dd 로 구성되어 있습니다.

bir_wrap은 bir_yy, bir_mm, bir_dd 세 요소를 감싸주는 목적으로, css로 세 요소를 배치할 때 필요하기 때문에 추가해줬습니다.

이 외에는 아이디입력폼과 크게 다르지 않기 때문에 특별히 설명할 부분이 없네요

가입하기 버튼

가입하기

버튼 부분은 코드가 간단하죠?

css레이아웃 배치를 염두에 두고 버튼영역(btn_area) > 버튼(button) > 텍스트(span) 이렇게 구분해뒀습니다.

버튼에는 딱히 기능을 추가할 생각이 없었고, 기능을 추가하더라도 어차피 html 소스 전체에 button태그가 하나밖에 없기 때문에 그냥 태그명으로 접근이 가능하니 굳이 id값을 따로 설정하지는 않았습니다.

HTML 코드 작성은 크게 어려운 부분은 아니니까 여기서 마무리할게요!

2. CSS 코드

전체적인 틀 잡기

/* 레이아웃 틀 */ html { height: 100%; } body { margin: 0; height: 100%; background: #f5f6f7; font-family: Dotum,’돋움’,Helvetica,sans-serif; } #logo { width: 240px; height: 44px; cursor: pointer; } #header { padding-top: 62px; padding-bottom: 20px; text-align: center; } #wrapper { position: relative; height: 100%; } #content { position: absolute; left: 50%; transform: translate(-50%); width: 460px; }

1) body, wrapper의 height값을 100%로 설정해줍니다.

height를 %값으로 주게 되면, 상위태그(부모태그)의 높이를 기준으로 높이가 설정됩니다.

(예를 들어 body { height : 1000px } #wrapper { height : 50% } 라면,

wrapper의 height 값은 부모태그인 body태그의 height값 기준 50%인 500px로 설정이 됩니다.)

그래서 height를 %로 설정할 때는 부모태그의 height를 먼저 확인하는 것이 좋습니다.

저는 처음에 wrapper만 height: 100%;로 설정했더니

wrapper의 실제 높이가 0px이 되더라구요(body, html태그의 높이가 설정되어있지 않았기 때문).

wrapper가 content를 감싸줘야 하는데 따로 노는 상황이 되어서 시행착오 끝에

html과 body태그에도 height를 설정해줬더니 제대로 구현이 되었습니다.

2) header에는 text-align: center; 속성을 설정해서 네이버 로고(#logo)가 수평으로 가운데 정렬되도록 해줬습니다.

로고는 이미지 태그인데 text-align으로도 수평 정렬이 되길래 그냥 이렇게 해줬어요.

header의 위 아래 padding값은 고정된 값이기 때문에 px로 설정했고, (px값은 실제 네이버 페이지의 css코드에서 그대로 가져왔어요)

네이버 로고 위에 마우스 커서를 올리면 커서 모양이 포인터로 바뀌는 디테일을 구현하기 위해 cursor: pointer; 속성도 넣어줬습니다.

3) wrapper의 position을 relative로 설정해주고, content는 position: absolute;로 설정했습니다.

이렇게 설정하면 wrapper를 기준점으로 삼아서 content를 배치할 수 있습니다.

wrapper 너비를 기준으로 왼쪽에서 50%만큼 떨어지게 한 다음(left: 50%), transform 속성을 이용해서 content의 너비에서 50%만큼 다시 왼쪽으로 가게 했습니다(transform: translate(-50%)). 이렇게 하면 content를 wrapper안에서 수평으로 중앙정렬 할 수 있습니다.

너비가 고정되어있지 않은 컨텐츠를 중앙정렬할 때 사용하기 좋은 방법인 것 같습니다.

입력 폼 스타일

h3 { margin: 19px 0 8px; font-size: 14px; font-weight: 700; } .box { display: block; width: 100%; height: 51px; border: solid 1px #dadada; padding: 10px 14px 10px 14px; box-sizing: border-box; background: #fff; position: relative; } .int { display: block; position: relative; width: 100%; height: 29px; border: none; background: #fff; font-size: 15px; }

입력 폼 스타일에서 가장 기본이 되는 세 부분입니다!

그림을 좀 못그렸는데 그래도 보면 대충 이해는 가시죠? 아닌가요?ㅎㅎ..

입력폼 부분의 레이아웃은 이렇게 구성되어있습니다.

1) h3은 위로 19px, 아래로 8px 마진을 줘서 자리를 잡아줬구요.

2) box와 int의 높이(height)는 각각 51px, 29px로 고정해주고

3) box와 int의 너비(width)는 100%로 설정했는데, 부모태그인 content의 너비(460px) 기준 100%가 되기 때문에 실제 값은 각각 460px이 되겠습니다.

4) 그리고 box에 padding 값을 줘서 int가 box로부터 위아래로 10px, 양쪽으로 14px만큼 떨어지게(작아지게) 했어요.

단, 아이디 입력폼의 경우 다른 폼과 다르게 오른쪽에 “@naver.com”이 들어갈 공간이 필요하기 때문에

.box.int_id { padding-right: 110px; }

이렇게 오른쪽 padding 값만 따로 110px로 설정해줬어요.

.box.int_pass { padding-right: 40px; } .box.int_pass_check { padding-right: 40px; }

오른쪽에 자물쇠 이미지가 들어가야하는 비밀번호 입력 폼과 비밀번호 재확인 입력 폼도 padding-right를 따로 설정해줬습니다.

5) box의 box-sizing속성은 box의 크기를 어떤 기준으로 계산할지 정하는 속성 입니다.

테두리를 포함해서 계산할지(border-box), 테두리를 제외하고 계산할지(content-box) 등등..

기본값은 content-box입니다. content-box로 설정되어 있는 경우 border가 없다면 괜찮지만 border가 있다면 border size만큼인 1px~2px정도가 내가 정한 box 크기에 +돼서 전체적인 레이아웃이 아주 약간씩 어긋나게 돼요.

그러니 애초에 크기를 정할 때 border크기를 포함시켜서 정하거나(460px + border 1px = 461px로 설정),

아니면 border-box로 설정해주는 것이 좋습니다.

6) 아이디 입력 폼의 “@naver.com”

.step_url { /*@naver.com*/ position: absolute; top: 16px; right: 13px; font-size: 15px; color: #8e8e8e; }

position: absolute, top: 16px, right: 13px -> position이 static이 아닌 부모태그인 box를 기준으로 위에서 16px, 오른쪽에서 13px 떨어진 위치에 배치했습니다.

7) 비밀번호 입력 폼의 자물쇠 이미지

.pswdImg { width: 18px; height: 20px; display: inline-block; position: absolute; top: 50%; right: 16px; margin-top: -10px; cursor: pointer; }

마찬가지로 postion: absolute, top: 50%, right: 16px -> position이 static이 아닌 부모태그 box를 기준으로 위에서 50%, 오른쪽에서 16px만큼 떨어지게 배치했어요.

그리고 margin-top: -10px로 설정해서 위로 다시 10px만큼 올라가게 했어요.

이렇게 한 이유는 세로로 중앙 정렬을 하기 위해서입니다. box높이의 50%만큼 아래로 내려갔다가 -> 자물쇠이미지 높이의 절반(20px/2 = 10px)만큼 다시 위로 올라가면 정확히 중앙에 오게 되니까요.

wrapper에서 content를 가로로 중앙정렬했던 것과 같은 원리입니다.

생년월일 입력 폼 배치

#bir_wrap { display: table; width: 100%; } #bir_yy { display: table-cell; width: 147px; } #bir_mm { display: table-cell; width: 147px; vertical-align: middle; } #bir_dd { display: table-cell; width: 147px; } #bir_mm, #bir_dd { padding-left: 10px; }

생년월일 입력 폼은 table 속성을 이용해서 배치해줬어요.

*참고 : table 속성은 원래 표를 만들 때 사용하는 속성인데요. grid 속성과 비슷하지만, grid가 레이아웃 배치하라고 나온 속성이라면 table 속성은 말그대로 표를 만들라고 나온 속성이기 때문에 레이아웃 배치용으로는 grid를 사용하는 게 바람직하다고 해요. 그런데 grid속성은 비교적 최근에 나온 속성이라 호환되지 않는 브라우저(특히 IE)가 있는 반면, table 속성은 좀 더 많은 브라우저에서 지원이 되기 때문에 table 속성을 이용해서 레이아웃 배치 작업을 하는 경우가 꽤 있는 것 같더라구요. 실제로 네이버 회원가입 페이지의 생년월일 입력 폼 부분은 table 속성을 이용해 배치가 되어있었습니다. 그래서 저도 table을 이용해서 한 번 배치를 해봤는데요.

bir_yy, bir_mm, bir_dd를 각각 table을 구성하는 cell로 설정하고, 세 요소를 감싸고 있는 bir_wrap의 display속성을 table로 설정했습니다.

bir_yy, bir_mm, bir_dd(테이블의 각 셀들)의 너비는 각각 147px로 설정하고,

그 중 bir_mm, bir_dd는 padding-left: 10px로 설정해서 셀들 사이에 10px만큼 간격이 생기게 했어요.

bir_mm에 vertical-align: middle;으로 설정한 이유는 나머지 두 셀과 높이를 맞춰주기 위해서 입니다.

bir_yy, bir_dd가 box안에 int(height:31px)가 들어가 있는 구조라면

bir_mm은 box안에 select(height:29px)가 들어가 있는 구조라 나머지 두 셀과 박스 높이가 약간 달랐어요.

에러메세지 배치

↓

이렇게 에러메세지가 뜨도록

.error_next_box { margin-top: 9px; font-size: 12px; color: red; display: none; } #alertTxt { position: absolute; top: 19px; right: 38px; font-size: 12px; color: red; display: none; }

위와 같이 css 스타일을 적용해줬습니다.

error_next_box가 “8~16자 영문 대 소문자, 숫자, 특수문자를 사용하세요.”와 같은 에러메세지가 출력될 부분이고,

alertTxt는 비밀번호 입력폼에서 “사용불가”와 같은 경고메세지를 출력할 부분입니다.

error_next_box는 margin 값을 이용해서 위에있는 box와 약간 떨어뜨려주면서 자리를 잡아줬습니다.

alertTxt는 “@naver.com”이나 자물쇠 이미지처럼 position: absoulte 속성을 이용해서 자리를 잡아줬어요.

둘 다 display 속성은 none으로 해서 보이지 않게 설정해두었습니다.

이벤트가 발생하면(사용자가 잘못된 데이터를 입력하면) display: block으로 바뀌면서 에러메세지가 나타날거에요. (이 부분은 자바스크립트로 구현)

버튼 스타일

마지막으로 별 거 없는 버튼 스타일입니다.

.btn_area { margin: 30px 0 91px; } #btnJoin { width: 100%; padding: 21px 0 17px; border: 0; cursor: pointer; color: #fff; background-color: #08a600; font-size: 20px; font-weight: 400; font-family: Dotum,’돋움’,Helvetica,sans-serif; }

버튼 영역은 위 30px(위에 있는 입력폼과 간격 띄우기), 아래 91px(원래 버튼 아래에 들어가는 footer영역 높이 정도) 마진을 줬어요.

버튼 크기는 width와 padding으로 잡아줬어요. 버튼 너비(width)를 100%로 설정해서 부모 태그인 content의 너비인 460px로 만들고, 위 아래 padding 값을 줘서 버튼 크기를 위아래로 늘려줬어요.

그리고 버튼 태그에 기본적으로 들어가있는 border(테두리)를 없애주고, 실제로 동작하는 버튼은 아니지만 그래도 커서는 포인터로 설정했어요.

그 외에 색상이나 폰트는 그냥 네이버 css를 복붙했습니다.

이렇게 하면 레이아웃은 완성입니다! 설명이 생략된 부분은 아래에 있는 html, css 전체 소스코드나 github에 올려둔 파일을 참고해주시면 됩니다.

Github 링크

https://github.com/from97/naver_join

HTML, CSS 전체 소스코드

HTML 소스코드

더보기

아이디

@naver.com

비밀번호

사용불가

비밀번호 재확인

이름

생년월일

월123456789101112

성별

성별남자여자 필수 정보입니다.

본인확인 이메일(선택)

이메일 주소를 다시 확인해주세요.

휴대전화

가입하기

CSS 소스코드

더보기 /* 레이아웃 틀 */ html { height: 100%; } body { margin: 0; height: 100%; background: #f5f6f7; font-family: Dotum,’돋움’,Helvetica,sans-serif; } #logo { width: 240px; height: 44px; cursor: pointer; } #header { padding-top: 62px; padding-bottom: 20px; text-align: center; } #wrapper { position: relative; height: 100%; } #content { position: absolute; left: 50%; transform: translate(-50%); width: 460px; } /* 입력폼 */ h3 { margin: 19px 0 8px; font-size: 14px; font-weight: 700; } .box { display: block; width: 100%; height: 51px; border: solid 1px #dadada; padding: 10px 14px 10px 14px; box-sizing: border-box; background: #fff; position: relative; } .int { display: block; position: relative; width: 100%; height: 29px; border: none; background: #fff; font-size: 15px; } input { font-family: Dotum,’돋움’,Helvetica,sans-serif; } .box.int_id { padding-right: 110px; } .box.int_pass { padding-right: 40px; } .box.int_pass_check { padding-right: 40px; } .step_url { /*@naver.com*/ position: absolute; top: 16px; right: 13px; font-size: 15px; color: #8e8e8e; } .pswdImg { width: 18px; height: 20px; display: inline-block; position: absolute; top: 50%; right: 16px; margin-top: -10px; cursor: pointer; } #bir_wrap { display: table; width: 100%; } #bir_yy { display: table-cell; width: 147px; } #bir_mm { display: table-cell; width: 147px; vertical-align: middle; } #bir_dd { display: table-cell; width: 147px; } #bir_mm, #bir_dd { padding-left: 10px; } select { width: 100%; height: 29px; font-size: 15px; background: #fff url(https://static.nid.naver.com/images/join/pc/sel_arr_2x.gif) 100% 50% no-repeat; background-size: 20px 8px; -webkit-appearance: none; display: inline-block; text-align: start; border: none; cursor: default; font-family: Dotum,’돋움’,Helvetica,sans-serif; } /* 에러메세지 */ .error_next_box { margin-top: 9px; font-size: 12px; color: red; display: none; } #alertTxt { position: absolute; top: 19px; right: 38px; font-size: 12px; color: red; display: none; } /* 버튼 */ .btn_area { margin: 30px 0 91px; } #btnJoin { width: 100%; padding: 21px 0 17px; border: 0; cursor: pointer; color: #fff; background-color: #08a600; font-size: 20px; font-weight: 400; font-family: Dotum,’돋움’,Helvetica,sans-serif; }

[HTML/CSS/Script] 회원가입 페이지 만들기

┖─ 개인 [HTML/CSS/Script] 회원가입 페이지 만들기 YN ・ URL 복사 본문 기타 기능 공유하기 신고하기 ​ [개발환경] IDE – JAVA Eclipse win32-x86 Web – TomCat v8.5 ​ ​ ​ 오늘은 최근 팀 프로젝트를 하면서 만들어두었던 회원가입 페이지를 소개하고자 합니다. ​ 처음 HTML 다뤘을 땐 한 동안은 지지리도 못했는데…. 역시 코딩은 계속해야 는다는 걸 이번에도 깨닫습니다. (빡센 복습은 덤으로!) ​ 그럼 저의 완성된 회원가입 페이지를 설명드리도록 하겠습니다! ​ ​ ​ 1. 벤치마킹 저는 심플을 추구하는 편이라 디자인적으로도 깔끔해야 직성이 풀리는 편입니다. :] 그래서 사용자 input 칸 바깥에 박스같은 디자인이 있으면 좋겠다싶어, ​ 어느 사이트로 벤치마킹할까 하다가.. 네이버 회원가입 창을 선택했습니다!! ​ 네이버로 선택한 이유는 국민 포털사이트로 그만큼 사용자가 많기 때문에 디자인적으로나 기능적으로도 많이 신경을 쓰고 개발을 했을 것 같아 선택하게 되었습니다. ​ 그래서 그런지 접속했을 때 딱 깔끔하니 입력해야 될 정보들이 한눈에 잘 보이지않나요? 마음에 들었으니 벤치마킹을 해보겠습니다. ​ 이제 가져올 소스코드를 보도록 하겠습니다. 개발자 도구(F12)를 켜서 아이디 입력부분을 커서로 두니 소스가 나와있습니다. 참고로 좌측에 있는 코드는 HTML 코드이고, 우측은 CSS 코드입니다. ​ 코드를 보다보면 input 칸 마다 span 태그에 class속성을 .ps_box로 지정하여 css에서 border, padding을 줌으로써 박스 디자인을 해주었더라구요. 그러니까 div → span(class=”ps_box”) → input 이런식으로 상위 하위태그를 input 태그마다 감싸주었습니다.(div가 상위, input 하위) ​ 해당 부분은 저에게 필요한 코드이니 제 페이지에 적립을 해두겠습니다. ​ ​ ​ 다음으로 볼 부분은 “input값이 있다? == 유효성검사 처리 필요함” 라고 저는 생각하기 때문에 네이버는 어떻게 처리를 하였는지 한번 보겠습니다. 기대가 되는군요 🙂 ​ 입력부분의 경우, 캡처를 해두었는데 span태그 안에 텍스트가 없다가 → 오류가 생기면 그때 태그에 텍스트가 생성됩니다. ​ 그것도 한 문구만 나오는 것이 아니라 오류종류에 따라 텍스트가 출력됩니다. ​ 유효성검사를 어떻게 처리하였는지는(script..) 관리자 도구에서 볼 수 있는 코드는 한계가 있기 때문에 직접 구현을 했어야 했습니다. 작성된 코드는 아래에서 보실 수 있습니다. ​ 우선은 오류가 발생하면 그때서야 오류 텍스트가 출력되는 점이 저에게 힌트가 되어주었습니다. ​ ​ [오류 발생 전] ​ ​ [오류 발생] ​ ​ ​ 2. HTML 이제부터 마크업 구조를 설계해보며 틀을 잡아보겠습니다. ​ 저희 조는 배달어플을 모티브로 컨셉이 잡혀져 있는데요. 컨셉에 맞게 배달어플이라면 필요한 정보가 뭐가 있을까 생각하였습니다. ​ 그렇게 되면 전화번호와 주소는 필수이고, 로그인을 하려면 본인 확인을 위한 ID, PW가 필요하겠죠?? 해서 저는 아이디, 비밀번호, 성명, 전화번호, 주소, 이메일, 개인정보동의 이 정도로 구현을 해보았습니다. ​ 또한 input의 부분은 위에서 벤치마킹한 코드로 넣어주어야겠습니다. ​ ​ ​ ​ [ 코드 ① 타이틀 – 아이디 – 비밀번호(재확인) – 성명 – 전화번호 – 주소 ]

라이더 멤버가 되어주세요!!

아이디

비밀번호

비밀번호 재확인

성명

전화번호(“-” 제외)

자택주소

▶ 코드설명 ◀ css와 script부분은 유지보수를 위해 내부가 아닌 외부시트를 이용했습니다. 외부시트가 기준이 되어야 하는 이유는 아래와 같습니다. ​ 1. 메인 HTML의 코드가 간결해져서 가독성이 좋아짐 2. 협업시 파트 분배하기에 용이함 (업무분담) 3. 분류해 둠에 따라 유지보수가 좋아짐 ​ body 그 다음으로 body 태그로 들어가보면 div에 id를 wrap로 감쌌는데요! 웹 접근성 지침을 위해 id를 부여함에 따라 의미를 명시해줬습니다. header로 시맨틱 태그를 표시해 주어 페이지의 제목을 나타냈고, ​ 그 이후로는 사용자 input을 나타내는 코드들입니다. 사용자 입장에서 신뢰성을 주기 위해서는 통일성이 있어야 하기 때문에 input부분 코드의 틀은 같습니다. ​ input 입력 타이틀은 h3태그로 나타내 주었으며, 벤치마킹을 했을 때처럼 태그 안에 span을 통해 id에 Error를 넣어주었습니다. 이는 벤치마킹한 바와 같이 오류가 나타나면, script를 통해 텍스트를 출력할 예정입니다. ​ 입력 텍스트에 무한정으로 입력을 하게 둘순 없으니 maxlength로 길이를 제한을 해주었으며, input을 span태그에 class를 부여해 줌에 따라 css에서도 벤치마킹한 소스코드를 그대로 적용시켜 주었습니다. ​ 주소입력 >>여기에서 특이점이 바로 주소 부분인데요.<< 처음에는 주소를 텍스트로 받을까하다가 실제와 유사한 회원가입 창을 만들고싶은 열정에..!! 구글링을 하면서 daum의 우편번호 찾기 *API 를 제공한다는 것을 알고 후다닥 찾아본 다음에 적용 시켜주었습니다. 처음에 설명서에 따라 코드 추가만 해주었는데도 버튼을 누르면 우편번호 찾기 창이 나오는게 너~~무 신기해서 친구들한테 자랑했던 기억이 나네요.. ㅎㅎㅎ ​ 링크는 걸어두었으니 필요하신 분들은 설명서에 따라서 코드를 입력해주시면 되겠습니다. 기본사용법처럼 통합 로딩방식으로 script에 주소를 넣어주고, 내부기능 같은경우 예제 페이지에서 예제코드 보기를 통해 전체 코드를 복붙 해주시면 정상적으로 작동이 잘 되더라구요. 참고로, css는 제공되는게 있긴하나 저는 기존 틀이있기 때문에 제 입맛에 맞춰서 디자인을 해주었습니다. Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net ​ *API(Application Programming Interface) 개발자를 위한 인터페이스이며, 앱에서 사용이 가능하도록 앱 외부의 기능입니다. 저는 플러그인과 비슷하다고 생각이 들었는데, 차이점이라 함은 API는 기능을 호출하는 함수의 집합, 플러그인은 부품처럼 꽂아넣듯이 사용하는 것을 의미합니다. 실제로 아래 게시물에서 사용한 플러그인은 단독으로 쓰이지 않고 개발자가 사용할 목적에 따라 코드를 추가해주어야 하는데, API의 경우 기능자체를 부여함에 따라 단독으로 사용할 수 있게 됩니다. - 플러그인이란? : [ajax+JSON] 이미지 갤러리 - 데이터.. : 네이버블로그 (naver.com) ​ ​ ▶ 태그설명 ◀

기능은 없으며, 한 분류로 묶고싶을 때 사용되는 block 태그입니다. ​

form은 사용자 입력 값을 보내주는 역할을 합니다. 현재는 사용안했지만, action을 통해 페이지명을 입력하면 (src입력하듯이) 해당 페이지로 사용자의 데이터를 보내줍니다. 이 부분은 백엔드에 해당되므로 향후 설명드리겠습니다. ​ 그리고 method는 *HTTP 메서드로, *get과 *post를 택일 하는데 post로 많이 쓰인다고 합니다. ​

해당 부분은 시맨틱 태그로, (시맨틱 태그 == 태그의 존재만으로 의미를 전달) 기능은 없고 의미를 뜻합니다. header라 함은 표지 같이 제목을 의미합니다. 시맨틱 태그는 웹 접근성 지침 중 하나로 예시를 들 수 있겠습니다. ​ 입력할 문자의 크기를 나타내며, 1이 가장 크고 ~ 6이 가장 작습니다. 보통은 h1은 제목, h2는 중제목 h3는 소제목 이러한 단위 별로 나눠서 사용합니다. ​ 주로

태그 처럼 문자를 입력할 때 사용되는 태그입니다. p태그는 block 형태, span태그는 inline 형태로 차이점을 들 수가 있는데요. – block은 new line을 생성해주며 크기 속성등 지정이 가능하고 – inline은 반대로 line을 생성하지 않고 크기 속성등 지정이 불가합니다. └> 만일 inline을 사용하고 싶은데 속성지정을 하고 싶은 경우 css에서 display : inline-block 을 통해 지정이 가능합니다. ​ 사용자 요청을 받는 태그로, type 지정에 따라 여러 표현이 가능합니다. 대표적인 예시는 – text : 모든문자 입력, – password : text와 같으나 문자에 암호화 표시를 해줌 – checkbox : 다중 선택 (ex x플x스 – 로맨스 액션 판타지 사극 다중선택) – radio : 택일 선택 (ex 설문지 조사 – 예, 아니오 단일선택) – date : 년-월-일 선택 (ex 생년월일, 항공편 일정 선택) – file : 파일첨부 기능 (ex 사진 첨부하는기능) – submit : 제출하는 기능 ​ *HTTP(하이퍼텍스트 전송규약 – HyperText Transfer Protocol) url에서 사용하는 익숙한 그 http가 맞습니다. 현재 네트워크 통신기기가 수없이 많은데 (휴대폰, 데스크탑, 노트북 ..)해당 통신방법을 통일하기 위해 규약을 정해서 표준화된 것이 HTTP입니다. 요약하자면 hypertext(HTML)를 전송하기 위한 프로토콜이며, hypertext는 서로 연결가능한(링크 or 버튼을 통해 페이지이동) 문서형태인데, 이 문서가 HTML입니다. 해서 어떠한 방식의 페이지인지 get, post 중 선택하는 것입니다. ​ *get get이라 함은 보통 보안에 취약하다고 합니다. 그 이유는 URL에 데이터가 들어가 있기 때문입니다. 대표적인 예시를 들자면, 포털사이트 검색 / 네이버 웹툰을 예를 들 수가 있겠습니다. ​ 아래 캡처에 나온 바와 같이 ?는 이전과 이후로 나뉘는데, 이전은 URL이 끝임을 알리고 이후는 데이터가 표현되는 부분(파라미터)입니다. &은 쌍으로 데이터를 보낼 때 사용합니다. 딕셔너리라고 하는데요. key=value를 의미합니다. ​ 네이버 검색을 했을 때 Ya Code라고 입력을 하면 아래처럼 URL이 나오는데요. 다른 문자로 검색을하면 query= 뒤에 내용만 바뀌는 사실을 발견했습니다. ​ 또한 네이버 웹툰 여신강림의 173화를 클릭했더니 데이터가 173화를 나타내주고, 어떤 요일의 웹툰인지 명확히 보여줌을 알 수가 있습니다. ​ 이에 따라 왜 보안에 취약하다고 하는 것인지, get의 특성을 알 수 있었습니다. 실제로 회원가입에도 get을 적용했다면 &id=Ya Code&pw=1234 이런식으로의 url이 나와있었겠죠? ​ 좀 더 간단히 설명드리자면, a태그를 눌러 폰트나 이미지를 클릭했을 때 페이지가 넘어가는 게 get방식입니다. 그에 따라 method를 따로 지정하지 않으면 get방식으로 defalut 들어 간다고 하네요. ​ 그래서 보편적으로 get은 “페이지”를 보여주는 용도로 주로 검색을 하는 등 보안이 중요하지 않은 페이지로 쓰인다고 합니다. 네이버 검색어 URL 네이버 웹툰 URL ​ *post get과 상반된 특성이 있다고 보시면 될 것 같습니다. get과 다르게 url에 데이터가 있지않으나, 내부적으로 데이터를 전송해줍니다. form태그가 포함되어 있는 코드들을(==데이터들을) 전송헤더 자체에 넣어서 보내줍니다. ​ 즉 input태그의 submit 버튼을 클릭하는 순간 → 사용자 입력한 데이터와 함께 form태그의 action속성에 입력한 페이지로 데이터들을 전송해주는 것입니다. 백엔드는 이를 request(클라이언트 요청)으로 받아 데이터 처리를 해주게 됩니다. (ID 중복등의 회원가입 처리여부) ​ 이것 또한 URL을 예시로 들자면 구글의 메일함을 열었을 때 나오는 페이지를 캡처해두었습니다. 이 역시 메일함은 본인 외 접속하면 안되기 때문에 보안이 중요한데 여기서 get과 다르게 주소에 데이터가 없으며, 직접 치고 접속을 하면 페이지 오류가 뜨면서 접속을 막아줍니다. ​ 해서 위의 예시처럼 보안이 중요한 시대인지라 post가 주로 사용이 되고는 있지만, get이 중복 요청을 대비해 데이터를 저장시키는 특성이 있기 때문에 post보다 속도가 빨라 일반페이지의 경우 get으로 많이 사용한다고 합니다. ​ 구글 메일 URL ​ ​ ​ ​ ​ [ 코드 ② 이메일 – 개인정보 수집동의 ]

이메일

@ 이메일 선택naver.comgmail.comdaum.nethanmail.nethotmail.comnate.comyahoo.co.krempas.comfreechal.comlycos.co.krkorea.comhanmir.comdreamwiz.comparan.com

개인정보 수집/이용동의

개인정보 처리방침

동의 비동의

▶ 코드설명 ◀ 이메일 저는 아이디는 사용자 입력, 이메일 주소는 선택으로 받아서 해주었습니다. 아무래도 사용자가 입력을 하는 것보다는 지정된 문구 내에서 선택을 해주는게 오류가 덜할 것 같아서 select 태그를 이용해주었습니다. ​ 개인정보동의 옛날에는 회원가입을 했을 때 개인정보란 자각이 있지않았기에 크게 중요하지 않았었지만, 시대가 흐를 수록 개인정보가 매우 중요시 여기고 있습니다. ​ 이 때문에 사용자에게 어떠한 목적으로 사용하고 이 외에는 사용하지 않겠다 라는 제공처의 확실한 기준이 필요합니다. 그래야 사용자가 믿고 가입을 하여 서비스를 이용할 수가 있겠죠. ​ ​ 해서 저도 실제 유사한 회원가입을 만든다는 생각으로 개인정보동의 문구를 넣어주었고, 비동의가 체크가 되어있어야 사용자 입장에서 한번 더 생각하고 동의를 체크하기 때문에 해당부분에 selected속성을 넣어주어 비동의가 default 체크가 되도록 해주었습니다. ​ 가입버튼 해당 부분은 가입 처리 진행을 위해 input-submit 속성을 두었습니다. 현재는 백엔드 기능이 들어가있지 않아 유효성 검사가 다이지만, form태그가 활성화되려면 submit 속성을 통해 될 수 있기때문에 데이터정보를 넘기고 싶은 경우 해당 속성을 이용해 주셔야 겠습니다. 그래야 사용자 요청(가입 : submit) → Form Post 방식의 페이지로 데이터 전달 → Model, Controller 에서 DB를 통해 비교를 하여 가입 가능여부 반환 하는 등 이런식의 구성이 이루어 질 수 있겠습니다. ​ ▶ 태그설명 ◀ option과 세트로 사용이 되며, 하위의 option 태그들 중에서 택일을 할 수 있도록 나타내주는 태그입니다. 주로 위에서 보신 이메일 주소처럼 정확한 데이터를 받아야 할 때 주로 사용이 됩니다. ​ 말 그대로 이름표란 의미를 지니고 있으며, 입력 창과(input, button 등) 연결되어 주로 사용됩니다. 실제로 연결이 되어 동의 버튼이 아니라, 글자 부분을 선택해도 동의에 대한 라벨이기 때문에 인지를 하여 글자로 선택해도 동의로 체크가 됩니다. ​ ​ 3. CSS 위에서 벤치마킹한 코드 + 제가 입력한 코드를 합쳐서 CSS를 해보겠습니다. ​ 코드가 길기 때문에 요약해서 가져왔습니다. ​ @charset “UTF-8”; @import url(‘https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap’); /*헤더 애니메이션 부여*/ @keyframes headerMove{ 0% {transform: translate(0px); } 50% {transform: translate(400px); } 100% {transform: translate(0,0);} } /*헤더 이미지*/ #header img{ width : 700px; height: 230px; animation-name: headerMove; animation-duration: 3s; animation-iteration-count: infinite; } /*헤더의 부제목*/ #header p{ font-size : 20px; font-family: ‘Gowun Dodum’, sans-serif; margin-top : 50px; margin-bottom: 2%; } /*벤치마킹 – 박스 디자인*/ .box { margin : 0px auto; display: block; width: 60%; height: 51px; padding-top: 10px; padding-right: 110px; padding-bottom: 10px; padding-left: 14px; background: #fff; box-sizing: border-box; vertical-align: top; vertical-align: top; } /*벤치마킹 – input 디자인*/ .int { display: block; position: relative; width: 100%; height: 29px; border: solid 1px #dadada; padding-right: 25px; line-height: 29px; border: none; background: #fff; font-size: 15px; box-sizing: border-box; z-index: 10; } body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h3, h5, h6, input, legend, li, ol, p, select, option, div, table, label, td, textarea, th, ul { margin: 0; padding: 0; } @keyframes headerMove keyframes 란 애니메이션의 구간이라고 보시면 좋을 것 같습니다. 저는 특정 구간까지 움직이는 모션을 주고 싶었기 때문에 구간별로 두었습니다. 저는 시작부분인 0%에서 제자리에 있다가 → 50%로 시작하면서 width가 400px까지 이동을 하고 → 100% 끝나는 시점에서 0px로 다시 돌아오는 애니메이션을 주었습니다. ​ 애니메이션을 적용해야겠다 라고 생각이 든 이유는 배달모티브로 했기 때문에 배달을 하는 것처럼 양옆으로 반복하는 움직이는 동작으로 포인트를 주는게 좋겠다 라는 생각이 들었습니다. ​ #header img 해당 부분이 위 keyframes 주인공인데요. 저는 헤더를 텍스트가 아닌 이미지로 표현을 해주었습니다. ​ 글자로만 넣으려니 밋밋하다고 생각이 들어서 이미지를 찾는데, 저작권 문제도 있고하니.. 무료 이미지로 서치하다가 제 성에 안차서 제가 직접 ppt에서 디자인했습니다. ppt가 여러모로 쓸모가 아주 좋더라구요. ㅋㅋㅋ 도형으로 여기저기 다듬으며 장인의 손길로 만들어냈습니다.. 해당 이미지는 아래 수행결과 동영상으로 보실 수 있습니다. ​ 이미지를 그대로 넣으려니 크기 때문에 이미지가 깨져서 길이와(width) 높이를(height) 지정을 해주었습니다. 애니메이션 frame 만들었으니 적용대상에다가 name을 넣어주어야해서 프레임명을 넣어주었습니다. – animation-duration : 지정한 시간에 맞게 애니메이션이 동작합니다. 저는 3초로 설정해 주었습니다. – animation-iteration-count : 몇번을 반복할 것인지 정의하는 속성입니다. 계속 반복해주고 싶은 경우, 저처럼 infinite로 입력해주면 되겠습니다. ​ #header p 헤더 밑에 간단하게 문구를 추가하고자 함에 따라 css도 해주었습니다. 이 부분에 폰트 디자인을 해주고 싶어서 구글에서 제공하는 폰트를 통해 넣어주었습니다. 링크는 아래로 참고해 주시면 되겠으며, ​ 추가할 폰트를 선택하면 select this style버튼을 통해 또는 @import 중 방법을 택일해서 가져올 수가 있는데, 저는 import 형식이 더 편해서 스타일에 import를 해주고 css에다가 font-family속성을 통해 제공되는 코드로 똑같이 입력을 하니 폰트 적용이 잘 되더라구요. ​ 다음으로는 margin부분입니다. 저는 위아래로 간격을 두고 싶어서 해당 코드와 같이 반영을 해주었습니다. ​ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com ​ .box .int 네이버에서 벤치마킹한 css 코드입니다. box 클래스에서는 말 그대로 박스디자인을 나타내준거고, int 클래스는 입력부분에 디자인을 나타냈습니다. ​ ​ 끝으로는 모든 태그들의 margin, padding을 0으로 부여를 했는데요. 위에서도 언급이 되었지만 통일성이 있어야하기 때문에 기본 0으로 초기화를 해줌에 따라 지정안한 태그들은 defalut로 0이 지정되게끔 부여를 해주었습니다. ​ 사실 태그를 하나하나 지정안해도 “*”한번의 입력을 통해 모두 통일을 시킬순있는데요. 사용을 안한 태그들까지 모두 적용을 하려하니 속도가 늦어져서, 단일태그로 넣어주면 훨씬 빠르다고 하니 이점 유의하시면 좋을 듯 합니다! ​ ​ 3. Script – 유효성검사 대망의 자바스크립트입니다. 사실 회원가입에서의 핵심은 유효성 검사라고 생각합니다. 코드를 하나하나 입력하려니 코드 가독성이 떨어져서 뭔가 없을까하다가.. 찾아낸게 정규식입니다. ​ 저는 유효성검사라면 틈이 없도록 구현 해놓는 것을 선호합니다. 이게 왠지 승부욕이 생기더라구요..ㅋㅋㅋ ​ 실제로 피드백 받았을 때 학습 중에 꼼꼼한 유효성검사는 첨보신다며.. 뿌듯했었습니다. ​ 나름 급하게 하다보니 반복문으로 처리할 수 있는 코드들을 풀어써서 개인적으로 아쉽긴 하지만, 향후 팀프로젝트에서 develop하여 코드를 간략하게 수정을 해보도록 하겠습니다. ​ 그러면 입력한 코드를 설명드리도록 하겠습니다. ​ //회원가입 유효성검사 // 자원을 화면에 로드하게 되면 수행할 동작(==function) window.onload = function() { var join = document.join; //form데이터를 모두 join변수에 저장 // 유효성검사할 부분을 class로 부여했기에 check class 태그를 모두 input에 저장 가져옴 // 이때 input 한 태그당 배열 인덱스로 받는다. var input = document.querySelectorAll(‘.check’); // 오류 문구 //errorId : span의 id들(각 요소마다 나타낼 오류를 표시하기 위함) // error : class list의 하위 span을 모두 불러냄(일괄 처리를 위함 – 반복문) var errorId = [ “idError”, “pwError”, “pwCheckError”, “nameError”, “phoneNumError”, “emailError” ]; var error = document.querySelectorAll(‘.list > span’); // 오류문구 초기화 메서드 // 오류 표시 후, 사용자가 올바르게 수정을 하면 텍스트가 사라지는 모습을 구현 function innerReset(error){ for (var i = 0; i < error.length; i++) { error[i].innerHTML = ""; } } // 초기화 메서드 호출 innerReset(error); // [ ID 입력문자 유효성검사 ] join.id.onkeydown = function(){ innerReset(error); // 초기화 메서드 호출 var idLimit = /^[a-zA-Z0-9-_]{5,20}$/; //정규식 5~20자 (a~z, A~Z, 0~9, -, _만 입력가능) if (!idLimit.test(input[0].value)) { //입력값과 정규식 범위와 같지 않다면 // id의 오류 문구삽입 document.getElementById(errorId[0]).innerHTML = "5~20자의 영문 소대문자, 숫자와 특수기호(_),(-)만 사용 가능합니다."; } } // [ PW 입력문자 유효성검사 ] join.pw.onkeydown = function(){ innerReset(error); // 초기화 메서드 호출 var pwLimit = /^[a-zA-Z0-9~!@#$%^&*()_-]{10,20}$/; //정규식(a~z, A~Z, 0~9, ~!@#$%^&*()_- 만 입력가능) if (!pwLimit.test(input[1].value)) { //입력값과 정규식 범위와 같지 않다면 // pw의 오류 문구삽입 document.getElementById(errorId[1]).innerHTML = " 10~20자의 영문 소대문자, 숫자와 특수기호 '~!@#$%^&*()_-'만 사용 가능합니다."; } } // [ PW 재확인 입력문자 초기화 ] //비밀번호 동일여부는 submit 버튼 클릭시 검사해줄 예정 join.pwCheck.onkeydown = function(){ // pw의 오류 문구삽입 innerReset(error);// 오류문구 초기화 } // [ 휴대폰번호 입력문자 유효성검사 ] join.phoneNum.onkeydown = function(){ //입력값과 정규식 범위와 같지 않다면 innerReset(error); // 초기화 메서드 호출 var pnumLimit = /^01[0|1|6|7|8|9]{1}[0-9]{8}$/; // 정규식(^$--> 문자의미, 01, (6자리중 “1자리”), 0~9–> “8자리”) if (!pnumLimit.test(input[4].value)) { //입력값과 정규식 범위와 같지 않다면 // pw의 오류 문구삽입 document.getElementById(errorId[4]).innerHTML = ” 올바른 형식이 아닙니다. 다시 확인해주세요.”; } } // [ 이메일 입력 유효성검사 ] join.email.onkeydown = function(){ //입력값과 정규식 범위와 같지 않다면 innerReset(error); // 초기화 메서드 호출 var emailLimit = /[0-9a-zA-Z-_.]/; // 정규식 0~9, a~z, A~Z, -, _, .내에서만 입력가능 if (!emailLimit.test(input[5].value)) { //입력값과 정규식 범위와 같지 않다면 // 이메일의 오류 문구삽입 document.getElementById(errorId[5]).innerHTML = ” 올바른 형식이 아닙니다. 영문,숫자, (-)(_)(.) 입력만 가능합니다.”; } } 세부 설명은 주석으로 달아놓았으니 추가 설명 부분만 기재했습니다. ​ window라는 Bom의 클래스를 활용하여 onload == 페이지를 화면에 로드하면 수행할 동작을 정의 했습니다. ​ ​ 변수 – join 처음에 join이라는 변수에다가 form의 name을 넘겨주어 내부의 모든 데이터를 join에 저장을해두었습니다. 변수를 활용하지 않으면 매번 document 속성으로 불러내야하니 코드의 간결함을 위해 변수를 활용하고자 했습니다. ​ 변수 – input, errorId, error 이 역시도 위와 동일한 이유로 만들어둔 변수입니다. ​ 함수 – innerReset 해당 부분은 테스트를 하면서 함수를 만들어주어야겠다 라고 생각이 들어 구현해낸 함수입니다. 유효성검사만 처리했더니 잘 입력한 텍스트부분에서 오류문구가 사라지지 않는 버그를 발견했습니다. 역시.. 개발자는 하나하나 구현해야한다는 걸 새삼 깨닫습니다. ​ 여러 번 호출을 할 것으로 예상이 되어 함수 자체를 만들어두었고, 유효성 검사 전에 매번 호출하여 초기화를 해주는 작업을 해주었습니다. ​ 유효성검사① – id, pw, pwCheck, phoneNum, email 각각의 이벤트를 부여함으로써 키를 누르거나 뗐을 때 function을 정의함으로써 동작을 일으켰습니다. 여기서 onkeydown이라 함은 사용자가 키보드를 눌렀을 때 (텍스트 입력창이 가있으면) 오류 범위에 벗어나면 오류문구를 출력합니다. ​ 유효성검사를 번호로 나눈 이유는 처음에 네이버 벤치마킹을 했을 때 텍스트만 입력을 했는데도 오류문구가 나오는 점 을 발견하였는데, 저도 해당 기능을 구현하고자 가입버튼을 누르지 않고도 오류를 표시하여 사용자가 바로바로 수정할 수 있도록 편리성을 생각해 넣은 유효성검사 1탄입니다. ​ ​ 우선은 정규식을 통해 제한범위를 설정해주었습니다. 다소 생소할 분들을 위해 idLimit를 예시로 들자면, /^[a-zA-Z0-9-_]{5,20}$/; /는 정규식 시작과 끝을 의미 ^는 문자시작, $는 문자끝 []는 문자의 범위 -는 문자나 숫자 사이에 있을 경우 적용이 되며, 흔히 아는 ~의 기호와 같다고 보면 됩니다. (ex a부터~z까지) 요약하자면, 어디부터 – 어디까지 를 의미함 -_ 는 의미는 없으며, 특수기호를 아무거나 입력하면 안되니 기호 허용범위가 “-“, ” _”이기 때문에 포함시켜주었습니다. {} 양의 정수로만 입력이 가능하며, 앞 문자 <= 뒷문자 를 만족합니다. 즉 idLimit에서는 []내 범위기준의 최소 5자이상, 20자 이하인 것입니다. ​ ​ ​ 스크립트 관련한 설명은 이전게시물에서 상세히 나와있으니 필요하신 분은 확인해 주시면 되겠습니다! [자바스크립트] Today's : 주사위 게임 [개발환경] IDE - JAVA Eclipse win32-x86 Web - TomCat v8.5 ┌────주사위 게임────┐... blog.naver.com ​ ​ ​ //submit 실행시 수행할 동작 join.onsubmit = function() { //join에서 submit이 실행된다면 수행할 함수 var errorStr = [ " 아이디를", " 비밀번호를", " 비밀번호 확인을", " 성함을", " 휴대폰번호를", " 이메일을" ]; innerReset(error); // 오류문구 초기화 // [ input 공백확인 ] for (var i = 0; i < input.length - 1; i++) { // -1 == submit제외 if (!input[i].value) { document.getElementById(errorId[i]).innerHTML = errorStr[i]+ " 입력해 주세요."; input[i].focus(); // 포커스 이동 return false; // 종료 (포커스 이동유지를 위해 false 종료) } } // [주소 input 공백확인] {//지역변수 스코프 조정(address) -일회성사용 var inputAddress = document.querySelectorAll('.addressCheck'); for(var i = 0; i < inputAddress.length; i++){ //console.log(inputAddress[i]); if(!inputAddress[i].value){ document.getElementById("addressError").innerHTML = " 주소 혹은 상세주소를 입력해주세요."; return false; } } } //유효성검사) 비밀번호 재확인 if (join.pw.value != join.pwCheck.value) { document.getElementById("pwCheckError").innerHTML = " 비밀번호가 일치하지 않습니다."; join.pwCheck.focus(); // 포커스 이동 return false; } // 정규식 변수 모음 var idLimit = /^[a-zA-Z0-9-_]{5,20}$/; //정규식(a~z, A~Z, 0~9, -, _만 입력가능) var pwLimit = /^[a-zA-Z0-9~!@#$%^&*()_-]{10,20}$/;///[a-zA-Z0-9]{10, 20}/; //정규식(a~z, A~Z, 0~9,~!@#$%^&*()_-특수문자 만 입력가능) var pnumLimit = /^01[0|1|6|7|8|9]{1}[0-9]{8}$/; // 01로 시작, 0,1,6,7,8,9 중 한자리, 0~9에서 8자리 입력 var emailLimit = /[0-9a-zA-Z-_.]/; // 정규식 0~9, a~z, A~Z, -, _, .내에서만 입력가능 // [ ID 유효성검사 ] if (!idLimit.test(input[0].value)) { document.getElementById(errorId[0]).innerHTML = " 5~20자의 영문 소대문자, 숫자와 특수기호(_),(-)만 사용 가능합니다."; join.id.focus(); // 포커스 이동 return false; } // [ PW 유효성검사 ] if (!pwLimit.test(input[1].value)) { document.getElementById(errorId[1]).innerHTML = " 10~20자의 영문 소대문자, 숫자와 특수기호 '~!@#$%^&*()_-'만 사용 가능합니다."; //console.log(input[1].value); //console.log(pwLimit.test(input[1].value)); join.pw.focus(); // 포커스 이동 return false; } // [ 휴대폰번호 유효성검사 ] if (!pnumLimit.test(input[4].value)) { document.getElementById(errorId[4]).innerHTML = " 올바른 형식이 아닙니다. 다시 확인해주세요."; join.phoneNum.focus(); // 포커스 이동 return false; } // [ email 아이디 유효성검사 ] if (!emailLimit.test(input[5].value)) { document.getElementById(errorId[5]).innerHTML = " 올바른 형식이 아닙니다. 영문,숫자, (-)(_)(.) 외 입력은 불가합니다."; join.email.focus(); // 포커스 이동 return false; } // [ email 주소선택 유효성검사 ] if (document.getElementById("mail_Select").value=="이메일 선택") { document.getElementById(errorId[5]).innerHTML = " 이메일을 선택해주세요."; return false; } //console.log(document.getElementById("mail_Select").value); // 개인정보 동의박스 체크 var consentCheck = document.getElementById("check"); //console.log(consentCheck); if(!consentCheck.checked){ document.getElementById("consentError").innerHTML = "개인정보 수집이용 동의를 해주세요."; return false; } alert("회원가입이 완료되었습니다. 참치라이더의 멤버가 되신 것을 환영합니다!! :D"); }//join.onsublit }//window 유효성검사 1차적으로 → 키를 눌렀을 때 오류문구를 알려 사용자가 선 수정을 할 수 있게 해주었었고, ​ 최종으로 가입버튼을 눌렀을 때 올바른 값을 입력을 해야만 페이지를 넘어갈 수 있도록 방어를 해줄 것입니다. ​ 이벤트를 활용하여 join(form)에서 onsubmit == 가입버튼을 누른다면 return을 활용하여 더 이상 수행되지 않도록 막아줄 예정입니다. ​ errorStr 위에서 flag가 true라면 모든 input을 비교하여 해당 input에 오류 텍스트를 나타내기 위해 넣어준 배열입니다. ​ 이후 매번 오류문구를 초기화 해주어야 하기 때문에 오류문구 초기화 메서드를 호출해 주었습니다. ​ input 공백 확인 for문을 활용해 조건문에서 value가 있다면 true를 반환하니 각요소를 비교하여 flag가 true로 변하면 반복문을 종료하고 오류문구를 삽입하는 코드를 넣어주었습니다. ​ 값이 없는 항목을 발견하면 document.getElementById가 배열을 통해 해당 index로 문구를 출력해주게 되며, focus을 해줌에 따라 해당 텍스트창으로 포커스를 표시해주어 바로 이동을 해주게 됩니다. ​ 주소 공백 확인 저만의 조금 특이한 방식이라 할 수가 있는데요. 변수를 생성한 목적이 일회성 일 때 , 이러한 변수가 쌓이게 되면 프로그램이 무거워지기 때문에 중괄호{}를 통해 지역변수를 생성함으로써, 스코프를 벗어나게 되면 변수가 소멸되는 방식입니다. 그러니 중괄호의 쓰고 안쓰고가 일회성 변수가 많아질 수록 효율성에서의 차이가 클 것 같습니다. ​ 우선 저는 주소에서는 두 가지를 class를 부여했는데요. 우편번호와, 상세주소만 넣어주었습니다. ​ 이유는 제가 API를 테스트해보니 어떤 주소는 참고주소가 입력이 안되어 있는 경우가 있더라구요 우편번호만 넣으면 나머지 요소들은 자동으로 들어가지니 우편번호로 통일해 주었고, 상세주소는 사용자가 입력해야될 텍스트이므로 처리 해주었습니다. ​ 해서 두가지중 하나라도 입력이 안되어 있으면 입력하라는 오류문구를 표시해주었습니다. ​ 비밀번호 재확인 비밀번호는 길기도하고, 표시를 누르지 않는한 비밀번호 입력한 텍스트가 안보이기 때문에 재확인은 반드시 넣어주어야 할 것 같습니다. 해서 명칭대로 비밀번호와 같지않으면 일치하지 않다는 오류문구를 출력해 주었습니다. ​ id pw pnum email Limit 위 유효성검사① 과 같은 코드입니다. 차이점이라 함은 커서이동에 중점을 두었는데요. 위에서는 해당 텍스트를 입력을 했을 때 오류가 나타나므로 커서를 두지 않았는데 여기서는 가입버튼을 클릭했을 때 나타나는 오류로, 사용자가 스크롤을 올리지 않는 한 볼 수가 없기 때문에 강제로 커서를 두어 화면에 표시해주었습니다. ​ 개인정보 동의 체크 개인정보동의 input 부분에 id를 부여하여 checked 이벤트를 통해 체크가 되어있지 않다면 오류를 표시해주었습니다. ​ 여기까지가 유효성 검사였으며, 유효성 검사에서 걸리지않고 잘 입력이 되었다면 alert를 통해 회원가입 완료 안내창이 나옵니다. ​ ​ 그럼 실제로 잘 적용이 되었는지 아래 수행결과 영상에서 보도록 하겠습니다. XD ​ ​ ​ 수행결과 ​ ​ 기능들이 성실히 잘 동작하는 모습을 보실 수 있습니다. ​ 작업을 다 마치고 나니 외국인 휴대폰번호 입력 불가, 특정 주소의 경우 지번이 아닌 예상지번 주소가 있어 텍스트 밖으로 나오는 등 아쉬운 점들이 몇 가지 보였지만, 그래도 이 정도면..? 괜찮은 작업물 이었다고 생각합니다..! (제 생각인가요..ㅎㅎ) ​ 어쨌든!! 이번 작업을 계기로 학습이 꽤나 되었어서 뿌듯함이 남습니다. ​ 그럼 다음을 기약하며, continue.... ​ ​ ​ ​ ​ ​ ​ ​ //이상// ​ 결과물은 항상 볼때마다 이쁘구..사랑스럽구.... 그렇네요.....? ​ ​ ​ ​ ​ ​ ​ ​ ​ 인쇄

[HTML]회원가입창 만들기

* 회원가입 폼 만들기

HTML의 기본기를 익힌 후 회원가입 폼을 만들어보자. 필자는 체크박스 체크여부를 자바스크립트를 이용하여 중복체크 없이 하나씩만 체크 하도록 하였다. 자바스크립트 내용은 다음 포스팅에 쓰도록 하겠다. HTML의 폼을 만들기위한 목적이라면 자바스크립트를 굳이 넣지 않아도 된다.

호환을 위해 internet explorer보다 chrome으로 연결하여 실행시키는 것을 추천한다.

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 < !DOCTYPE html > < html > < head > < title > 회원 가입 < / title > < script type = "text/javascript" > function check_only(chk){ var obj = document .getElementsByName( “chk” ); for ( var i = 0 ; i < obj. length ; i + + ){ if (obj[i] ! = chk){ obj[i].checked = false ; } } } < / script > < style type = "text/css" >

< / style > < / head > < body > < p > < h1 align = "center" > 회원 가입 < / h1 > < / p > < div align = "legt" > 만든이 : jerry < / div > < br > < FORM action = "mailto:[email protected]?subject=안녕하세요" method = "post" enctype = "text/plain" > < table width = "50%" height = "80" border = "1" align = "center" cellpadding = "5" cellspacing = "0" bordercolor = "#9999FF" > < tr align = "center" > < td colspan = "2" align = "cener" bgcolor = "skyblue" > < div style = "font-weight: bold; font-size: 18px" > 회원 기본 정보 < / div > < / td > < / tr > < tr > < td bgcolor = "pink" align = "center" > < div style = "font-weight: bold;" > 아이디: < / div > < / td > < td > < input type = "text" name = "my_id" size = "12" maxlength = "12" > 4~12자의 영문 대소문자와 숫자로만 입력 < / td > < / tr > < tr > < td bgcolor = "pink" align = "center" > < div style = "font-weight: bold;" > 비밀번호: < / div > < / td > < td > < input type = "password" name = "my_pwd" size = "12" maxlength = "12" > 4~12자의 영문 대소문자와 숫자로만 입력 < / td > < / tr > < tr > < td bgcolor = "pink" align = "center" > < div style = "font-weight: bold;" > 비밀번호 확인: < / div > < / td > < td > < input type = "password" name = "my_pwd2" size = "12" maxlength = "12" > < / td > < / tr > < tr > < td bgcolor = "pink" align = "center" > < div style = "font-weight: bold;" > 메일주소: < / div > < / td > < td > < input type = "text" name = "my_mail" size = "30" maxlength = "30" > 예)[email protected] < / td > < / tr > < tr > < td bgcolor = "pink" align = "center" > < div style = "font-weight: bold;" > 이름: < / div > < / td > < td > < input type = "text" name = "my_name" size = "10" maxlength = "10" > < / td > < / tr > < tr align = "center" > < td colspan = "2" bgcolor = "skyblue" > < div style = "font-weight: bold; font-size: 18px" > 개인 신상 정보 < / div > < / td > < / tr > < tr > < td bgcolor = "pink" align = "center" > < div style = "font-weight: bold;" > 주민등록번호: < / div > < / td > < td > < input type = "text" name = "my_num1" size = "6" maxlength = "6" > – < input type = "password" name = "my_num2" size = "7" maxlength = "7" > 예)123456-1234567 < / td > < / tr > < tr > < td bgcolor = "pink" align = "center" > < div style = "font-weight: bold;" > 생일: < / div > < / td > < td > < input type = "text" name = "my_birth" size = "4" maxlength = "4" > 년 < select name = "월" > < option value = "1" selected = "selected" > 1 < / option > < option value = "2" > 2 < / option > < option value = "3" > 3 < / option > < option value = "4" > 4 < / option > < option value = "5" > 5 < / option > < option value = "6" > 6 < / option > < option value = "7" > 7 < / option > < option value = "8" > 8 < / option > < option value = "9" > 9 < / option > < option value = "10" > 10 < / option > < option value = "11" > 11 < / option > < option value = "12" > 12 < / option > < / select > 월 < select name = "일" > < option value = "1" selected = "selected" > 1 < / option > < option value = "2" > 2 < / option > < option value = "3" > 3 < / option > < option value = "4" > 4 < / option > < option value = "5" > 5 < / option > < option value = "6" > 6 < / option > < option value = "7" > 7 < / option > < option value = "8" > 8 < / option > < option value = "9" > 9 < / option > < option value = "10" > 10 < / option > < option value = "11" > 11 < / option > < option value = "12" > 12 < / option > < option value = "13" > 13 < / option > < option value = "14" > 14 < / option > < option value = "15" > 15 < / option > < option value = "16" > 16 < / option > < option value = "17" > 17 < / option > < option value = "18" > 18 < / option > < option value = "19" > 19 < / option > < option value = "20" > 20 < / option > < option value = "21" > 21 < / option > < option value = "22" > 22 < / option > < option value = "23" > 23 < / option > < option value = "24" > 24 < / option > < option value = "25" > 25 < / option > < option value = "26" > 26 < / option > < option value = "27" > 27 < / option > < option value = "28" > 28 < / option > < option value = "29" > 29 < / option > < option value = "30" > 30 < / option > < option value = "31" > 31 < / option > < / select > 일 < / td > < / tr > < tr > < td bgcolor = "pink" align = "center" > < div style = "font-weight: bold;" > 관심분야: < / div > < / td > < td > < FORM name = chkForm action = "" method = post > < input type = "checkbox" name = "chk" value = "COMPUTER" onclick = "check_only(this)" > 컴퓨터 < input type = "checkbox" name = "chk" value = "INTERNET" onclick = "check_only(this)" > 인터넷 < input type = "checkbox" name = "chk" value = "TRABLE" onclick = "check_only(this)" > 여행 < input type = "checkbox" name = "chk" value = "MOVIE" onclick = "check_only(this)" > 영화감상 < input type = "checkbox" name = "chk" value = "MUSIC" onclick = "check_only(this)" > 음악감상 < / FORM > < / td > < / tr > < tr > < td bgcolor = "pink" align = "center" > < div style = "font-weight: bold;" > 자기소개: < / div > < / td > < td > < textarea name = "my_intro" cols = "70" rows = "5" > < / textarea > < / td > < / tr > < / table > < p align = "center" > < input type = "submit" value = "회원 가입" > < input type = "reset" value = "다시 입력" > < / FORM > < / p > < / body > < / html > Colored by Color Scripter cs

* 완성 모습

회원가입 폼

반응형

See the Pen VwpYNBm by CodingCitron (@codingcitron) on CodePen.

회원가입 폼을 만들어 봤다.

만들때마다 느끼지만 상당히 어렵다고 느껴지는..

728×90

키워드에 대한 정보 회원 가입 창

다음은 Bing에서 회원 가입 창 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.

이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!

사람들이 주제에 대해 자주 검색하는 키워드 로그인 페이지 만들기 실무편 | Animated Login page Tutorial (Label Text Animation)

• 로그인 페이지 만들기
• 로그인 페이지 코딩
• animated login page
• login page effect
• 따라하기 쉬운 웹코딩 로그인 페이지
• 로그인 페이지 스타일
• login html css jquery tutorial
• 웹강좌 기초편 로그인 페이지
• 퍼블리셔를 위한 웹강좌
• 로그인 페이지 퍼블리싱
• input 자동완성끄기 필수값 입력
• 누구나 할수 있는 로그인 페이지
• animated login form tutorial
• 웹퍼블리셔 실무편
• 빈입력 폼 전송시 텍스트 애니메이션
• 버튼 클릭 시 폼 애니메이션
• login form html css
• jquery css login page
• login form
• animated login form
• 웹코딩 로그인 퍼블리싱

로그인 #페이지 #만들기 #실무편 #| #Animated #Login #page #Tutorial #(Label #Text #Animation)

---

YouTube에서 회원 가입 창 주제의 다른 동영상 보기

주제에 대한 기사를 시청해 주셔서 감사합니다 로그인 페이지 만들기 실무편 | Animated Login page Tutorial (Label Text Animation) | 회원 가입 창, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.

Leave a Comment Cancel reply

Comment

Name

Email Website

Save my name, email, and website in this browser for the next time I comment.