본문 바로가기

IT/JavaScript4

[CSS] 미디어쿼리 Media Query 적용하기 (사이즈 분기점 기준 px, 테스트 방법) 프로그래밍 세계를 탐구합시다. 미디어쿼리 Media Query 적용하기 (사이즈 분기점 기준 px, 사용방법) 웹을 기준으로 코드를 작성한 후 해당 페이지를 모바일에서 보면 CSS가 이상해지는 것을 확인할 수 있습니다. 미디어 쿼리(Media Queries)는 다양한 디스플레이 장치의 뷰포트(Viewport) 크기와 해상도에 따라 웹 페이지의 스타일을 동적으로 적용할 수 있게 해줍니다. 이를 통해 반응형 웹 디자인(Responsive Web Design)이 가능해지며, 사용자 경험을 크게 향상시킬 수 있습니다. 예를 들어, 화면의 사이즈가 작아지면 원래 있던 카테고리 모양을 바꾸거나 글자 크기를 줄이는 등 CSS를 따로 설정하는 것을 미디어쿼리라고 합니다. 미디어쿼리 분기점 1. 노트북 & 태블릿 가로 .. 2024. 1. 7.

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

이전 1 다음

티스토리툴바