흔하게 회원가입을 할 때 이메일이 자동완성되는 곳이 종종 있다. onblur 이벤트를 이용해서 쉽게 응용할 수 있을 것 같다. 이메일 @ 직접 입력 네이버 구글 한메일 이메일을 받기 위해 h6태그로 "이메일"을 넣어주고 도메인과 이메일을 따로 받고 @을 기본으로 넣어주게 되니 위와 같은 그림으로 입력칸을 만들었다. select 문으로 option으로 각 도메인을 선택가능하게 해 놓고 onchange 이벤트를 사용했다. onchange 이벤트는 만약 다른 값으로 바꾼다면 반응하므로 domain_select() 메소드가 실행된다. email-domain-select id를 가진 값(select문에서 선택한 값)의 value를 domain 객체에 담고 2번째 입력상자에 그 값을 넣게 되면 누를 때마다 변경된다.
API란? API는 vscode에서만 사용하는 개념이 아니고 더 넓은 곳에서 포괄적으로 쓰이고 있다. API(Application Programming Interface)은 애플리케이션 소프트웨어를 빌드하고 통합하기 위한 정의 및 프로토콜 세트인 애플리케이션 프로그래밍이라고 개념을 정의할 수 있다. API를 사용하면 구현 방식을 알지 못하는 제품 또는 서비스와도 통신할 수 있고 애플리케이션 개발을 간소화하여 시간과 비용을 절약할 수 있다. 새로운 툴과 제품을 설계하거나 기존 툴과 제품을 관리할때 API를 사용하면 유연성을 높이고 설계 , 관리 , 사용방법을 간소화하며 혁신의 기회를 얻을 수 있다. 사용예제 https://postcode.map.daum.net/guide 다음 우편번호 API를 vscode..
회원가입을 할 때 빈칸이면 밑에 알림을 주는 코드를 작성해 볼 수 있다. 더보기 회원가입 이메일 비밀번호 비밀번호 확인 회원가입 글을 h2로 , 각 email_form , password_form , password_check_form id속성을 가진 것으로 묶어서 onblur 이벤트를 이용해서 함수를 실행시킨다. 이메일에 규정에 맞게 작성되야만 다음 비밀번호가 활성화 , 비밀번호 확인도 마찬가지로 비밀번호가 활성화되면 접근할 수 있으며 비밀번호 칸과 비밀번호 확인칸이 같다면 제출버튼이 활성화되게 된다. 더보기 이메일에는 5~20글자 이내로 , 비밀번호는 isNaN을 이용해 숫자만 가능하게 , 비밀번호 확인은 비밀번호 값과 같을 것으로 해놓고 다르게 입력하면 이벤트를 주었다.
1. 이미지 파일 수정 dom을 이용해서 이미지파일도 수정가능하다. 이미지 교체 이미지를 첨부하고 버튼을 추가해서 누르면 changeImg() 메소드가 실행된다. const changeImg = () => { const img = document.getElementById('img1'); console.log(img1); // 이미지 경로값 console.log(img.src); // src 값을 변경하여 출력되는 이미지 변경하기 img.src = '../images/카카오프렌즈_라이언.png'; }; dom을 이용해서 객체에 저장한 후 속성을 변경해서 이미지를 수정가능하다. ../ 와 ./ 의 절대경로 상대경로를 유의하는 것이 좋겠다. 2. 요소의 css 속성 제어하기 스타일 변경 h2 속성의 글에 o..
css는 부트스트랩을 참고하였다. 전체 범위를 가로 600px으로 제한하였다. NAVER 상단에 NAVER를 띄우도록 text-center , mt-5를 사용했다. 아이디 비밀번호 비밀번호 재확인 이름 아이디 , 비밀번호 , 비밀번호 재확인 , 이름 칸을 만들고 부트스트랩 클래스인 form-control을 적용시켰다. 생년월일 월 1 2 3 4 5 6 7 8 9 10 11 12 부트스트랩으로 지원하는 그리드 형식인 전체를 class row로 묶고 개당 항목에 class col 속성을 입혀서 같은줄에 3개가 나오도록 세팅했다. 성별 남 여 선택 안함 select문과 option태그를 이용하여 한가지를 선택받아 gender에 답을 담도록 했다. 휴대전화 대한민국 +82 미국 +1 프랑스 +33 그리드 속성중..
script에 javascript 객체로 담아서 선언할 수 있다. const book = { name: "자바스크립트 기초", publisher: "oo출판사", author: "피카츄", price: 20000, index: { ch1: "소개", ch2: "기초문법", ch3: "연산자", }, date: "2023년4월", }; book이라는 객체에 name , publisher , author, price , index ( ch1 , ch2 , ch3 ) , date 값을 담아서 선언할 수 있다. 거기서 원하는 값을 뽑아낼 수 있다. console.log("book type: ", typeof book); console.log(book); console.log(book.name); console...
Option 태그와 input 태그의 사용 만약 사는 지역과 성별, 먹고 싶은 음식을 고를 페이지를 만들어보자면 사는 지역에는 각 도시들의 이름이 있어야 하고, 남, 여 중에 한 개만 선택되어야 하며 먹고 싶은 음식은 여러 개 선택해도 돼야 할 것이다. 사는지역: 선택해주세요 인천 서울 제주 select name에 city를 입력하게되면 city값에 유저가 선택하는 값이 저장된다. 물론 form태그를 써야한다. 이름이 city이고 , id는 선택된 값이 들어간다. 기본은 선택해 주세요 이고 선택한다면 인천 , 서울 , 제주 목록이 나온다. 성별: 남: 여: br은 줄 바꿈이다. 가짓수 중에 한 가지만 선택할 수 있다면 radio를 사용할 수 있다. 하지만 주의점이 만약 name이 다르다면 동시에 선택되기..
만약 이메일과 비밀번호를 로그인하는 창을 만들려고 한다면 head 문구에는 부트스트랩에서 css와 js파일을 걸어놓았다. email password 사용자로부터 입력을 받아서 어딘가(서버)로 보낼 때 사용한다 action : 목적지(보통 서버에서 처리할 주소를 작성한다. method : 전송방식을 지정한다. get : 입력값이 주소창에 노출된다. ( 기본 ) post : 입력값이 노출되지 않는다. mt는 margin top이며 , me , ms , mb 등이 사용될 수 있다. 태그는 입력을 받는 태그이다. 종료태그는 사용하지 않는다. label에 대해서 label은 폼의 양식에 이름 붙이는 태그이다. 주요 속성은 for이며 label의 for의 값과 양식의 id의 값이 같으면 연결된다. label을 클릭..
기본적으로 bootstrap에서 양식을 가져와서 쓸 수 있다. https://getbootstrap.kr/ Bootstrap 강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기 getbootstrap.kr Bootstrap의 컴파일된 CSS 또는 JS만 필요하다면 CDN 링크를 가져와서 붙여 쓸 수 있다. 로그인 Click 비밀번호 Click 스타일에 버튼 태그는 기본적으로 블루 배경에 테두리는 없음 , 커서를 대면 마우스포인터 모양이 바뀌게 , 글색은 흰색이다. border-radius로 모서리를 라운딩지게 할 수 있다. 본문의 btn btn-primar..
