[jQuery]치수

웹페이지를 만들때, 화면크기에 맞춰서 요소들을 배치하고, 수정해야합니다.

 

 

 

요소는 다음과같이 구성되있습니다.

 

 

 

element 는 요소의 내용이 표시되는 곳 즉, 텍스트 내용들을 의미합니다.

 

padding 은요소 안쪽을 부풀려줍니다.

 

border 는 테두리를 의미합니다.

 

margin 은 테두리 밖의 공간을 띄워줍니다.

 

 

 

 

 

 

 

jQuery에서 쓰이는 몇 가지 메소드를 알아보겠습니다.

 

 

 

width() - 요소의 너비를 설정하거나 반환 ( 마진,패딩제외 )

height() - 요소의 높이를 설정하거나 반환 ( 마진,패딩제외 )

 

$("button").click(function(){
    var txt = "";
    txt += "Width: " + $("#div1").width() + "</br>";
    txt += "Height: " + $("#div1").height();
    $("#div1").html(txt);
});

직접해보기

 

 

 

 

 

 

 

innerWidth() - 요소의 너비를 반환 (패딩 포함)

innerHeight() - 요소의 높이를 반환 (패딩 포함)

 

$("button").click(function(){
    var txt = "";
    txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
    txt += "Inner height: " + $("#div1").innerHeight();
    $("#div1").html(txt);
});

직접해보기

 

 

 

 

 

 

 

 

outerWidth() - 요소의 너비를 반환 (패딩 및 테두리 포함)

outerHeight() - 요소의 높이를 반환 (패딩 및 테두리 포함)

 

$("button").click(function(){
    var txt = "";
    txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
    txt += "Outer height: " + $("#div1").outerHeight();
    $("#div1").html(txt);
});

 

 

 

 

 

 

 

 

 

 

 

다음 예제는 HTML 문서와 윈도우 브라우저의 너비,높이를 반환합니다.

 

$("button").click(function(){
    var txt = "";
    txt += "Document width/height: " + $(document).width();
    txt += "x" + $(document).height() + "\n";
    txt += "Window width/height: " + $(window).width();
    txt += "x" + $(window).height();
    alert(txt);
});