Chapter 08. 위치/크기 관련 기능 다루기. Lesson 03. 화면의 위치 및 크기 관련 기능

Chapter 08. 위치/크기 관련 기능 다루기.

Lesson 03. 화면의 위치 및 크기 관련 기능

핵심 01. 전체 화면 크기 구하기

핵심 02. 유효한 전체 화면 크기 구하기

핵심 01. 전체 화면 크기 구하기

사용법 :

screen.width

screen.height

웹브라우저에서 제공하는 screen 객체의 width와 height 프로퍼티에는 모니터 해상도 정보가 담겨 있습니다.

예제 01. 현재 화면의 해상도를 #info에 출력해 주세요

jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function()
{
    // 스크린 화면 크기 출력
    var strInfo = "";
    strInfo += "screen.width = "+screen.width+"<br>";
    strInfo += "screen.height = "+screen.height+"<br>";
        
    $("#info").html(strInfo);
})
</script>

핵심 02. 유효한 전체 화면 크기 구하기

사용법 :

screen.availWidth

screen.availHeight

availWidth, availHeight는 Screen 객체의 속성 width와 height에서 운영체제의 작업 표시줄 영역이 제외도니 크기 입니다.

예제 02. 현재 화면의 유효한 크기를 #info에 출력해 주세요.

<script>
$(document).ready(function()
{
    // 스크린 화면 크기 출력
    var strInfo = "";
    strInfo += "screen.availwidth = "+screen.availwidth+"<br>";
    strInfo += "screen.availheight = "+screen.availheight+"<br>";
        
    $("#info").html(strInfo);
})
</script>