JQuery12 [jQuery] input-File 이미지, 문서 10메가 미만 파일만 업로드 가능하게 #input-file #jQuery #이미지,문서만등록가능 #10메가미만파일만등록가능 백앤드에서 다시 잡히긴 하지만 프론트에서 미리 걸러지면 사용자가 편할 것 같습니다.이미지, 문서 필터링은 validTypes 변수에 들어 있는데 가끔 문서파일 인데도 안잡히는 경우가 있기는 합니다ㅠ아직 테스트하며 추가중인데 왠만한건 다 추가 되어있습니다. HTML 파일첨부 - 10MBYTE 미만 파일만 업로드하세요. - 이미지, 문서 파일만 가능합니다. 등록 CSSbody{ d.. 2024. 8. 23. [jQuery] Textarea 용량(Byte) 표시 / 최대용량제한 #textarea #Byte #최대용량제한 #jQuery Textarea에 최대 글자수는 자주 적용 해봤지만 스크립트로 Byte도 제한이 가능합니다.혹시 모르니 최대글자수도 2000자로 적용 해놓고 작업 했습니다. 2000자 넘게 글을 입력하려고 하면 #content_byte에 full 클래스가 추가되며 빨간색으로 표시됩니다. HTML 내용 0 / 2,000Byte 등록 CSSbody{ display: flex; alig.. 2024. 8. 23. [Form] 이메일주소 직접입력 / 선택 Option #jQuery #이메일주소직접입력/선택 #이메일주소option 직접입력을 선택하면 select박스 우측에 text 인풋박스가 생성됩니다.name값은 직접입력일 경우 text박스에 email[1]이 부여되며다시 이메일을 선택하게되면 text박스가 사라지면서 select박스에 name값이 부여되는 방식입니다. HTML 이메일 @ .. 2024. 8. 22. [jQuery, script] 스크롤 이동 #스크롤이동 #scrollto #animation #script #jquery 안녕하세요. Gi-1의 개발일기입니다. 퍼블리싱을 하다보면 컨텐츠 영역으로 바로 이동하게끔 ~~url/#이동할컨텐츠영역id를 이용하는 경우가 많은데요, css로 스크롤 애니메이션 을 줄 수도 있지만 저는 script가 편하더라구요! css로 이용할 경우 html{ scroll-behavior:smooth; } script function moveScroll(){ var ingSec = document.querySelector("#id"); var ingLocation = ingSec.offsetTop; if(ingLocation == $(document).scrollTop()){ return false; } // 이미 스크롤 .. 2023. 2. 10. [jQuery] 클릭 시 모달,팝업 띄우기 / 메뉴 팝업창 만들기 #jQuery #모달 #팝업 #견적문의 안녕하세요. GI-1의 개발일기 입니다. 흔히 모달,팝업은 쉽게 띄울 수 있습니다. 이번에는 카페의 온라인 견적문의 할 때 필요한 메뉴 팝업창을 만들어 보겠습니다. 1. HTML [견적담기 버튼] 아메리카노 (HOT / ICE) 3,000원 견적담기 [팝업] × 2. script function menuModal(e){ var ModalMenuImg = $(e).parent(".esti_menu_check").siblings(".esti_menu_left").find("img").attr("src"); // 메뉴 이미지 src를 가져옴 var ModalMenuTxt = $(e).parent(".esti_menu_check").siblings(".esti_menu_l.. 2022. 12. 3. [jQuery] 요소의 탐색, 형제 선택 / 부모 선택 / 자식 선택 #jQuery #javascript #형제선택자 안녕하세요. Gi-1의 개발일기입니다. 홈페이지를 만들다보면 형제선택, 부모선택, 자식선택 등 정말 다양하고 유용하게 사용 하는데요. 많이 사용해도 상황에 따라 자꾸만 검색하게 되어 포스팅 남깁니다. [형제선택] sibligns() 지정한 모든 형제 선택자를 선택함 next() 선택한 요소 바로 다음 위치해 있는 선택자를 선택함 nextAll() 선택한 요소 다음 위치해 있는 선택자를 모두 선택함 nextUntil() 선택한 요소 ~ 지정한 선택자 바로 이전까지의 요소를 모두 선택함 prev() 선택한 요소 바로 이전에 위치해 있는 선택자를 선택함 prevAll() 선택한 요소의 이전에 위치해 있는 선택자를 모두 선택함 prevUntil() 선택한 요소 ~.. 2022. 10. 11. [jQuery] 클릭 시 클래스 추가/제거 #jQuery #addClass #removeClass #hasClass #ifelse 안녕하세요. Gi_1입니다. 실무에서 많이 쓰는, 클릭 시 클래스 추가/제거 방법입니다. 저번 포스팅에서는 자바스크립트로 클릭 시 클래스 추가/제거를 포스팅 하였는데.. https://gi-1.tistory.com/16 [자바스크립트] 클릭시 클래스 추가/제거 #javascript #toggle #click #classList #add #remove 안녕하세요 Gi_1입니다. 오늘은 제가 가장 많이 사용했던 클릭 시 클래스 제거/추가를 작성해보고자 합니다. 사실 업무를 할 때는 제이쿼리로 사용 했지만,. gi-1.tistory.com 사실, 간단히 기능만 구현 하자면 제이쿼리가 훨씬 코드가 짧고 간단합니다. 그럼에도 .. 2022. 1. 30. Length란 무엇일까? , 요소의 존재 여부와 글자 수 세기 #length #글자수 #요소개수 안녕하세요. Gi_1입니다. 프론트앤드 개발을 하다보면, 요소가 존재 하는지, 글자수는 몇글자인지 알아야 할 때가 있습니다. 요소의 존재여부 if ($("div").length){ $("p").addClass("on"); } div 요소가 1개라도 있을 경우, p에게 class on을 부여하는 script 입니다. 요소가 0일 경우 false, 1 이상일 경우 true 이기 때문입니다. 글자수 세기 const aa = 'aa'; const write = document.write(aa.length); alert('write'); 결과값 : 2 2022. 1. 22. each()란 무엇일까? #jQuery #each #반복 안녕하세요 Gi_1입니다. each()는 선택한 요소가 여러개일 때, 반복해서 작동합니다. -예시- HTML script $( document ).ready( function(){ var i=1 $('.request_question_title').each(function(){ $(this).text('Test' + i); i = i + 1; }); }); class가 request_question_title인 요소의 수 : 5개, var i = 1, 반복될 때 마다 +1 실행 결과 : Test1, Test2, Test3, Test4, Test5 2022. 1. 22. Form에서 필수입력사항 script로 제어하기. #form #alert #value.length 안녕하세요 Gi_1입니다. form에서 필수입력값은 html에서 required로 간단하게 제어할 수 있습니다. 다만, 수많은 체크박수중 하나이상 체크해야 하는 경우나 최소 3글자 이상 입력받고 싶을 때가 있습니다. 최소 글자수 완료 $(document).ready(function(){ $('.submit_btn').click(function() { var cont = document.querySelector("#adm_qna_create_txt"); if(cont.value.length < 3) { alert('내용을 최소 3글자 이상 입력해주세요.'); return false; } }); }); input 속성중 minlength 를 이용해서 하여도 됩.. 2022. 1. 22. [노가다 후기] input 체크시 원하는 텍스트 출력 / input 입력 시 텍스트 출력 #click #is:checked #append 안녕하세요 Gi_1입니다. 오늘은 일기식으로 글을 남겨보려고 합니다. 제가 힘들때 노력했던.. 스크립트를 더 열심히 공부해야겠다고 마음을 먹었던 계기였어요. input 체크시 원하는 텍스트를 출력하는 방법을 알아보려합니다. input 체크 시 value를 출력하는 간단한 방법이 인터넷에 많이 나타나 있지만, value는 백앤드에서 넘어오는 값으로 되어 있었는데.. 랜덤으로 숫자와문자를 합친 형태였습니다. 619886a13d51db1799238aad 이렇게요, input type도 백앤드에서, value는 619886a13d51db1799238aad 과 같은 코드로 되어 있는 상황이였습니다. pug로 퍼블리싱 진행 하였고 개발은 node.js로 하였습니다. .. 2022. 1. 21. a태그의 href 속성 필터, 클래스 추가 #jquery #location_addClass 안녕하세요 Gi-1 입니다. 홈페이지를 만들다 보면, 서브페이지에 접속 하였을 때 네비바 안의 해당 태그에 클래스명을 추가하는 경우가 많은데요! 페이지별 a태그의 href 속성이 페이지 주소에 포함된다면, 클래스를 추가하는 제이쿼리입니다. 입사하고 1년동안 정말 많이 썼던 코드인거 같네요! 별도로 하단에는, 홈페이지 주소에 따라서 수동으로 클래스명을 추가하는 방법도 올려봅니다. 예제 서브페이지의 "공지사항"에 접속한 상황입니다. 이미 공지사항에 접속해 있다는 것을 사용자에게 알려주기 위해서 공지사항이라 큰 타이틀이 써져있고, 리스트에서 공지사항에만 초록색 밑줄이 그어져 있는걸 확인할 수 있습니다. "복지뉴스"에 접속하면 공지사항에 있는 밑줄은 사라지고, 복.. 2022. 1. 19. 이전 1 다음
