자바스크립트6 [Javascript, css] 스크롤 내리면 카운팅 시작 되는 소스 안녕하세요! 카운팅 숫자의 업그레이드 버전을 알아보겠습니다. 우선 구현이 어떻게 되는지 결과 부터 보시죠!스크롤을 내려 주세요! Result Html Count number 사용자 명 방문자 명 대기시간 분 대기문서 건 JavaScript function animateValue(id, start, end, duration) { var range = end - start; .. 2024. 6. 25. 자바스크립트 가이드 - 이론, 기초 공부 사이트 https://wguide.co.kr/js-variable/ W.GUIDE(더블유가이드)실무자들을 위한 가이드 및 팁 공유 커뮤니티wguide.co.kr 말끔하게 정리가 잘 되어 있습니다.자바스크립트 기초 공부 하기에 좋은 사이트 입니다. 2024. 6. 18. [javaScript] 클릭 시 클래스 명 변경 되는 자바스크립트 클릭시 자동으로 아이콘의 클래스 명이 변경되게 하는 소스 입니다. 아이디 저장 과 같은 기능뿐 아니라, 클래스 명이 토글 형태로 변경 되어야 하는 부분에 사용할때 가능 합니다. *방법 : 폰트 아이콘의 클래스명을 제어해서 아이콘 모양을 변경해줍니다! html 아이디 저장 css .login_save{ margin:3em } .login_save i{ font-size: 26px; padding-right:3px; cursor:pointer; font-weight:400; color:#999; letter-spacing: -1px; } .login_save i.xi-check-circle{ color:#000 } JavaScript const logo = document.getElementById("sta.. 2023. 11. 29. 크리스마스, 눈 내리는 효과 만들기 (자바스크립트) 자바스크립트로 자연스럽게 내리는 눈 효과 만들기 Html css body,div{ margin:0; padding: 0; } .snow{ width:100%; height: 100vh; background-image: url(https://images.unsplash.com/photo-1491002052546-bf38f186af56?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2200&q=80); background-size:cover; } JS function Snowy() { function t() { window.requestAnimationFrame(t), $.clearRect(0, 0.. 2022. 12. 22. [book]Do it 자바스크립트 입문, 책 요약 코딩과 프로그래밍의 차이 코딩은 소스코드를 작성하는 행위 프로그래밍 : 문제를 분석하고 논리적으로 해결할 수 있는 방법을 찾아 코딩하는 과정까지 포함하는 넓은 개념 자바스크립트로 할 수 있는 일은? - 웹사이트를 동적으로 만듬 - 웹 브라우저에서 실행되는 프로그램을 만듬 - 서버를 구성, 서버용 프로그램을 만들 수 있음 (노드제이에스 자바스크립트 프레임 워크를 사용하면 서버 프로그램을 쉽게 개발 가능) 자바스크립트의 특징은? - 모든 웹 브라우저에서 작동 - 웹브라우저에서 실행결과를 즉시 확인 가능 - 다양한 용도의 프로그램을 만듬 - 다양한 자바스크립트 공개 API 사용가능 - 다양한 라이브러리와 프레임 워크 사용 + 라이브러리 : 제이쿼리 +프레임워크 : 리액트, 앵귤러, 뷰 자바스크립트 소스 작성 .. 2022. 12. 3. [JS 활용] 탭 영역 만들기 - 자바스크립트, css , html5 활용 다양하게 활용이 가능한 탭 부분 디자인 및 코딩 소스 제이쿼리로도 되지만, 스크립트로도 구현이 되는 부분이라 서칭 해서 정리 해 봄. 홈페이지 구성할때, 50% 이상 사용되는 디자인 및 기능이 아닐까 싶다. 네이버 메인 HTML 문의 사항 고객 문의 첫번째 탭 영역 문의 사항 등이 표기 되는 부분 두번째 탭 영역 고객 문의 등이 표기 되는 부분 CSS.wrap { padding: 10px; } .tab { border-top: 1px solid #E2E2E1; border-right: 1px solid #E2E2E1; width: 400px; } .tab .tabitems { width: 100%; position: relative; } .tab .tabitems .item { display: inlin.. 2022. 3. 29. 이전 1 다음 728x90 반응형
