Web/PWA
-
[PWA] 회원 가입 페이지 유효성 검사 (비정규 표현식)Web/PWA 2022. 9. 14. 15:23
HTML 코드 JavaScript 코드 전체 코드 HTML 코드 회원 기본 정보 아이디: 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호: 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호확인: 메일주소: 예) id@domain.com 이름: 개인 신상 정보 생일: 년 1 2 3 4 5 6 7 8 9 10 11 12 월 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 일 관심분야: 컴퓨터 인터넷 여행 영화감상 음악감상 자기소개: HTML 코드는 예전에 올렸던 페이지와 크게 다르지 않고, 주민등록번호 입력하는 칸만 빠지게 되었다. 이전에 짰던 코드는 이 글에 있다. https://mpd253.tist..
-
[PWA] 회원 가입 페이지 유효성 검사 (정규 표현식)Web/PWA 2022. 9. 14. 15:03
HTML 코드 JavaScript 코드 전체 코드 HTML 코드 회원 기본 정보 아이디: 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호: 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호확인: 메일주소: 예) id@domain.com 이름: 개인 신상 정보 생일: 년 1 2 3 4 5 6 7 8 9 10 11 12 월 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 일 관심분야: 컴퓨터 인터넷 여행 영화감상 음악감상 자기소개: HTML 코드는 예전에 올렸던 페이지와 크게 다르지 않고, 주민등록번호 입력하는 칸만 빠지게 되었다. 이전에 짰던 코드는 이 글에 있다. https://mpd253.tist..
-
[PWA] 자바스크립트 계산기Web/PWA 2022. 9. 13. 17:50
HTML 코드 CSS 코드 JavaScript 코드 HTML & JavaScript 코드 HTML 코드 Clear = 1 2 3 + x^y 4 5 6 - sin 7 8 9 * cos 0 +/- . / tan 원래 만들고자 한 디자인이 있어, 정확히 따라해 보고자 버튼에 클래스 이름을 너무 많이 주었다. 막상 디자인을 보아하니 클래스 이름을 너무 많이 준 것 같아 코드가 복잡해 보인다. CSS 코드 #firstLine { text-align: center; } .button1 { width: 40%; color: blue; } #otherLines { text-align: center; } .button2 { width: 16%; color: blue; } .button3 { width: 16%; marg..
-
[PWA] 간단한 회원 가입 페이지 만들기Web/PWA 2022. 9. 9. 01:25
시나리오 전체 코드 HTML을 통해 간단한 회원 가입 페이지를 만들어 보았다. [ 시나리오 ] 사용자의 정보를 담을 수 있는 틀인 표, 태그를 만들고 그 안을 태그와 태그로 묶는다. 사용자는 본인의 정보를 에 입력한다. ( 단, 아이디, 비밀번호, 비밀번호 확인은 4~12자 글자 수 제한 ) 주민등록번호는 13자리를 입력해야 한다. ( ex) 1234561234567 = 13자리 ) 생일의 월과 일은 태그 안에 태그를 통해 설정한다. 관심분야의 체크박스는 를 통해 만든다. 자기소개란은 태그를 통해 구성한다. 위의 사용자 정보를 태그로 묶어 버튼이 가질 정보들을 묶는다. 회원 가입 버튼은 위의 조건들이 만족했을 때 태그의 action을 통해 메일을 보낼 수 있도록 한다. 다시 입력 버튼은 입력했던 내용들이..
-
[PWA] 글자 변환 & 미리 보기 (String methods, Document 객체)Web/PWA 2022. 9. 9. 00:58
시나리오 HTML 코드 JavaScript 코드 전체 코드 HTML, CSS, JavaScript를 배우고 만들어 낸 첫 결과물이다. [ 시나리오 ] 사용자는 'inputText'라는 id를 가진 태그에 입력을 하고 [미리보기] 버튼을 누르게 되면 색상, 크기, 체크된 글자 형태에 따른 결과값을 태그에 담아 미리 볼 수 있다. JavaScript의 String method를 사용하여 글자의 형태를 바꾸었다. JavaScript의 Document 객체의 getElementByID(), getElementsByName()을 이용하여 HTML에 있는 공통된 ID와 Name들을 모았다. 또한 이를 사용하기 위해 HTML에서도 태그들의 ID와 Name을 지정해 주었다. [ HTML ] 색상: 빨강 파랑 초록 크기..