Front-end36 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. [vs code] 비주얼 스튜디오 코드, 간단히 부모 감싸기. #vscode#wrap#Ctrl+Shift+p#Emmet:Wrap with Abbreviation#Emmet:약어로 래핑 안녕하세요 Gi_1입니다. 코드를 짜다보면, 중간중간에 부모요소를 추가할 때가 많은데요. 그럴 때마다 부모요소 만들고, 복사하고 붙여넣기를 하는 과정이 사실 오랜 시간이 걸리지는 않습니다. 하지만 약어로 래핑 기능을 사용하면 좀 더 빠르게 코딩을 칠 수 있다는 생각 입니다. 사용방법 우선 자식요소로 포함될 코드들을 드래그 해줍니다. 이후, Ctrl + Shift + P를 동시에 입력하면 모든 명령어 보기라는 창이 나타납니다. 여기서 Emmet: Wrap with abbreviation이라는걸 선택합니다. *한글패치가 되신 분들은 Emmet : 약어로 래핑 을 선택해주시면 됩니다. se.. 2022. 1. 21. [노가다 후기] input 체크시 원하는 텍스트 출력 / input 입력 시 텍스트 출력 #click #is:checked #append 안녕하세요 Gi_1입니다. 오늘은 일기식으로 글을 남겨보려고 합니다. 제가 힘들때 노력했던.. 스크립트를 더 열심히 공부해야겠다고 마음을 먹었던 계기였어요. input 체크시 원하는 텍스트를 출력하는 방법을 알아보려합니다. input 체크 시 value를 출력하는 간단한 방법이 인터넷에 많이 나타나 있지만, value는 백앤드에서 넘어오는 값으로 되어 있었는데.. 랜덤으로 숫자와문자를 합친 형태였습니다. 619886a13d51db1799238aad 이렇게요, input type도 백앤드에서, value는 619886a13d51db1799238aad 과 같은 코드로 되어 있는 상황이였습니다. pug로 퍼블리싱 진행 하였고 개발은 node.js로 하였습니다. .. 2022. 1. 21. Slick 사용방법 [ 슬라이드 api ] #slick#슬라이드api#간편슬라이드 안녕하세요. Gi_1입니다. 다양하고 간단한 슬라이드를 구현api slick 포스팅입니다. slick은 슬라이드 방향, 속도, arrow버튼, autoplay, dots버튼 등을 간단하게 제어할 수 있습니다. 제가 1년간 퍼블리싱을 하면서 제일 많이 사용한 api이기도 하네요! slick은 jquery기반으로 만들어진 라이브러리이므로 jQuery가 필요합니다. 우선 slick홈페이지에 접속합니다. 오른쪽 상단의 get it now를 클릭 후 다운로드 합니다. slick.min.css파일과 slick.min.js파일을 업로드합니다. 저는 plugins 폴더 안에 넣겠습니다. 기본적인 구조 HTML 1 2 3 script $(function(){ $('.slick-sl.. 2022. 1. 20. a태그의 href 속성 필터, 클래스 추가 #jquery #location_addClass 안녕하세요 Gi-1 입니다. 홈페이지를 만들다 보면, 서브페이지에 접속 하였을 때 네비바 안의 해당 태그에 클래스명을 추가하는 경우가 많은데요! 페이지별 a태그의 href 속성이 페이지 주소에 포함된다면, 클래스를 추가하는 제이쿼리입니다. 입사하고 1년동안 정말 많이 썼던 코드인거 같네요! 별도로 하단에는, 홈페이지 주소에 따라서 수동으로 클래스명을 추가하는 방법도 올려봅니다. 예제 서브페이지의 "공지사항"에 접속한 상황입니다. 이미 공지사항에 접속해 있다는 것을 사용자에게 알려주기 위해서 공지사항이라 큰 타이틀이 써져있고, 리스트에서 공지사항에만 초록색 밑줄이 그어져 있는걸 확인할 수 있습니다. "복지뉴스"에 접속하면 공지사항에 있는 밑줄은 사라지고, 복.. 2022. 1. 19. 이전 1 2 3 다음
