다크 모드 라이트 모드 토글스위치 기능(Javascript/JQuery) 2021. 7. 17. 다크 모드 라이트 모드 토글스위치 CSS와 JavaScript를 활용한 다크 모드 라이트 모드 토글스위치 기능을 내 사이트에 추가하는 방법입니다. 해외 사이트들을 참고하여, 현재 적용되어 있는 그대로의 코드값입니다. 버튼의 형태나 디자인 등은 사용자의 취향에 맞게 수정할 수 있으며, 위치 등도 조절해서 사용하시길 바랍니다. 버튼이 아닌 라벨 태그로도 구성할 수 있습니다. 이 경우에는 버튼 태그로 HTML 블록을 만들어주고 클릭 시 발생하는 자바스크립트인 onclick()를 활용한 방법입니다. 이미지(해)와 이미지(달) 간의 스위칭(토글 전환)은 removeClass와 addClass 자바스크립트로 구성하며, 버튼은 클릭했을 때 toggleClass로 'dark'로 전환되는 과정입니다. HTML과 Java..

[JavaScript] 타이핑 애니메이션 효과 - JQuery 2021. 7. 17. 타이핑 애니메이션 효과 라이브러리를 통해서 쉽게 타이핑 애니메이션 효과를 적용할 수 있습니다. 순서대로 아래와 같이 설정한다면 5분 내에 적용이 가능합니다. 중요한 것은 타이핑 효과를 적용하고자 하는 곳에 블록(HTML)을 넣고 자바스크립트 언어로 구현합니다. CDN / JQeury 라이브러리를 불러옵니다. 사용하고자 하는 위치에 HTML 블럭을 만듭니다. 자바스크립트 언어 코드로 텍스트를 적용합니다. 위는 예시이며, 다양한 효과를 적용할 수 있습니다. 메서드에 따라서 타이핑 속도나 타이핑 전환 속도 등을 구현할 수 있습니다. 옵션(Options) Name Type Default value Description strings String or Array null Strings to type out whe..

[JavaScript] D-Day 타이머 2021. 7. 17. D-Day 타이머 var ddaytimer = setInterval (dayGap, 1000) function dayGap () { var dday = new Date("November 24, 2017 00:00:00").getTime();// 디데이 var nowday = new Date();// 현재시각 nowday = nowday.getTime();// 밀리세컨드 단위변환 var distance = dday - nowday;// 남은 시간에서 현재시작을 뺀다. var d = Math.floor(distance / (1000 * 60 * 60 * 24));// 일 var h = Math.floor((distance / (1000*60*60)) % 24);// 시간 var m = Math.floor((..

jQuery / Method / .append() (문자열 추가) 2019. 9. 7. 자바스크립트로 페이지의 요소를 수정하거나 문자열을 추가할 때 사용하는 메서드. append() 사용방법은 아주 간단하다. 클래스명을 변경하고, .append('추가할 내용' );으로 실행을 시키면 페이지의 맨 앞에 접두어를 붙이거나 수식어를 추가할 수 있다. .prepend의 경우에는 맨 뒤에 추가할 수 있다. $( '클래스명' ).append( '추가할 내용' );