본문 바로가기

JavaScript224

[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.
[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.

티스토리툴바