blog

// common.js //-- 프로필 이미지 미리보기 --// const setThumbnail = (event) => { const reader = new FileReader(); const previewWrap = document.querySelector('.edit-img-wrap'); reader.onload = (event) => { previewWrap.innerHTML = ''; const img = document.createElement('img'); img.src = event.target.result; previewWrap.appendChild(img); }; reader.readAsDataURL(event.target.files[0]); }; // index.html

$(".radio").on("click", function () { const idx = $(this).index(); const wrap = $(this).closest('.radio_tab_area'); const tabCont = wrap.find(".radio_tab_contents > div"); tabCont.removeClass('active'); tabCont.eq(idx).addClass('active'); });

[html] //active되는 구역/섹션 //active 될 nav NAV active 되는 구역/섹션 -> scroll_active, data-taget 값을 id에 넣기 active 될 nav -> 눌렀을때 스크롤 하고싶다면 href에 id값 넣기, data-target에 구역/섹션과 동일한 값 넣기 [javascript] // page_nav 해당 섹션에 스크롤 될 시 에 active $(window).scroll(function () { const height = $(window).scrollTop(); // 해당 스크롤 좌표값(높이) const contents = $('.scroll_active'); contents.each(function () { const a = $(this).positi..

// 스크롤시 섹션에 맞는 tab에 active 주기 $("#wrap_content").scroll(function () { const height = $("#wrap_content").scrollTop(); // 해당 스크롤 좌표값(높이) const content = $('.content_area'); content.each(function () { const a = $(this).position(); if (a.top == height || a.top < height + 200) { const thisIndex = $(this).index() const tabIndex = $('.tab').eq(thisIndex); tabIndex.addClass('active'); // $('.tab').not(t..

** 체크 박스 약관 제목 약관 제목 [필수] $('#allCheck_agree').click(function () { $('.check_disagree').prop('checked', false); $('input:checkbox[name=terms_agree]').prop('checked', true); if (!$(this).prop('checked')) { $('input:checkbox[name=terms_agree]').prop('checked', false); } }); $('#allCheck_disagree').click(function () { $('input:checkbox[name=terms_agree]').prop('checked', false); $('.check_disagree'..

* ul,li 로 마크업,스타일링 하는것이 아닌, select,option태그를 사용해서 데이터 연동을 용이하게 셀렉트 커스텀 가능 html 옵션명 A B C D css /** Custom Select **/ .custom_select_wrapper { position: relative; user-select: none; cursor: pointer; } .custom_select_wrapper select { display: none; } .custom_select { position: relative; display: block; } .custom_select.opened .custom_select_trigger { border-bottom-color: transparent; } .custom_sel..

* id값 불러오기,데이터 값 불러오기 const divID = $('.div[data-scroll=in]').attr('id'); * id 값 remove 하기 $('div').removeAttr('id'); * 변수값 불러오기 $('div').attr('id', `img${divID}`)

* 장점: 여러개의 div 를 연결할 수 있음. * 문제점: 스와이퍼 뒤에 배경 개념으로 까는것에는 아무 문제 없으나, 스와이퍼 위에 버튼을 띄어야 하는 경우에는 해당 div 영역에서는 밀어서 넘기는 터치이벤트가 불가함. --동기-- 스와이퍼 작업중: - 스와이퍼 두개 겹치기 안됨 (같이 넘어가는 느낌 있음, 스와이퍼에서 제공하는 자체적인 fadeIn 효과는 오류가 있음.) - 슬릭 안됨 (두개 연동되어 있는 슬라이더 오류가 심함.) * 해결 - 스와이퍼 1개를 만들고, 다른 div 를 만들어서 , swiper 기능에 있는 on 기능을 활용해서 바뀔때마다 해당idnex의 text로 변하도록 만들었음. ** 핵심 - swiper on 이벤트 1VOLT V BASIC 하단 배너 텍스트 하단 배너 텍스트 하단..

* 스크롤 페이지가 아닌, 100vh의 컨텐츠만 있는 페이지 작업 js에 아래 함수 추가한다. function setScreenSize() { let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); } setScreenSize(); 감싸는 wrap에 아래 css를 반영한다. 그러면 모바일 100vh에 스크롤이 생기지 않아서 깔끔한 화면을 만들 수 있따. .wrap_inner: height: calc(var(--vh, 1vh) * 100);

모바일 알림 떴다가 일정시간 지나면 fadeOut, 이나 hide 되도록 // 삭제 팝업창 $(".btn_small").click(function() { $(".complete").fadeIn(); setInterval(function() { $(".complete").fadeOut(); },3000); }); 3초 후 fadeOut 됨.