반응형 프로그래밍/HTML&CSS3 자바스크립트로 스크롤시 CSS 배경색 변경하기 | window.scrollY 스크롤을 내리면 헤더의 색상이 변경되는 코드를 자바스크립트로 작성하였습니다. addEventListner와 classList, requestAnimationFrame() 메서드가 사용됩니다.자바스크립트로 스크롤 시 CSS 변경하기헤더의 배경색을 transprent로 투명하게 설정했는데 스크롤을 내렸을 때 밝은 배경에서는 헤더가 잘 안보이는 경우가 있습니다. 이럴 때 자바스크립트로 검정색 배경색으로 바꾸는 방법을 알아보겠습니다.[CSS] 스크롤 시 바꿀 디자인 작성하기header.scrollColor{ background-color: black; animation: changeColor 0.5s ease-in-out;}@keyframes changeColor{ 0%{ opaci.. 2024. 10. 31. 문서 객체 모델(DOM)과 노드의 기본 개념 문서 객체 모델(DOM)은 웹 개발에 있어서 매우 중요한 역할을 합니다. DOM을 자바스크립트로 제어하여 화면에 새로운 요소를 추가하거나 기존 구성 요소를 변경하는 등 다양하게 활용할 수 있습니다.이 글은 DOM의 기본 개념을 설명합니다.문서 객체 모델(DOM)이란?DOM이란, 웹 브라우저가 html 문서를 해석한 것을 객체화한 모델 구조를 의미합니다. html의 구성 요소인 등을 트리 구조의 객체 모델로 변환하여 이 트리 구조를 DOM 트리라고 합니다. 각 구성 요소들은 노드라고 하며 서로 부모, 자식, 형제 관계를 형성하게 됩니다. 자바스크립트로 DOM을 조작해 페이지 요소를 변경하거나 추가하는 등의 동적으로 다룰 수 있습니다.노드의 종류와 예시DOM은 html 문서의 각 요소를 노드로 나타냅니.. 2024. 10. 6. 스마트폰 크기에 맞추는 반응형 웹 디자인하기 | 미디어쿼리 화면 크기가 다양한 기기에서 웹페이지를 볼 때 모두 같은 크기의 요소와 디자인을 본다면 한 화면에 내용이 잘리거나 너무 작게 표시되어 보는 데 불편함을 겪을 것입니다. 이 글은 다양한 기기에서 최적화된 웹페이지를 구현하는 반응형 웹 디자인의 기본 개념을 설명합니다.반응형 웹 디자인이란?반응형 웹 디자인은 다양한 디바이스 (데스크톱, 태블릿, 스마트폰 등)에서 웹 페이지의 콘텐츠가 디스플레이 크기에 맞게 최적화된 스타일로 조정되도록 하는 디자인 기법입니다. html, css, 미디어쿼리를 사용하여 구현되며, viewport를 설정하고 미디어쿼리를 정의하는 방식으로 화면의 요소들을 유동적으로 조정시킵니다.viewport 설정하기viewport는 디바이스의 화면 크기를 의미하는 것으로, viewport를 설.. 2024. 10. 6. 이전 1 다음 반응형
