본문 바로가기

Front-end36

[jQuery] 체크박스 전체선택, checkbox allCheckedBtn 사용법 게시판에 관리자는 전체선택 기능이 있는 경우가 아주 많은데전체선택 클릭 시 (제일 상단에 있는 체크박스) 모두 체크되며 하나라도 체크 해제하면 전체선택 체크박스도 체크 해제됩니다.편의상 게시판 모양으로 table 퍼블리싱 하였고 클래스명, 아이디명만 같다면 다른 레이아웃에 적용 하셔도 됩니다.HTML                                                                                                     No.                             제목                             View                                                              .. 2024. 11. 8.
[HTML] Select Option 시/구 선택 | optgroup 활용 HTML | 시/구 코드정리                                     강남구                   강동구                   강북구                   강서구                   관악구                   광진구                   구로구                   금천구                   노원구                   도봉구                   동대문구                   동작구                   마포구                   서대문구                   서초구                   성동구           .. 2024. 9. 21.
[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.

티스토리툴바