3초마다 모달창으로 "Hello" 구현하기 2021. 7. 17. Window setInterval() Method Click the button to wait 3 seconds, then alert "Hello". After clicking away the alert box, an new alert box will appear in 3 seconds. This goes on forever... setInterval(function(){ alert("Hello"); }, 3000); Try it Parameter Description function Required. The function that will be executed milliseconds Required. The intervals (in milliseconds) on how often to execute ..

[JavaScript] 버튼 클릭 제어 2021. 7. 17. 자바스크립트 마크업 언어 스타트 클릭킹 이를 통해 버튼 클릭을 제어할 수 있으며, 깔끔하게 실행할 수 있다.

Simple Slider(JQuery) 심플한 슬라이더 2021. 7. 17. Simple Slider 매우 쉽게 슬라이드를 구현할 수 있다. 한글 폰트를 설정하지 않았으므로, 실제로 적용할 때는 한글 폰트 정도 수정해주고 이미지에 텍스트를 작성하고 싶다면 왼쪽 상단의 텍스트를 수정해주면 된다. 아래는 적용된 예시 이미지다. 이미지를 왼쪽에서 오른쪽으로 밀어내는 방식이다. .setInterval로 자동 슬라이드 방식이 구현되었다. Slide #1 Sub-title #1 Slide #2 Sub-title #2 Slide #3 Sub-title #3 Slide #4 Sub-title #4 Slide #5 Sub-title #5 ▶ ◀ /*GLOBALS*/ * { margin: 0; padding: 0; list-style: none; } #slider-wrap { width: 100%..

제이쿼리를 해야하는 이유 2021. 7. 17. 자바스크립트와 제이쿼리 선택자의 간편함 제이쿼리를 해야 하는 경우가 점점 많아진다. 좋은 걸까 싶으면서도 가끔씩 밀려오는 살인적인 일정에 정말 짜증이 날 때도 많다. 가뜩이나 더운데, 확실히 예전보다 살아가는 것이 더 힘들다는 생각이 든다. 이제는 뭔가 열심히 하더라도 항상 벽이 있는 것 같고, 개미지옥 같은 생활에서 과연 빠져나올 수 있을까 하는 생각이 든다. 그러다 보니, 일이 재밌을 리가 없다. 그래도 공부를 게을리할 수는 없다. 하루에 공부했던 것을 잊지말고 복습하는 시간과 정리하는 시간을 항상 가지려고 노력한다. 아무리 생각해도 왜 이렇게 만들었는지 모를 자바스크립트와 제이쿼리의 문법에 대해서 고민이 많을 수밖에 없다. 알다시피 제이쿼리의 선택자는 $( )이다. 처음엔 몰랐다. 이게 얼마나 간편..

탑버튼(topbtn) DOM 위치값 계산 2021. 7. 17. 탑버튼(topbtn) DOM 위치값 계산 $(function(){ var thisTopButton = $('.btn_top'); $(window).on('scroll',function(){ var thisScrollTop = $(this).scrollTop(), thisWindowHeight = $(this).height(), thisPageHeight = $('#wrap').height(), thisFooterHeight = $('#footer').height(), btnFixedPoint = 0; btnFixedPoint = thisPageHeight - (thisWindowHeight + (thisFooterHeight)); if (thisScrollTop >= btnFixedPoint) { thi..

다크 모드 라이트 모드 토글스위치 기능(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((..

마키(marquee) 태그 사용법 2021. 7. 17. 마키(marquee) 태그 사용법 태그 안에 아래와 같은 속성들을 지정할 수 있습니다. bgcolor=[색상] | 배경 색상을 설정합니다. width=400 height=300 | 가로, 세로 크기를 설정합니다. direction="left [right|up|down]" | 스크롤 방향을 설정합니다. behavior=scroll [slide|alternate] | 움직임 속성을 지정합니다. (scroll : 한쪽 방향으로 반복 스크롤됩니다. slide : 스크롤되어와서 멈춤, alternate : 왼쪽, 오른쪽으로 반복 스크롤) loop=3 // 반복 횟수를 설정합니다. scrollamount="3" | 스크롤되는 거리간격을 픽셀 단위로 설정합니다. scrolldelay="200" ; 0.2초 | 스크롤..