JavaScript/jQuery

해상도 별 너비, 높이 지정 method

Jooninim 2018. 5. 16. 23:20

1. 사용용도


사용자마다 다른 해상도를 맞추기 위해 사용


2. 코딩방법


1
2
3
4
5
6
7
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
    var ht = $(window).height();
    var wt = $(window).width();
});
</script>
cs

var ht : "ht" 변수 지정

$(window) : 사용자 창을 가리키는 객체("window" 객체는 객체의 계층 구조에서 최상위, 전역객체)

.height(); : 지정된 객체의 높이 값을 구함


var wt : "wt" 변수 지정

$(window) : 사용자 창을 가리키는 객체("window" 객체는 객체의 계층 구조에서 최상위, 전역객체)

.width(); : 지정된 객체의 너비 값을 구함


3. 실습


1. Element(html 정보)를 넣어준다.

1
2
3
4
<body>
    <div id="a"></div>
    <div id="b"></div>
</body>
cs

2. css 정보를 넣어준다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style rel="stylesheet" type="text/css">
    #a {
        position: absolute;
        width:100px;
        opacity: 0.5;
        background: #000fff;
    }
    #b {
        position: absolute;
        height:100px;
        opacity: 0.5;
        background: #fff000;
    }
</style>
cs


3. javascript 정보를 넣어준다.

1
2
3
4
5
6
7
8
9
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
    var ht = $(window).height();
    var wt = $(window).width();
    $("#a").css("height", ht);
    $("#b").css("width", wt);
});
</script>
cs


4. 결과


5. 전체코딩

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
<style rel="stylesheet" type="text/css">
    #a {
        position: absolute;
        width:100px;
        opacity: 0.5;
        background: #000fff;
    }
    #b {
        position: absolute;
        height:100px;
        opacity: 0.5;
        background: #fff000;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
    var ht = $(window).height();
    var wt = $(window).width();
    $("#a").css("height", ht);
    $("#b").css("width", wt);
});
</script>
</head>
<body>
    <div id="a"></div>
    <div id="b"></div>
</body>
</html>
cs