DOTI Project

💡 HTML 링크 클릭 시 페이지가 위로 올라가는 현상 막는 방법웹페이지에서 형태의 링크를 클릭하면 브라우저는 기본적으로 페이지 최상단으로 스크롤 이동합니다.이 동작을 막고 싶다면 아래와 같은 방법으로 제어할 수 있습니다.✅ 방법 1: event.preventDefault() 사용JavaScript의 preventDefault() 메서드를 이용하여 기본 동작을 차단합니다.링크jQuery를 사용하는 경우:링크✅ 방법 2: href="javascript:void(0)" 사용# 대신 JavaScript 빈 함수 호출을 사용하면 페이지 이동이 발생하지 않습니다.링크주의: 일부 웹 접근성이나 보안 가이드에서는 javascript: 사용을 권장하지 않습니다.✅ 방법 3: href="!" 등의 가짜 링크 사용브..

태그 예제  태그 설명required 필수 입력을 위한 태그 사용 시 기본 안내 문구는 '이 입력란을 입력하세요'로 노출된다 아래의 태그를 입력하여, 안내 문구를 변경할 수 있다.oninvalid="this.setCustomValidity('이메일을 입력하세요.')" oninput="this.setCustomValidity('')"

1일 10시간 3분 10초 HTML 코드 일 시간 분 초 Script 코드

const numberUnits = ["", "일", "이", "삼", "사", "오", "육", "칠", "팔", "구"];const tenUnits = ["", "십", "백", "천"];const thousandUnits = ["", "만", "억", "조", "경", "해"];// 배열 쪼개기function chunkAtEnd(value = "", n = 1) { value = value.replace(/[^0-9]+/g, ""); // 무조건 숫자만 const result = []; for (let end = value.length; end > 0; end -= n) { result.push(value.substring(Math.max(0, end - n), end)); } return re..

tabslet 과 slick 함께 사용할 경우 이슈! tabslet 를 이용하여 탭을 구성하고, 탭 내용으로 slick로 구성한 게시물을 노출하는 경우 slick 이 자리를 잡기 전 tabslet 가 display none 처리를 하여, 이후 탭을 변경하는 경우 게시물이 제대로 노출되지 않는 문제가 발생한다. 해결 방법은? tabslet 버튼에 data를 이용하여 타겟을 지정하고, 해당 타겟의 slick 을 refresh 하면 문제가 해결된다 예제 소스 탭1 탭2 탭3 slick 내용 slick 내용 slick 내용

페이지가 변경되는 경우 위와 같은 스크립트를 이용하여 경고 메시지를 나타낼 수 있다. 하지만, 폼에 내용을 작성하고 저장하는 페이지를 구현했을때는 저장을 누르는 순간에도 해당 안내창이 나타난다. 방법은 아래와 같은 방법으로 해결이 가능하다. 위와 같은 방법으로 적용을 하면 form의 submit 이벤트가 아닌 경우에는 안내메시지를 나타낸다. 출처: https://stove99.tistory.com/128 https://7942yongdae.tistory.com/66

function objobjInnerText(objId, addText){ var insertObj = document.getElementById(objId); var textVal = insertObj.value; var setPosition = insertObj.selectionStart; var beforeTxt = textVal.substring(0, setPosition); var afterTxt = textVal.substring(insertObj.selectionEnd, textVal.length); insertObj.value = beforeTxt + addText + afterTxt; setPosition = setPosition + addText.length; insertObj.sele..

자바스크립트에서 문자열을 특정 구분자를 이용하여 배열을 만들 수 있다. string으로 지정한 문자열을 split을 이용해 콤마(,)의 구분자로 구분하여 array 배열로 반환해보다 const string = 'Javascript,Script,Java'; const array = string.split(','); console.log(array); # 결과 // ['Javascript', 'Script', 'Java'] 위 결과와 같이 array 배열로 문자열을 반환한다 split은 지정 시 두번째 인자에 최대 배열 크기를 지정할 수 있다. const string = 'Javascript,Script,Java'; const array = string.split(',', 2); console.log(arr..

Javascript 에서 변수를 선언할때 무엇으로 선언해야할까? 변수 선언을 위한 var, let, const 의 차이점을 알아보자 var var 을 이용하여 변수를 선언하는 경우 변수 재선언 및 재할당이 가능하다. var name = 'script'; console.log(name); // script var name = 'javascript'; console.log(name); // javascript name = 'jQuery'; console.log(name); // jQuery 이렇게 같은 변수를 재선언, 재할당이 가능하다. 이는 코딩량이 많아지면 같은 변수를 중복하여 사용할 수 있는 문제가 발생되며, 계산값과 같은 변화가 있는 값을 선언하는데에는 문제가 없으나, 변하지 말아야 할 변수 값에는 ..

단순 배열 비교 배열 데이터를 다루다보면 두 배열의 값이 같은지 다른지 비교가 필요할때가 있다 아래와 같이 JSON.stringify 를 통해 간단히 비교가 가능하다 // 배열 선언 const array1 = ['a','b','c','d','e']; const array2 = ['a','b','c']; // 배열 비교 if(JSON.stringify(array1) === JSON.stringify(array2)){ document.write('같다'); } else { document.write('다르다'); } # 출력 다르다 교집합 (Intersection) 두 배열에서 서로 같은 값을 얻고자 할때 사용한다 // 배열 선언 const array1 = ['a','b','c','d','e']; const..