[개발] Practice/JavaScript jQuery18 [JavaScript / jQuery] 모달창 내 비밀번호 조건 미달 경고 메시지 만들기 💡 실습 포인트! 비밀번호를 8자리 이상으로 설정하도록 유도하기 위해, 비밀번호 입력창이 공백이 아니고 8자리 미만으로 입력했을 경우 비밀번호 입력창 하단에 "비밀번호가 8자리 미만입니다." 라는 문구가 나타나도록 했다. 이 때 활용한 이벤트는 input 이벤트인데, 이번 수업에서 input 이벤트와 change 이벤트의 차이에 대해서 공부했다. 먼저, input 이벤트는 input 에 입력한 값이 바뀔 때마다 발생하는 이벤트이다. change 이벤트는 input 이벤트와 유사해보이지만 input 에 입력한 값이 바뀌고나서 포커스를 잃을 때에서야 비로소 발생하는 이벤트이다. 💜 HTML 비밀번호가 8자리 미만입니다. 일단 id 가 password 인 태그 아래에 위와 같이 경고 문구를 넣은 div 박스 .. 2022. 3. 4. [JavaScript / jQuery] if 문을 활용하여 모달창 내 아이디, 비밀번호 공백검사 기능 만들기 💡 실습 포인트! 위 입력칸(아이디 입력칸)이 공백이면 "아이디를 입력하세요." 라는 내용이 뜨고, 다음 화면으로 넘어가지 못하게 했다. 아래 입력칸(비밀번호 입력칸)이 공백이면 "비밀번호를 입력하세요." 라는 내용이 뜨고 다음 화면으로 넘어가지 못하고, 비밀번호를 입력했을지라도 8자리 미만이면 "8자리 이상의 비밀번호를 입력하세요."라는 내용이 뜨고 다음 화면으로 넘어가지 못하게 했다. 만약 모든 아이디, 비밀번호 조건을 만족했다면 전송 버튼을 눌렀을 때, 전송 완료 페이지로 넘어갈 수 있게 했다. 💜 JavaScript $('#submit').eq(0).on('click', function(e){ if($('#email').val() == '') { e.preventDefault(); alert('아.. 2022. 3. 4. [JavaScript / jQuery] jQuery 사용하여 모달창 만들기 💡 실습 포인트! 로그인 버튼을 누르면 아이디와 비밀번호를 넣을 수 있는 모달창이 서서히 뜨고 닫기 버튼을 누르면 모달창이 서서히 사라지게 했다. 💜 HTML 로그인하세요 전송 닫기 로그인 먼저 로그인 버튼과 로그인 버튼을 눌렀을 때 뜰 모달창 기본 레이아웃을 만들어준다. 모달창은 화면 전체를 덮어야 하므로 body 태그 중 제일 상단에 모달창 관련 html 이 위치해야 한다. 💜 CSS .black-bg { width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.6); z-index: 5; padding: 30px; visibility: hidden; /* 애니메이션 줄 때 display: none 대용, 없애는 게 아니라 모습만.. 2022. 3. 4. [JavaScript / jQuery] classList 활용하여 서브메뉴 만들기 💡 실습 포인트! Navbar 의 버튼을 클릭하면 메뉴 리스트가 slideUp, slideDown 의 형태로 열고 닫히게 했다. 💜 HTML Navbar An item A second item A third item A fourth item And a fifth one 빠른 Navbar 레이아웃 디자인을 위해 Bootstrap 을 활용했다. Navbar 아래에 Navbar 의 메뉴 리스트가 될 레이아웃도 Bootstrap 에서 복사-붙여넣기 해주었다. 💜 CSS .list-group { display: none; } .show { display: block; } 기본 레이아웃이 준비되었다면, 우선 첫화면에서는 메뉴 리스트가 보여져서는 안되므로 display: none 처리를 해준다. 그리고 list-gr.. 2022. 3. 4. [JavaScript / jQuery] Alert 박스 창 여닫기 및 창 내용 바꾸기 기능 만들기 💡 실습 포인트! 첫 화면에서는 버튼 1과 버튼 2만 보이고, 그 상태에서 버튼 1을 누르면 내용이 "아이디를 입력하세요." 인 알림창을 보이게 하고, 버튼 2를 누르면 "비밀번호를 입력하세요." 라는 알림창이 보이게 했다. 그리고 어느 창이 떠도 닫기 버튼을 클릭하면 알림창이 안 보이게끔 처리해주었다. 💜 HTML 과 CSS 일단 최종화면인 알림창과 버튼 1, 버튼 2가 나오도록 HTML, CSS 파일을 만든다. 우선 내용은 "아이디를 입력하세요." 와 "비밀번호를 입력하세요." 이 두 가지로만 전환되는 거라 공통되는 부분을 제외하고 "아이디", "비밀번호" 라는 문구만 바뀔 수 있게 이 부분만 id 를 title 로 부여했다. 첫 화면에서는 alert-box 가 보이지 않도록 display: none.. 2022. 3. 3. [JavaScript / jQuery] 파라미터 활용하여 Alert 박스 창 여닫기 기능 만들기 💡 실습 포인트! 알림창 띄우기 버튼을 누르면 알림창 세 개를 띄우고 각 알림창의 X 버튼을 누르면 해당 알림창이 사라지도록 만들었다. 💜 HTML 과 CSS 알림창 띄우기 버튼을 클릭했을 때 상단에 알림창들이 뜨게 하려면 일단 html 과 CSS 를 먼저 작성해야 한다. X 모양 아이콘은 Font Awesome 을 활용하여 추가하였다. Holy guacamole! You should check in on some of those fields below. Holy guacamole! You should check in on some of those fields below. Holy guacamole! You should check in on some of those fields below. 알림창 띄우기.. 2022. 3. 3. 이전 1 2 다음