• 회원가입
  • 로그인
  • 구글아이디로 로그인

[BOM] JS - Window Screen 객체 - 화면객체 (= 스크린객체 = screen객체)

Window Screen 객체

 

1.  

window.screen 객체는 사용자 화면에 대한 정보 포함.

 

2.

window.screen객체는 window 접두사없이 작성 가능.

 

screen.width - 화면너비

screen.height - 화면높이

screen.availWidth - 사용가능화면너비

screen.availHeight - 사용가능화면높이

screen.colorDepth - 색상심도

screen.pixelDepth - 픽셀심도

 

 

 

window.screen.width - 화면너비 (픽셀단위)

 

<p id="demo"></p>


<script>

document.getElementById("demo").innerHTML = 

"화면너비:  " + screen.width;

</script>

 

결과보기 (예) 1280

 

 

window.screen.height - 화면높이 (픽셀단위)

 

<p id="demo"></p>


<script>

document.getElementById("demo").innerHTML = 

"화면높이:  " + screen.height;

</script> 

 

결과보기 (예) 720

 

 

window.screen.availWidth - 사용가능화면너비

 

방문자 화면너비를 픽셀 단위로 Windows 작업표시줄과 같은 인터페이스 기능을 뺀 값으로 반환.

 


 

<p id="demo"></p>


<script>

document.getElementById("demo").innerHTML = 

"사용가능 화면너비:  " + screen.availWidth;

</script>

 

결과보기: (예) 1280

 

 

window.screen.availHeight - 사용가능화면높이

 

방문자 화면높이를 픽셀 단위로 Windows 작업표시줄과 같은 인터페이스 기능을 뺀 값으로 반환.

 


 

<p id="demo"></p>


<script>

document.getElementById("demo").innerHTML = 

"사용가능 화면높이:  " + screen.availHeight;

</script>

 

결과보기: (예) 680

 

 

window.screen.colorDepth - 화면색상심도

 

한 색상을 표시하는 데 사용되는 비트 수 반환.

 


 

1.

모든 최신 컴퓨터는 색 해상도에 24 비트 또는 32 비트 하드웨어 사용.

24 비트 = 16,777,216 개의 다른 "True Colors (트루 컬러)"

32 비트 = 4,294,967,296 개의 다른 "Deep Colors(딥 컬러)"

 

2.

오래된 컴퓨터는 16 비트 사용. 65,536 개의 다른 "High Colors (하이 컬러)"해상도.

아주 오래된 컴퓨터와 오래된 휴대폰은 256 비트의 "VGA Color"인 8 비트 사용.

 

3.

HTML에 사용된 #rrggbb (rgb) 값은 "트루 컬러" 의미. (16,777,216 개의 다른 색상).

 

4.

최신 컴퓨터의 경우, colorDepth (색상심도)와 colorDepth (픽셀심도)가 동일.

 


 

<p id="demo"></p>


<script>

document.getElementById("demo").innerHTML = 

"화면색상심도 : " + screen.colorDepth;

</script>

 

결과보기 (예) 24


 

window.screen.pixelDepth - 화면픽셀심도

 

<p id="demo"></p>


<script>

document.getElementById("demo").innerHTML = 

"화면픽셀심도: " + screen.pixelDepth;

</script> 

 

결과보기: (예) 24 

※ 최신 컴퓨터의 경우, colorDepth (색상심도)와 colorDepth (픽셀심도)가 동일.

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
DOM JS - CSS - 스타일변경
DOM JS - Animation - 애니메이션 (= 동적효과 = 움직임효과)
DOM JS - Events - 이벤트 2
DOM JS - addEventListener() 메서드 ★★★★★ - 이벤트 걸기 (= addEventListen…
DOM JS - Navigation - 노드탐색 (= 요소탐색) ※ 텍스트노드복사
DOM JS - Node - 노드추가, 노드삭제, 노드변경 (= 노드생성, 노드제거, 노드교체)
DOM JS - Collection - HTML요소집합 (= HTML요소묶음)
BOM JS - Window BOM - 윈도우 브라우저객체모델 (BOM: Browser Object Model)
BOM JS - Window Screen 객체 - 화면객체 (= 스크린객체 = screen객체)
BOM JS - Window Location 객체 - 위치객체 (= 로케이션객체 = Location객체) ※ loc…
BOM JS - Window History 객체 - 이력객체 (= 히스토리객체 = History객체 = 뒤로가기 +…
BOM JS - Window Navigator 객체 - 브라우저객체 (= 네이게이터객체 = Navigator객체 =…
BOM JS - Popup Boxes - 팝업상자 (= 팝업박스 = Alert Box + Confirm box + …
BOM JS - Timing Events ★ - 시간간격 코드실행 (= 타이밍 이벤트 = 시간이벤트 = 일정시간별 …
BOM JS - Cookie (쿠키) 사용법 ★★★ - 쿠키 (설정・생성) / 쿠키 (읽기・얻기・가져오기) / 쿠…
AJAX JS - AJAX (아작스) 소개
AJAX JS - AJAX - XMLHttpRequest() 메서드 ★ - 객체생성 (= 아작스/에이잭스 핵심 = X…
AJAX JS - AJAX - open()/send() 메서드 ★ - 서버에 요청 보내기 (GET방식 vs POST방…
AJAX JS - AJAX - Server Response (서버응답) - 콜백함수 사용 예제
AJAX JS - AJAX - XML 아작스 예제 (= xml 데이터 불러와 표만들기)
4/67
목록
찾아주셔서 감사합니다. Since 2012