Front-end34 [Form, Javascript] 이메일 직접입력, select 선택 입력 #Javascript#이메일주소직접입력 #이메일주소select선택 SCRIPTdocument.addEventListener('DOMContentLoaded', function() {var emailSelect = document.getElementById('email_1'); emailSelect.addEventListener('change', function() {var selectedOption = emailSelect.options[emailSelect.selectedIndex].value;var emailBack = document.getElementById('email_back');var emailInputText = document.getElementById('email_1_text');.. 2024. 8. 31. [jQuery] 접속 할 때마다 다른/랜덤 이미지 노출하기 #jQuery #접속시랜덤이미지표시 #중복없음 HTML jQuery$(document).ready(function() { var imgs = $('.random-imgbox img'); var lastIndex = localStorage.getItem('lastImgIndex'); var randomIndex; do { randomIndex = Math.floor(Math.random() * imgs.length);} while (randomIndex == lastIndex); imgs.hide().eq(randomIndex).show(); localStorage.setItem('lastImgIndex', randomIndex);}); 중복 이미지도 허용하고 싶은 경우$(document)... 2024. 8. 30. [Swiper] 똑같은 스와이퍼 반복문으로 편하게 만들기 #swiper #script #스와이퍼여러개만들기 옵션은 다 똑같은데 스와이퍼 코드를 이렇게 작성했던 적이 있습니다.지금은 배열을 사용해서 편하게 쓰고 있어서 정리합니다. 탭바 안에 똑같은 레이아웃의 스와이퍼가 들어있는 디자인이 많더군요.그 때 스와이퍼를 스크립트를 하나씩 작성하는 것이 아닌, 배열/반복으로 한번에 만드는 방법입니다. HTML Swiper Swiper is~ Swiper .. 2024. 8. 25. [CSS] 스크롤바 커스텀 #css #스크롤바커스텀 스크롤바 커스텀 사용 X 스크롤바 css 커스텀 body에 scrollbar를 커스텀하는 경우도 있지만 아직까지는 불편하다고 하는 클라이언트가 많은 듯 합니다.다만 textarea, 게시판 list 등 커스텀 해야 좀 깔끔해 보여서 사용하는데 디자인이 누락되면 무난하게 사용하는 코드입니다.(저거 하나 디자인 기다렸다가 작업하기에는 좀 답답하니까용) HTML CSStextarea.n-ipt::-webkit-scrollbar { width: 4px; background-color: rgb(209, 209, 209); } textarea.n-ipt::-webkit-scrollbar-thumb { background-color: rgb(125, 125, 125);.. 2024. 8. 24. [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. [HTML] img src 없을 때 대체이미지 출력방법 #HTML #nosrc #noimg #대체이미지 #onerror.this.src 개발 상에서 이미지코드를 가져오는데 가끔 이미지를 불러오지 못할 때 레이아웃 자체가 망가지는 경우가 있는데이 때 사용할 수 있는게 onerror코드를 사용할 수 있다. src속성이 비었거나 null일 때, 이미지 데이터가 손상되었을 때 등이미지를 불러와 출력할 수 없을 때 에러이미지를 출력할 수 있다. 대체이미지만 불러올 수 있는게아니라 css를 따로 조정할 수도 있는데 주의할 점은 src 이미지도, onerror이미지도 없을 경우 무한루프에 걸린다고 합니다. 1. 대체이미지 출력 2. css 설정 2024. 7. 26. 요소의 텍스트를 span으로 감싸진 텍스트로 변환하기 Hello World var spanText = $('#spanText').text(); // Hello World 그대로 가져오기 var spannedText = ''; // span 요소로 감싸질 텍스트 변수선언 // 각 글자를 span 요소로 감싸기 for (var i = 0; i spannedText += '' + spanText [i] + ''; } // h2 요소의 내용을 spannedText 요소로 변경 $('#spanText').html(spannedText); 2024. 6. 1. KHN KCP 본인인증 도메인 추가등록 KCP 파트너관리자(partner.kcp.co.kr) > 부가서비스 > 휴대폰본인확인 > 인증결과URL 설정 도메인이 naver.com 인 경우naver.com / www.naver.com 둘 다 등록 2024. 5. 7. [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. [JavaScript] for, forEach를 통해 반복문 사용하기 #for #forEach #반복문 안녕하세요~ Gi-1의 개발일기입니다. for, forEach 소스 정리 하겠습니다. let x = ['a','b','c','d']; var i = 0; for(i=0; i console.log(val)); 세가지 모두 같은 값을 표시합니다. 2023. 1. 31. [SweetAlert] Alert창 예쁘게 적용하기! #sweetalert #alert #design 안녕하세요. Gi-1의 개발일기 입니다. alert창은 알림창 / 확인창 등을 위해 주로 사용합니다. 간단하게 사용 가능하고 편리하지만 디자인 적인 부분이 매우 부족합니다. [Alert] [SweetAlert] 1. SweetAlert 주소 https://sweetalert2.github.io/ SweetAlert2 A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes sweetalert2.github.io 2. Link, Script https://cdnjs.cloudflare.com/ajax/libs/limonte-swe.. 2022. 12. 4. [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. [JavaScript] 중복 값이 허용되지 않는 Set 활용하기, 배열로 활용하기 #set #javascript 안녕하세요. Gi-1의 개발일기입니다. javascript의 Set에 대해서 알아보겠습니다. 1.Set? set 함수는 배열과 유사하지만 중복값을 허용하지 않는 점에서 다릅니다. 중복값이 포함되지 않아야 하는 상황에 사용하면 됩니다. 2. 기본 사용법 조금 다른점이 있다면 length를 사용하지 않고 size를 사용한다는 점입니다. set을 생성하고 콘솔을 찍어보면 다음과 같습니다. let x = new Set([1,2,3]); 혹은 let x = new Set().add("1").add("2").add("3"); 추가 add x.add("3"); 추가안됨 x.add("4"); 삭제 delete x.delete("3); 전체삭제 clear x.clear(); 포함여부 has.. 2022. 12. 3. [비메오 API] iframe 영상 종료 시 0초로 이동 #비메오 #vimeo #비메오API 안녕하세요. Gi-1의 개발일기 입니다. 비메오 영상은 반복재생을 하지 않으면 영상 종료 후에 관련영상이 뜨게 되는데요. 이를 막기 위해서 영상 종료 시 0초로 이동하게끔 해 볼 것 입니다. const iframe = document.querySelector('iframe'); const player = new Vimeo.Player(iframe); player.on('play', function() { // 비디오 시작 시 발생할 이벤트 }); player.on('ended', function() { // 비디오 종료 시 발생할 이벤트 player.setCurrentTime(0); }); 2022. 12. 1. 이전 1 2 3 다음
