본문 바로가기

Front-end34

[jQuery] 요소의 탐색, 형제 선택 / 부모 선택 / 자식 선택 #jQuery #javascript #형제선택자 안녕하세요. Gi-1의 개발일기입니다. 홈페이지를 만들다보면 형제선택, 부모선택, 자식선택 등 정말 다양하고 유용하게 사용 하는데요. 많이 사용해도 상황에 따라 자꾸만 검색하게 되어 포스팅 남깁니다. [형제선택] sibligns() 지정한 모든 형제 선택자를 선택함 next() 선택한 요소 바로 다음 위치해 있는 선택자를 선택함 nextAll() 선택한 요소 다음 위치해 있는 선택자를 모두 선택함 nextUntil() 선택한 요소 ~ 지정한 선택자 바로 이전까지의 요소를 모두 선택함 prev() 선택한 요소 바로 이전에 위치해 있는 선택자를 선택함 prevAll() 선택한 요소의 이전에 위치해 있는 선택자를 모두 선택함 prevUntil() 선택한 요소 ~.. 2022. 10. 11.
[VS code] 화면 흐려짐 문제 #visualstudiocode #vscode #vsc 안녕하세요. Gi-1의 개발일기 입니다. 최근 2~3달동안 vs코드를 이용하는데 화면이 자꾸 흐려지는 문제가 있었습니다. 더 심할 때도 있고 조금 덜 할 때도 있었는데.. 컴퓨터를 껐다키거나 최대한 다른 프로그램을 키지 않으면 vs code가 흐려지는 것을 막다가 최근 검색을 하여 해결하였습니다. 너무 간단해서 어이가없었네요 ㅠ [방법] Nvidia → 앤티앨리어싱 - FXAA → 끄기 →vs code 재시작 해주세요 출처 : https://stackoverflow.com/questions/51943550/visual-studio-code-looks-blurry visual studio code looks blurry Folks, this is no.. 2022. 10. 2.
[javascript] 문자열에서 숫자만 추출하기 #javescript #숫자추출 안녕하세요. Gi-1의 개발일기입니다. 10000원 < 이라는 텍스트가 있으면, 그중 10000이라는 숫자만 가져오고 싶을 때가 있습니다. var PriceText = $("p").text(); var regex = /[^0-9]/g; var numPrice = rightMenuTotalPrice.replace(regex, ""); console창에 테스트한 결과 스크린샷입니다 2022. 8. 31.
[Fullcalendar] 구글캘린더 연동하기 #fullcalendar #달력 #구글캘린더 안녕하세요. Gi-1의 개발일기입니다. fullcalendar와 관련된 달력개발이 있다면, 간편하게 구글캘린더와 연동하여 사용할 수도 있습니다. 1. Fullcalendar https://fullcalendar.io/ FullCalendar - JavaScript Event Calendar Open Source... With over 10 years of open source and over 120 contributors, FullCalendar will always have a free and open source core. Learn more fullcalendar.io fullcalendar 사이트에 접속하셔서 main.css / main.js / loc.. 2022. 8. 29.
글 넓이(font-stretch)가 지원되지 않는 폰트에서 사용하기 #font-stretch #scale 안녕하세요. Gi_1의 개발일기입니다. 최근 이직하여 근무중인데 글자의 넓이라는 것을 사용한다는 것을 들었습니다. 폰트의 글자 넓이나 높이를 강제로 깬다는 내용이였는데요. 관련 검색을 하다 font-stretch를 발견했지만 지원되는 폰트가 많지 않더군요.. 따라서 강제로 이용하는 방법입니다. .stretch{ -webkit-transform:translateX(-1%) scale(0.98,1); -moz-transform:translateX(-1%) scale(0.98,1); -ms-transform:translateX(-1%) scale(0.98,1); -o-transform:translateX(-1%) scale(0.98,1); transform:translat.. 2022. 6. 8.
체크 시 Value값 쿠키에 저장 / 다른페이지에 출력하기 #javascript #Cookie #checkbox #value 안녕하세요 Gi_1의 개발일기입니다. 최근, 재고리스트에서 재고를 선택하여 제출버튼을 누르면 다른 게시판 or 이메일전송 작성하기 화면으로 넘기는 일을 하게되었습니다. 1차적으로, PHP의 POST방식을 이용했지만 클라이언트는 체크한 value값이 페이지를 벗어났다가 돌아와도 유지되기를 바랬습니다. 그래서 Cookie를 이용해서 구현해보고자 합니다. INDEX.HTML onclick = checkItem(this)를 넣었습니다. SCRIPT function checkItem(chk) { var chkmno = getCookie("chkmno"); var arr_chkmno; var chk_value = trim(chk.value); if(.. 2022. 6. 7.
setCookie, DeleteCookie, Getcookie 세팅 function setCookie(cookieName, value, exdays){ var exdate = new Date(); exdate.setDate(exdate.getDate() + exdays); var cookieValue = escape(value) + ((exdays==null) ? "" : "; expires=" + exdate.toGMTString()); document.cookie = cookieName + "=" + cookieValue; } function deleteCookie(cookieName){ var expireDate = new Date(); expireDate.setDate(expireDate.getDate() - 1); document.cookie = cookieNa.. 2022. 6. 6.
[노마드코더] 신박한 HTML 태그 5개!! #HTML #노마드코더 안녕하세요. Gi_1입니다. 유튜브를 보던 중, 평소 공부하지 않던 HTML의 신박한 기능 5가지를 보게 되었는데요. 자바스크립트를 이용해서, 혹은 복잡한 CSS를 통해 구현할 수 있었던 기능 5가지를 정리하고자 합니다. 1. progress는 진행정도를 나타내는 바를 만드는 태그입니다. HTML5에서 추가 되었고, 익스플로러 10부터 지원합니다. HTML max, value, min이 주요 속성입니다. min,max에 따른 value 속성값에 따라 bar의 게이지가 상승합니다. CSS progress[value]::-webkit-progress-bar{ background-color: whitesmoke; box-shadow: 0 2px 5px rgba(0,0,0,0.25) in.. 2022. 3. 9.
[CSS] 그림자, 그라데이션 css 생성 사이트 #css boxShadow #gradient #auto 안녕하세요. Gi_1입니다. 그림자, 그라데이션 사용 방법은 알지만 웹 접근성 고려해서 css 작성하기 너~~무 귀찮고 비효율적이에요. 그림자, 그라데이션 css 생성 사이트 소개 해 드리려고 합니다. 1. 그림자 그림자 생성 사이트에 접속 해 보시면, 처음 뜨는 팝업 창 은 꺼주세요. 상단에 있는 직사각형으로 실제 그림자 적용 모습을 파악 하실 수 있고, 각도, 거리, 블러, 색상, 불투명도를 지정할 수 있습니다. 하단에 내려 보시면 아래와 같이 생성된 CSS가 있는데, 이것을 복사하여 사용 하시면 적용 끝! 수기로 작성 하는 것 보다, 사이트 즐겨찾기 해 두시고 작성 하는게 더욱 빠릅니다. 하단에 더 살펴 보자면, box-shadow를 통한 더 .. 2022. 2. 2.
[노마드 코더] 바닐라 JS로 크롬 앱 만들기 #Javascript #바닐라JS  안녕하세요. Gi_1입니다.노마드코더의 무료 자바스크립트 강의, 바닐라 JS로 크롬 앱 만들기 코드 정리 입니다.무료강의를 신청하면 메일로 퀴즈가 날라온다는데.. 저는 몰랐어서 안하는 바람에 재신청해서 하고 있습니다 ㅎ;;몇번 안하면 실패!!하면서 기회가 없고 다시 신청해야하니 강의를 들으실 분들은 참고 해주세요.  미리보기  오른쪽 위에는 사용자의 위치 / 날씨 / 기온이 나타납니다.이름을 입력하여 로그인 할 수 있으며 일정을 기록 할 수 있습니다.새로고침을 할 때 마다, 배경사진과 제일 하단의 명언이 교체됩니다.이는 백앤드를 필요로 하지 않고, 새로고침을 해도 유지가 됩니다. ( 쿠키 삭제 등을 하면 사라집니다. )  #어떻게 입력된 정보가 자바스크립트만으로 저장 .. 2022. 2. 1.
[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.
[자바스크립트] 클릭시 클래스 추가/제거 #javascript #toggle #click #classList #add #remove 안녕하세요 Gi_1입니다. 오늘은 제가 가장 많이 사용했던 클릭 시 클래스 제거/추가를 작성해보고자 합니다. 사실 업무를 할 때는 제이쿼리로 사용 했지만, 자바스크립트를 공부하며 다시 정리해봅니다! 첫번째는, toggle을 이용하여 하는 방법이고, 두번째는 if else를 이용하여 작성하겠습니다. HTML Grab me! CSS .hello h1{ color: blue; transition: all 0.3s ease-in-out; } .hello h1.clicked{ color: tomato; } Script --공통-- const title = document.querySelector(".hello h1"); 1.. 2022. 1. 29.
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.