✨ Front-end/자바스크립트(JS)29 [JavaScript] jQuery 이용해서 이미지 슬라이드 만들기 (캐러셀) HTML HTML 삽입 미리보기할 수 없는 소스 CSS HTML 삽입 미리보기할 수 없는 소스 JS HTML 삽입 미리보기할 수 없는 소스 jQuery를 이용해서 if 대신 while을 넣어보았다. 그러자 갑자기 무한로딩에 걸려 어쩔수 없이 while을 쓰지 못해 코드가 굉장히 길어졌는데, 해결 방법에 대해 더 연구해보아야겠다. See the Pen Untitled by park (@johong) on CodePen. 2023. 2. 19. [JavaScript] 타이머 예제 setInterval, clearInterval, timeOut Timeout 함수 setTimeout 은 ~초후 코드를 실행하는 것이다. 즉, 일정 시간이 지난 후 함수가 한번 실행 된다. clearTimeout은 setTimeout 함수를 취소한다. Interval 함수 setInterval 은 매 일정시간마다 함수가 계속 실행 된다. clearInterval 은 setInterval 함수에 의해 실행된 반복 작업을 종료한다. 코드의 예는 이렇다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 5초가 지나면 알람박스를 사라지는 기능을 만들어보았다. HTML HTML 삽입 미리보기할 수 없는 소스 CSS HTML 삽입 미리보기할 수 없는 소스 JS HTML 삽입 미리보기할 수 없는 소스 See the Pen Untitled by pa.. 2023. 2. 19. [JavaScript] if문으로 HTML 배경 Dark, White모드 만들기 이번에는 자바스크립트를 이용해서 모드 변경을 해보았다. HTML HTML 삽입 미리보기할 수 없는 소스 CSS HTML 삽입 미리보기할 수 없는 소스 2023. 2. 19. [JavaScript] classList와 jQuery 사용 방법 Buttons Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. getbootstrap.com 먼저 bootstrap에서 버튼이나 nav바 등 많은 기능들을 끌어와 사용할 수 있으니 적극적으로 활용하자. 이곳에서 끌어와 사용한 코드가 있을때에는 반드시 아래에 있는 코드들을 해당 head와 body에 적절히 넣어준다. 잘 모르겠다면 그냥 Starter template 을 복붙하자. jQuery 사용시에는 아래 사이트에 들어가 js 코드를 하나 복사한다. https://releases.jquery.com/ jQuery CDN The.. 2023. 2. 19. [JavaScript] getElementById와 addEventListener(이벤트리스너) 자바스크립트란? 자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어이다. 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행된다. HTML과 CSS, JS를 이용해 버튼을 만들어 간단한 alert 기능을 구현해보았다. HTML HTML 삽입 미리보기할 수 없는 소스 CSS HTML 삽입 미리보기할 수 없는 소스 JS HTML 삽입 미리보기할 수 없는 소스 2번째 줄은 document.getElementByID에 있는 id 값을 ~~로 바꾸어라 라는 의미이다. 즉, id값으로 alert로 받아온 css의 style에 display 속성을 block으로 바꾸는 것이다. 이와 같은 방법으로 버튼을 만들어 alert의 열고 닫기를 구현해.. 2023. 2. 12. 이전 1 2 3 다음
