반응형 전체 글6 자바스크립트로 스크롤시 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. 생활코딩 WEB2-JAVASCRIPT 필기 자바스크립트 이 수업은 총 37개의 동영상, 4시간 24분의 재생시간으로 이루어진 수업입니다. 1. 수업소개 web1 html을 먼저보고 이 수업을 보아야한다. html의 등장만으로 혁명적이지만, 사용자와 상호작용하는 웹페이지를 만들고 싶다는 욕망. html은 정적이다. 게임은 사용자의 조작에 반응해서 프로그램이 움직인다. 사람들은 웹페이지가 게임처럼 동적으로 사용자와 상호작용할 수 있게 되기를 원함. 그래서 태어난 기술이 javascript. 이제 웹은 html을 이용해서 웹페이지를 우선 만든 후에, 그렇게 만들어진 웹페이지를 javascript를 이용해서 사용자와 상호작용할 수 있도록 기능을 추가함으로써 html의 정보와 javascript의 기능을 모두 갖춘 유일무이한 시스템으로 성장했다. 예를.. 2024. 7. 16. 생활코딩 WEB2-CSS 필기 1. web2-css 수업소개 web1 html을 보고나서 이 수업을 들어야한다. html-전자문서, 컴퓨터로 정보를 표현하고 인터넷을 통해 전세계 누구나 볼 수 있게됨. css- 웹페이지를 좀더 아름답고 보기좋은 형태로 만들기 위한 수업. 수업의 내용 1. CSS의 기본 문법 (선택자와 속성) 2. Grid를 이용한 현대적인 레이아웃 제작 방법 3. MediaQuery를 이용해서 다양한 크기의 스크린에 대응하는 방법 2. css가 등장하기 전의 상황 html의 한계 >html에 꾸미는 태그를 추가해도 한계가 있음> 근본적인 한계를 극복하기위해 CSS 등장. html은 검색엔진에게 중요한 정보를 전달. css는 디자인을 나타낼 뿐. 3. css의 등장 * : 기호 사이의 컨텐츠 무시 html과 css는.. 2024. 7. 3. 생활코딩 WEB1-HTML 필기 기본html코드 web html css javascript https://www.w3.org/TR/2011/WD-html5-20110405/index.html"target="_blank"title="html5 specification">html5 specification html5 specification html5 specification html5 specification html5 specification html5 specification html5 specif.. 2024. 7. 1. 이전 1 다음 반응형
