해상도별 이미지 교체 window resize

반응형 웹사이트 제작 시 해상도 처리 및 감지 방법에는 2가지가 있다. CSS의 미디어쿼리 사용 Javascript의 $(window).width();와 if문 사용 CSS로는 미디어쿼리와 background 속성을 이용해 해상도별 이미지를 수정할 수 있지만 마크업을 수정할 순 없다. 이때 Javascript로 브라우저의 가로 값을 계산하여 해상도별로 마크업을 수정해줄 수 있다. resize event // jQuery $(window).resize(function(){ // script }); // JavaScript - addEventListener window.addEventListener('resize', function(event) { // script }, true); // JavaScript..

2022.01.11

BOM, DOM Object Model

브라우저 객체 모델 (Browser Object Model : BOM) 실제 우리가 사용하고 있는 브라우저와 관련된 객체의 집합이다. 대표적으로 window(최상위 객체), location, navigator, history, screen, document 객체가 있다. location Object 웹 링크, url에 관련된 객체 navigatior Object 브라우저의 탑재 메뉴들 관장 history Object 히스토리 관장 screen Object 윈도우 창, 사이즈 관장 (반응형 웹 관련) window 객체 ＊ 브라우저의 내장 객체 중 최상위 객체 ＊ 모든 전역 객체, 함수, 변수는 자동적으로 window 객체에 속함 ＊ 모든 전역 변수는 window 객체의 속성이 됨 ＊ 모든 전역 함수는 wi..

2021.12.02