웹 개발자 도전기

DOM 개요DOM은 HTML , XML 문서의 프로그래밍 인터페이스입니다.DOM은 문서를 노드와 객체로 표현하여, 웹 페이지를 스크립트 또는 프로그래밍 언어에서 사용할 수 있도록 연결시켜주는 역할을 합니다. 주요 특징 DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공합니다.DOM은 동적으로 문서 내용 , 구조 , 스타일을 변경할 수 있게 해줍니다.DOM은 플랫폼/언어 중립적으로 구조화된 문서를 표현하는 W3C의 공식 표준입니다. DOM 트리DOM은 문서를 논리 트리로 표현합니다. 트리의 각 분기점을 "노드"라고 부르며 , 각 노드는 객체를 갖습니다.예) 이 HTML의 DOM 트리는 대략 다음과 같습니다. DOM 조작요소 선택DOM 조작의 첫 단계는 조작..

브라우저 객체 모델(Browser Object Model, BOM)은 웹 브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체들의 모음입니다. BOM을 통해 개발자는 브라우저와 상호작용하고, 웹 페이지 외부의 브라우저 기능을 제어할 수 있습니다. 1. Window 객체Window 객체는 BOM의 핵심이며 브라우저 창을 나타냅니다. 모든 전역 JavaScript 객체 , 함수 , 변수 는 자동으로 Window 객체의 멤버가 됩니다. 주요 프로퍼티와 메서드 window.innerHeight , window.innerWidth : 브라우저 창의 내부 높이와 너비window,open() , window.close() : 새창 열기와 닫기window.alert() , window.prompt()..

1. 반응형 웹 디자인반응형 웹 디자인은 다양한 기기와 화면 크기에 맞춰 웹사이트의 레이아웃과 콘텐츠를 자동으로 조정하는 접근방식입니다. 이를 통해 사용자는 PC,태블릿,스마트폰 등 어떤 기기에서도 최적화된 경험을 할 수 있습니다. 주요 특징 :유연한 그리드 레이아웃유동적인 이미지와 미디어CSS 미디어 쿼리를 통한 스타일 조정 2. 뷰포트 (Viewport)뷰포트는 웹 페이지가 표시되는 기기의 화면 영역을 의미합니다. 반응형 웹 디자인에서 뷰포트 설정은 매우 중요합니다. 뷰포트 단위 :vw (viewport width) : 뷰포트 너비의 1% vh (viewport height) : 뷰포트 높이의 1%   3. 미디어 쿼리 (Media Queries)미디어 쿼리는 CSS에서 특정 조건에 따라 스타일을 적..