JavaScript167 [JavaScript] 마우스 오버 이미지 미리보기 안녕하세요 오늘은 마우스 오버시 이미지를 미리보는 예제를 만들어보겠습니다. 코드입니다. DOCTYPE html> 이미지 마우스 오버 미리보기 마우스를 올려 이미지 미리보기를 확인하세요. console.log("스크립트가 로드되었습니다."); document.addEventListener('DOMContentLoaded', function() { var previewText = document.getElementById('previewText'); var imagePreview = document.getElementById('imagePreview'); previewText.addEventListener('mouseover', function() { imagePreview.style.display = 'b.. 2024. 4. 2. [JavaScript] 반응형 내비게이션 바 만들기 오늘은 반응형 내비게이션 바를 만들고, js를 이용하는 것 까지 해보겠습니다. 알아야 할 내용 1. @media screen and (mid-width : 800px) : 화면 너비가 800px이상일때 적용하는 미디어 쿼리를 이용한 반응형 스타일입니다. 2. nav-toggle{ display : none ;} : 네비게이션의 햄버거 메뉴를 숨깁니다. (이 코드는 미디어 쿼리 안에 있습니다. 즉 큰화면에서는 햄버거 메뉴가 안보이고, 800px이하일때는 햄버가 메뉴가 보이게 됩니다. ) 3. links.classList.toggle("show-links") : show-links 클래스가 있으면 제거하고, 없으면 추가하는 코드입니다. index.html home about projects contact a.. 2024. 4. 1. [JavaScript] CoinGecko API 와 chart api를 사용하여 기간에 따른 암호화폐 가격 변동을 라인 차트로 표시하기 보호되어 있는 글 입니다. 2024. 3. 28. [JavaScript] 탭 레이아웃 만들기 오늘은 자바스크립트를 활용하여 탭 레이아웃을 만들어 보겠습니다. 코드입니다. DOCTYPE html> 탭 레이아웃 예제 Tab 1 Tab 2 Tab 3 Tab 1 Tab 1의 내용입니다. Tab 2 Tab 2의 내용입니다. Tab 3 Tab 3의 내용입니다. function openTab(evt, tabName) { // 모든 탭 콘텐츠를 숨깁니다. var tabcontent = document.getElementsByClassName("tabcontent"); for (var i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // 모든 탭 링크에서 "active" 클래스를 제거합니다. var tablinks = do.. 2024. 3. 24. [JavaScript] 리뷰 만들기 오늘은 리뷰만들기를 해보겠습니다. 다음은 app.js파일의 설명입니다. 1. reviews 배열은 리뷰 데이터를 저장합니다. 각 리뷰는 사람의 이름, 직업, 이미지 URL, 그리고 리뷰 텍스트를 포함하는 객체입니다. 2. document.getElementById와 document.querySelector를 사용해 HTML 문서의 요소들을 선택합니다. 3. window.addEventListener('DOMContentLoaded', function () {...}); 코드는 문서의 로딩이 완료되었을 때 초기 리뷰를 화면에 표시하기 위해 사용됩니다. 4. showPerson 함수는 주어진 person 인덱스에 해당하는 리뷰 정보를 UI에 표시합니다. 5. nextBtn, prevBtn, randomBtn.. 2024. 3. 23. [JavaScript] Bootstrap 버튼 클릭 스크롤 위치 이동 기능 만들기 안녕하세요. 이번 예제에서는 Bootstrap을 사용하여 버튼 클릭시 스크롤 위치 이동하는 기능을 만들어보겠습니다. 이 기능을 Scrollspy 라고 합니다. 1. Scrollspy란? Scrollspy는 웹 페이지에서 스크롤 이벤트를 사용하여 사용자가 스크롤할 때 특정 섹션 또는 요소가 화면에 보이는지 감지하는 기능입니다. 이를 통해 페이지 내 탐색을 돕고 사용자 경험을 향상시킬 수 있습니다. 주로 단일 페이지 애플리케이션(SPA) 또는 긴 페이지가 있는 웹사이트에서 사용됩니다. 2. 전체코드 Item 1 Item 2 Item 3 Item 4 Item 1 부트스트랩은 HTML, CSS, JavaScript로 구성된 가장 인기 있는 오픈 소스 프론트엔드 프레임워크 중 하나입니다. 트위터에서 만들어졌으며,.. 2024. 3. 22. [JavaScript] CoinGecko API 와 chart api를 사용하여 암호화폐 시장 데이터를 실시간으로 받아와 차트로 시각화하기 안녕하세요 오늘은 CoinGecko API 와 chart api를 사용하여 암호화폐 시장 데이터를 실시간으로 받아와 차트로 시각화 해보겠습니다. 다음은 index.html 의 코드입니다 Crypto Market Data Bitcoin Ethereum Litecoin Show Data 다음은 script.js 의 코드입니다. // 전역 변수로 차트 인스턴스를 저장 let myChart; document.getElementById('show-data').addEventListener('click', async () => { const cryptoCurrency = document.getElementById('crypto-select').value; const ctx = document.getElementBy.. 2024. 3. 19. [JavaScript] 카운터 만들기 오늘은 카운터 만들기를 해보겠습니다. 이해를 돕기위해 알아야 할 내용은 1. html의 클래스로는 여러개의 클래스 명들이 들어올 수 있다. 2. `.` 과 `#`은 CSS선택자 입니다. `#`은 id선택자 `.`은 클래스 선택자입니다. 3. document.querySelectorAll(".btn")는 클래스 속성이 btn인 모든 요소를 찾아서 반환합니다. 4. btn.addEventListener("click", function (e) { ... }) 의 function (e) { ... } 는 이벤트가 발생했을 때 실행할 함수를 정의합니다. `e` 이벤트 객체로, 이벤트에 대한 정보를 담고 있습니다. 4.1. e.currentTarget 은 이벤트 리스너가 부착된 요소를 가리킵니다. 5. e.curr.. 2024. 3. 17. [JavaScript] 웹페이지 로딩화면 안녕하세요 오늘은 자바스크립트를 활용해서 웹페이지 로딩화면을 만들어 보겠습니다. 오늘 배워볼 자바스크립트 메서드입니다. setTimeout JavaScript에서 제공하는 내장 함수로, 특정 함수나 코드를 지정된 시간이 지난 후에 한 번 실행하도록 예약합니다. 이 함수는 비동기적으로 작동하며, 지정된 대기 시간(밀리초 단위)이 경과한 후에 콜백 함수를 실행시킵니다. 코드입니다. DOCTYPE html> 로딩 화면 예제 로딩 중... 페이지 로드 완료! document.addEventListener('DOMContentLoaded', function() { setTimeout(function() { document.getElementById('loadingScreen').style.display = 'no.. 2024. 3. 14. 이전 1 2 3 4 5 ··· 19 다음
