JavaScript164 [Javascript] 모달 만들기 오늘은 모달창을 만들어보겠습니다. css파일에서 볼 부분은 2곳입니다. 1. ` .modal-odverlay{} ` : 모달의 기본 스타일을 설정합니다. 2. ` .open-modal ` : 모달의 가시성을 조절합니다. js파일에서는 2가지를 알아야합니다, 1. modal.classList.add("open-modal") : modal 요소의 클래스 목록에 접근하여, open-modal 클래스를 추가합니다. 2. modal.classList.remove("open-modal") : modal 요소의 클래스 목록에 접근하여, open-modal 클래스를 제거합니다. index.html modal project open modal modal content app.js const modalBtn = docum.. 2024. 4. 19. [Javascript] 자바스크립트로 5초 마다 변경되는 배너 만들기 안녕하세요. 오늘은 Javascript 를 이용하여 5초 마다 배너가 변경되도록 만들어 보겠습니다. 다음은 index.html 코드 입니다. 위와 같이 코드를 작성하면 다음과 같은 결과를 확인 할 수 있습니다. 2024. 4. 18. [Javascript] 마우스 오버 텍스트 색상 변경 오늘은 마우스 오버시 텍스트의 색상을 변경하는 예제를 만들어보겠습니다. addEventListener : HTML 요소에 이벤트 핸들러를 동적으로 추가하는 데 사용됩니다. 이 메서드를 사용하면 웹 페이지의 다양한 요소에 대한 사용자의 상호작용을 감지하고, 특정 이벤트가 발생했을 때 실행할 함수를 지정할 수 있습니다. 코드입니다. DOCTYPE html> 텍스트 색상 변경 예제 마우스를 올려보세요! document.addEventListener('DOMContentLoaded', function() { var textElement = document.getElementById('textToChange'); // 마우스 오버 이벤트 textElement.addEventListener('mouseover', .. 2024. 4. 11. [JavaScript] Sidebar 만들기 오늘은 Sidebar를 만들어보겠습니다. css파일에서의 중요한 부분은 3곳입니다. 1. .sidbar {} : 사이드 바의 기본 스타일 설정 2. .show-sidebar{} : 사이드바 숨김 3. @media screen and (min-width: 676px) {} : 반응형 사이드바 js파일에서 중요한 부분은 2개입니다. 1. sidebar.classList.toggle("className") : sidebar 요소의 클래스 목록에 접근하여 지정된 클래스가 있으면 제거하고, 없으면 추가합니다 2. sidebar.classList.remove("className") : sidebar 요소의 클래스 목록에 접근하여 지정된 클래스를 제거합니다. index.html home about projects c.. 2024. 4. 10. [Javascript] chart.js 를 사용하여 선 그래프 그리기 안녕하세요 오늘은 chart.js 라이브러리를 이용하여 선 그래프를 그려 볼려고 합니다. index.html 파일에 다음과 같이 코드를 작성해줍니다. 위와 같이 코드를 작성하면 다음과 같은 결과를 얻을 수 있습니다. 2024. 4. 9. [JavaScript] CoinGecko API 와 chart api를 사용하여 각 화폐의 현재 USD 가격 표 형태로 비교하기 안녕하세요 오늘은 CoinGecko API 와 chart api를 사용하여 각 화폐의 현재 USD 가격 표 형태로 비교해보겠습니다. index.html 파일에 다음과 같이 코드를 작성해주세요 Crypto Price Comparison Bitcoin Ethereum Litecoin Compare Prices Cryptocurrency Price (USD) script.js 파일에 다음과 같이 코드를 작성해주세요 document.getElementById('compare-prices').addEventListener('click', async () => { const selectedCryptos = Array.from(document.getElementById('crypto-multi-select').sel.. 2024. 4. 6. [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. 이전 1 2 3 4 ··· 19 다음
