HTML, CSS, Javascript 연습용으로 네이버 회원가입 페이지를 따라 만들어봤습니다.
Javascript로 사용자가 데이터를 입력했는지 확인하기 + 사용자가 입력한 데이터가 조건에 맞는지 확인하기(유효성 검사) -> (데이터가 입력되지 않았거나 조건에 맞지 않다면) 에러메세지 출력하기
이렇게 간단한 기능을 구현해봤습니다.
이 글에서는 결과물과 html, css 소스코드를 간단한 설명과 함께 보여드리려고 합니다.
(휴대폰 인증, Footer 부분 등은 생략하고 만들었습니다. )
하필이면 제가 이거 만들고 나서 며칠 안돼서 네이버에서 회원가입페이지 로고랑 자물쇠 모양이랑 색상이랑 이것저것 수정했더라구요. 제가 만든 건 약간 구버전이 되어버렸네요ㅜ
* 글 하단에 html, css 전체 소스코드를 올려놨습니다. html, css, js 파일은 github에 전부 올려놨어요. github링크도 하단에 같이 첨부해놓았습니다.
1. HTML 코드
간단하게 작성했습니다.
먼저 전체 페이지 구성은 div태그를 이용해 header, wrapper, wrapper 안의 content 이렇게 세 부분으로 작성했습니다.
태그로 묶어서 넣어주고, 버튼도 content 안에 포함시켰습니다.
id 입력폼 부분
content 안에 작성되어있는 id 입력폼 부분 소스코드입니다.
코드를 보시면 “아이디”라는 입력폼의 타이틀을 ,
태그로 감싸 줬는데
h3 태그는 의미상 구분 단위로 쓰기 위해서(입력폼의 제목이라는 뜻) + h3 태그를 모아서 한 번에 스타일을 적용하기 위해서 사용했고,
label 태그는 “아이디”라는 글자를 클릭하면 자동으로 아이디 입력폼에 포커스가 되는 기능을 주기 위해서 사용했습니다.
지금 보니까 h3 태그는 생략해도 큰 문제가 없을 것 같네요..?
*label태그에는 태그를 클릭하면, 동일한 아이디값을 가진 태그의 아이디값을 “id”로 동일하게 설정했습니다.
입력폼은 span태그로 묶어주고, 그 안에 텍스트를 입력받을
입력폼 전체를 묶은 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 입력폼과 비슷한 구성으로 작성했기 때문에 생략하고 넘어가겠습니다.
태그 구성이 조금 다른 생년월일 입력폼만 추가로 볼게요
생년월일 입력폼
생년월일 입력폼 부분의 소스코드입니다.
크게 보면 (입력폼 전체를 묶는)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 소스코드
더보기
네이버 : 회원가입
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; }
회원가입 페이지 구현하기 : input 내부에 버튼, 이메일 도메인 드롭다운
HTML, CSS, Javascript 연습 겸 웹페이지의 기본적인 기능인 회원가입, 로그인을 구현해보려고 한다. 이벤트 처리, ID 중복 확인, 유효성 검사 등 퍼블리싱만 하던 프로젝트보다는 좀더 신경써야 할 부분들이 많다. 가능하면 서버쪽도 간단하게 구현해서 실제 데이터 송수신까지 진행해보려고 한다.
UI 디자인, 설계
구글에 회원가입 페이지를 검색해서 나오는 여러 화면들을 참고해서 만들어봤다. 흰 배경과 검정색 폰트 색상으로 깔끔하게 디자인했고, 버튼에 보라색 포인트를 주었다.
엑셀에 대략적으로 체크 리스트를 작성해서 정리했다. 주로 문제가 발생하는 경우에 대한 케이스가 대부분이었다. 유효성 검사, 미입력에 대한 처리나 ID 중복 확인, 비밀번호 재입력 확인 등 고려해야 할 사항들을 적어놓고 구현을 시작했다.
개발 기록
구현이 어려웠던 부분이나 기록하고 싶은 부분 정리
input 안에 button 넣기
아이디 입력 input 태그 안에 아이디 중복 확인 버튼을 넣으려고 한다. 먼저, input과 button을 감싸는 div 태그를 하나 추가했다. 부모 div의 position을 relative, 자식인 button의 position을 absolute로 설정하고 부모의 오른쪽에서 조금 떨어진 곳에 위치하기 위해 right 값을 설정했다.
중복 확인
.info #info__id { position : relative ; } #info__id button { position : absolute ; width : 90px ; height : 40px ; top : 0 ; bottom : 0 ; right : 5px ; margin : auto 0 ; border-radius : 3px ; }
도메인 리스트 Drop-down 구현
클릭 시 드롭다운 보이기
자바스크립트를 통해 domain 클래스 클릭 시 domain__list에 active 클래스를 추가하는 방식으로 구현했다.
.domain { position : relative ; display : flex ; align-items : center ; margin-left : 10px ; cursor : pointer ; } .domain .domain__list { position : absolute ; top : 100% ; left : 0 ; width : 100% ; margin-top : 4px ; box-sizing : border-box ; border-radius : 1px ; border : 1px solid #d9d6d6 ; /* 리스트 안 보이게 하기 */ overflow : hidden ; max-height : 0 ; opacity : 0 ; transition : .3s ; } .domain .domain__list.active { /* 리스트 보이기 */ overflow-x : hidden ; overflow-y : auto ; opacity : 1 ; max-height : 60px ; }
active 클래스가 추가되면 드롭다운이 보이도록 구현했다. 추가되기 이전에는 overflow를 hidden, max-height를 0으로 설정해서 보이지 않게 했다. 그리고 추가된 이후에는 max-height를 설정해서 드롭다운 박스의 높이를 정했다. 그리고 overflow-y를 auto로 설정해서 내용이 보이게 했다.
const domainEl = document . querySelector ( ‘ .domain ‘ ) const domainListEl = document . querySelector ( ‘ .domain__list ‘ ) let isActiveDomainList = false domainEl . addEventListener ( ‘ click ‘ , function () { isActiveDomainList = ! isActiveDomainList // transition if ( isActiveDomainList ) { // active domain list domainListEl . classList . add ( ‘ active ‘ ) } else { // hide domain list domainListEl . classList . remove ( ‘ active ‘ ) } });
isActiveDomainList를 변수를 두어 domain 클래스를 클릭할 때마다 boolean 값이 반전되도록 했다. isActiveDomainList가 false, 즉 domain 리스트가 보이지 않는 상태이면 active 클래스를 추가한다. active 클래스를 추가하면 드롭다운 리스트가 보이게 된다.
스크롤바 디자인
.domain .domain__list ::-webkit-scrollbar { width : 4px ; } .domain .domain__list ::-webkit-scrollbar-thumb { background-color : #8d8d8d ; border-radius : 2px ; } .domain .domain__list ::-webkit-scrollbar-track { background-color : #ebe9e9 ; border-radius : 5px ; }
[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로 설정하였습니다.)
인증확인 버튼을 클릭하면 인증번호전송 버튼과 인증확인 버튼이 비활성화 되고
인증확인 버튼의 값이 “인증완료”로 바뀌게 됩니다.
가입하기 클릭 시 위와같이 이메일 형식이 맞지 않는다거나 이름 누락, 비밀번호와 비밀번호확인이 일치하지 않음, 지역 미선택, 성별 미선택 등등 입력이 올바르지 않다면 빨간 글씨로 에러를 표시해줍니다.
형식을 올바르게 입력하고 가입하기 버튼을 클릭하면 가입이 완료되었다는 메시지를 표시하도록 하였습니다.
📋 코드
회원가입 페이지
// 휴대폰 번호 입력 부분 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 네이버 회원가입 페이지 클론코딩(1)
728×90
네이버 회원가입페이지를 클론코딩해볼 생각이다.
단, 아직 JavaScript를 학습하지 않았기에 외형만 따라해볼 생각이다.
html 소스
결과물
Naver_SignUp
NAVER
아이디
비밀번호
비밀번호 재확인
이름
생년월일 월 1 2 3 4 5 6 7 8 9 10 11 12
성별 선택 남자 여자 선택 안함
본인 확인 이메일 (선택)
휴대전화 대한민국 +82 일본 +81
인증번호 받기
가입하기
이용약관 | 개인정보처리방침 | 책임의 한계와 법적고지 | 회원정보 고객센터
Naver Copyright Naver Corp. All Right Reserved.
티스토리툴바
외형이 매~우 다르지만… 뼈대는 같다
728×90
[CSS] 💍 로그인 / 회원가입 페이지 스타일 🖌️ 모음
Sign In / Sign Up 페이지 고퀄리티 CSS 모음
Codepen에서 괜찮은 디자인을 뽐내는 CSS 템플릿중에 로그인 및 회원가입 페이지 디자인 요소들 모아 간추려 포스팅 해보았다.
급하게 CSS 템플릿을 찾으면서도 모던하면서도 준수한 디자인 예시를 원할때 좋은 참고가 되기를 바란다.
로그인 / 회원가입 페이지
See the Pen Weekly Coding Challenge #1 – Double slider Sign in/up Form – Desktop Only by RH2O (@Rh2o) on CodePen.
See the Pen Neumorphic sign-up / sign-in form by Shruti (@Shruti-Ag) on CodePen.
See the Pen Slide Sign In/Sign Up form by Danielkvist (@danielarlert) on CodePen.
See the Pen Neumorphism Login Form by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.
See the Pen Login/Registration Form Transition by Nikolay Talanov (@suez) on CodePen.
See the Pen DailyUI #001 | Sign Up Form by Julie Park (@juliepark) on CodePen.
See the Pen RegView – Sign Up / Sign In by Alexis Bertin (@AlexisBertin) on CodePen.
See the Pen Day 001 Login Form by Mohan Khadka (@khadkamhn) on CodePen.
See the Pen Log In / Sign Up – pure css – #12 by Ivan Grozdic (@ig_design) on CodePen.
See the Pen Login & Sign Up Form Concept by Dany Santos (@THEORLAN2) on CodePen.
See the Pen Material Compact Login Animation by Yusuf Bakır (@yusufbkr) on CodePen.
See the Pen Login Form – Modal by Andy Tran (@andytran) on CodePen.
See the Pen Nice Login Screen by Chouaib Belagoun 👋 (@chouaibblgn45) on CodePen.
See the Pen animated form by technext (@technext) on CodePen.
See the Pen CSS Sign in / Sign up #09 by Akshay (@akshaycodes) on CodePen.
See the Pen Sign Up + Sign In + Reset Form by Darshan Rajadhyaksha (@dsr) on CodePen.
See the Pen Cool Sign In and Sign Up Form by Chandra Shekhar (@chandrashekhar) on CodePen.
See the Pen Double Slider Form ⚛ by Gabriele Corti (@borntofrappe) on CodePen.
See the Pen Sign in /Sign up – Destiny by Luciano Dantas (@ldantas_s) on CodePen.
See the Pen Sign Up/Sign In Responsive form by Puskar Adhikari (@thepuskar) on CodePen.
See the Pen Sign Up / Sign In 1 by Yulian (@Yulian_b) on CodePen.
See the Pen Sign up/ Sign in Form by Nathan Tutchton (@ntutchton) on CodePen.
See the Pen Sign Up & Sign In Form by Zain (@mr_zain699) on CodePen.
See the Pen Sign up, sign in form by Ivan Markovic (@ivanmarkovic) on CodePen.
See the Pen Sign-Up/Sign-In Forms by Klea Merkuri (@thehelpfultipper) on CodePen.
See the Pen Login and Registration Form by K.Mesbah (@KhalidMesbah) on CodePen.
See the Pen Responsive Sign Up & Sign In Form, Terms of Service and Recover Password v2 by Muhammad Gamal (@MuhammadGamalHamam) on CodePen.
See the Pen Responsive Sign Up & Sign In Form, Terms of Service and Recover Password v1 by Muhammad Gamal (@MuhammadGamalHamam) on CodePen.
See the Pen Responsive Login/Signup Modal Window by CodyHouse (@codyhouse) on CodePen.
See the Pen Flat Login Form 3.0 by Andy Tran (@andytran) on CodePen.
See the Pen Login form / daily challenge 16/11 by raphael ferrand (@goldenraphti) on CodePen.
See the Pen login/signup form animation by Shayan (@shayanea) on CodePen.
See the Pen Daily Ui #001 by j0be (@j0be) on CodePen.
See the Pen Responsive Signup/Login form by Mohamed Hasan (@Mhmdhasan) on CodePen.
로그인 페이지만
See the Pen Panda Login by Vineeth.TR (@vineethtrv) on CodePen.
See the Pen Css / html Login form by Timsux Wales (@timsux-wales) on CodePen.
See the Pen Flickering Login by Jeff Thomas (@aecend) on CodePen.
See the Pen Login Box Concept by Jamie Coulter (@jcoulterdesign) on CodePen.
See the Pen Calm breeze login screen by Lewi Hussey (@Lewitje) on CodePen.
See the Pen Wavy login form by Arief Rahman Yusniardi (@Ariefrahmany) on CodePen.
See the Pen 3D login form concept by Jenning (@jenning) on CodePen.
See the Pen Untitled by Milan Raring (@milanraring) on CodePen.
See the Pen Login by lsgrrd (@lsgrrd) on CodePen.
See the Pen Elegant Login Form with ParticlesJS (with form validation and show/hide password) by Anees Khan (@lordgamer2354) on CodePen.
See the Pen Login Form by Tony Banik (@banik) on CodePen.
See the Pen Folded Paper Login Form by Ryan Mulligan (@hexagoncircle) on CodePen.
See the Pen Responsive Login form by Despean (@deso3290) on CodePen.
See the Pen Awesome login form – HTML, CSS by khalid saifullah (@Khalideofficial) on CodePen.
See the Pen Snake highlight by Mikael Ainalem (@ainalem) on CodePen.
See the Pen Bootstrap Login Page by yangjaewon (@xmas1224) on CodePen.
See the Pen LogIn Form by Kamen Nedev (@nedev) on CodePen.
See the Pen Responsive Animated Login Form Using HTML & CSS & JavaScript by SH20RAJ (@SH20RAJ) on CodePen.
See the Pen Login Form with floating placeholder and light button by Soufiane Khalfaoui HaSsani (@soufiane-khalfaoui-hassani) on CodePen.
키워드에 대한 정보 회원 가입 페이지
다음은 Bing에서 회원 가입 페이지 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.
이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!
사람들이 주제에 대해 자주 검색하는 키워드 HTML5 – 11 [ FORM ] 회원가입 폼 만들기, input, text, email
회원가입폼 html 로그인 페이지 만들기 회원가입 html form form input 폼 html 웹표준 웹접근성 html5 강좌 Membership Form Create html login page
HTML5 #- #11 #[ #FORM #] #회원가입 #폼 #만들기, #input, #text, #email
YouTube에서 회원 가입 페이지 주제의 다른 동영상 보기
주제에 대한 기사를 시청해 주셔서 감사합니다 HTML5 – 11 [ FORM ] 회원가입 폼 만들기, input, text, email | 회원 가입 페이지
![HTML5 - 11 [ FORM ] 회원가입 폼 만들기, input, text, email](https://i.ytimg.com/vi/1IJP2xK8yCg/maxresdefault.jpg)