HTML 복습 프로젝트

배운 내용
1. HTML과 CSS의 기초
2. HTML은 구조, CSS는 시각적 부분, JS는 기능 동작을 담당함
3. HTML은 태그로 이루어져있음.
4. 태그는 약속된 명령어이며 고유한 기능을 갖고있으며, 속성과 값으로 부가적 기능이 구현가능함
5. CSS는 태그의 속성과 값으로 쓸 수도 있고, HTML 파일 안에 style 태그를 통해 사용할 수 있고, 별도의 CSS 파일로 불러와서 사용이 가능함
6. CSS 는 어떤 태그에다가 어떤 디자인을 입힐 것인지 연결해주기 위해 선택자 라는것이 있음.
7. 변수, 객체, 데이터 타입, 연산자, 조건문, 반복문, 함수, 도움조작 등등...
8. document = html로 가서 작업을 해라
등등등...

목표

회원가입 폼 만들기

• CSS 는 Flex를 활용
• 인증번호 전송, 인증확인 버튼은 disabled 속성을 주어서 조건에따라 클릭 기능 활성화
• 지역선택은 서울, 인천, 경기만
• 지역을 선택하세요 글이 가장 기본으로 나오며 선택은 불가능 하도록
• 성별은 동시선택이 안되도록
• 가입하기 버튼은 기본 비활성화
• 휴대번호는 3자리 4자리 4자리로 자동 커서이동, 인증번호 전송은 핸드폰 번호를 전부 입력해야 클릭 가능 (글자 색상 #0068FF)
• 버튼 클릭하는 곳은 마우스커서가 손가락 모양이 되도록
• 인증번호 전송 버튼을 누르면 좌측에 랜덤한 인증번호 6자리 생성
• 타이머는 3분에서 시작 1초씩 감소 , 인증 확인 버튼 활성화 (색상 #0068FF, 글자색상 #FFFFFF)
• 3분 내로 인증 확인버튼을 누르면 메시지로 "인증이 완료되었습니다" 띄우기
• 3분동안 인증하지 않으면 버튼을 회색으로 되돌리고 비활성화
• 인증번호도 기본은 000000, 3분이 지나면 000000으로 돌아가기, 시간도 3분으로 돌아가기
• 인증완료까지 되면 가입하기 버튼이 활성화
• 핸드폰인증하고 가입하기 버튼을 누르더라도 다른 항목이 채워져있지 않으면 해당 항목 아래에 작게 ~~~이 올바르지 않습니다 출력
• 입력이 완료 되더라도 이메일 = @가 포함되어야함, 비밀번호1,2 가 동일해야함, 두가지 조건또한 맞지 않으면 경고 표시
• 모두 입력하고 가입하기를 누르면 메시지로 '가입을 축하합니다' 출력