본문 바로가기

분류 전체보기111

[CSS] 버튼 CSS 효과 (입력 input 칸, 드롭다운 dropdown 메뉴 꾸미기) 프로그래밍 세계를 탐구합시다. CSS 효과 (입력 input 칸, 버튼, 드롭다운 dropdown 메뉴 꾸미기) CSS 효과를 활용하여 입력 칸, 버튼, 드롭다운 메뉴를 꾸밀 수 있습니다. 구현 화면 입력 칸에 1955년~2070년 사이의 연도만 입력하실 수 있습니다.를 placeholder로 기본으로 나타나게 했습니다. 입력 칸을 클릭할 시 문구가 사라지고 그림자 효과와 함께 언더바 색이 진하게 변하도록 했습니다. 드롭다운또한 선택했을 때 색이 변하도록 하였으며, 확인 버튼은 마우스를 올렸을 때 hover효과가 나타나도록 구현했습니다. 작성 코드 powerprice.html 확인 powerprice.css .year-dropdown { /* 변경하고자 하는 스타일 추가 */ font-size: 16px.. 2024. 1. 6.

[JavaScript] Chart.js 차트 구현하기 (사용자가 input칸에 연도 year를 입력했을 때 차트 색 변하는 효과 구현하기) (증감률 계산 함수 구현, 숫자만 입력 가능) 프로그래밍 세계를 탐구합시다. Chart.js 차트 구현하기, 증감률 계산 함수 구현하기 JavaScript의 Chart.js를 활용하여 웹페이지에 차트를 출력할 수 있습니다. 구현 화면 저는 이번 프로젝트에서 사용자가 연도를 입력하면 증감률을 계산해 출력하고, 차트의 해당 연도 그래프에 색이 변하는 효과를 적용하고 싶었습니다. 이를 구현하기 위해 powerprice.html에서 사용자가 원하는 year를 입력 받고, powerprice.js에서 함수를 이용해 값을 계산한 후 updateChart(year)를 요청하고, pChart.js에서 year값을 받아 차트의 색을 업데이트하는 코드를 작성했습니다. 값이 나올 때 그래프가 아래로 내려가는 문제가 생겼는데, css에서 min-height를 3rem 설.. 2024. 1. 5.

[CSS] 이미지 스크롤 고정 효과 (페이지 스크롤 시 이미지 고정, background-attatchment) 프로그래밍 세계를 탐구합시다. CSS 효과 (페이지 스크롤 시 이미지 고정, background-attatchment) background-attatchment 코드를 활용하여 이미지가 스크롤을 따라오는 것 같은 효과를 구현할 수 있습니다. 구현 화면 작성 코드 이미지에 background-attatchment를 적용하고 텍스트 박스 아래 위에 배치하면 이미지는 고정되어 있고 텍스트 박스만 스크롤되는 듯한 효과를 구현할 수 있습니다. index.html 전기 단가 상승 문제가 발생하는 원인에는 어떤 것이 있을까요? ⚡전기 단가 계산기 바로가기 ▶️ index.css .image1 { width: 100%; height: 100vh; position: relative; background-image: ur.. 2024. 1. 5.

[GitHub] JavaScript 깃허브 페이지 github.io 배포 (node.js 서버 배포 실패) (private->public 리포지토리 변경하기) 프로그래밍 세계를 탐구합시다. 배포한 페이지 제가 이번에 배포한 페이지입니다. 전기 단가, 1인당 전력 사용량, 에너지 수입의존도, 신재생에너지 비중 데이터를 기반으로 예측값을 계산할 수 있는 사이트입니다. https://ityrannosaurus.github.io/power/ 내일의 전기세 scikit-learn 라이브러리를 사용하여 선형회귀(Linear Regression) 방식으로 예측을 수행했습니다. 실제 데이터를 바탕으로 2070년까지의 예측값을 출력했습니다. ityrannosaurus.github.io 깃허브 페이지 github.io GitHub Pages는 GitHub에서 제공하는 무료 웹 호스팅 서비스입니다. 이 서비스는 개인 프로젝트, 포트폴리오, 간단한 블로그, 프로젝트 문서 등을 온라.. 2024. 1. 4.

이전 1 2 3 4 5 6 7 8 ··· 28 다음

티스토리툴바