width in jQuery

DIV 너비를 창에 맞게 확장시키는 방법(CSS/jQuery)

하위 DIV(Child DIV)를 페이지 너비에 맞게 확장시키는 방법에 대해 간략히 살펴봅니다. 예를 들어 다음과 같은 HTML 코드가 있을 때,

<div class="container" style="width: 960px">
<div class="child_div" style="width: 100%; margin: 0 auto;">
내용
</div>
</div>

창 너비가 960px보다 클 경우에 child_div 클래스 요소가 창 너비에 맞게 확장되도록 하고 싶은 경우 우선 다음과 같은 형식으로 CSS 코드를 사용해봅니다.

.container {

position: relative;

}

.child_div {
position:absolute;
left:0;
right:0;
}
// Source: Stckoverflow

혹은 다음과 같은 코드를 사용해보시기 바랍니다.

.child_div {
position: absolute;
left: 0;
width: 100%;
}

jQuery로 구현할 경우 다음 스크립트를 사용할 수 있습니다.

$(".child_div").width($(window).width());

$( window ).width()는 브라우저의 Viewport 너비를 반환합니다. $(“div”).width()는 너비를을 반환합니다. 참고로 $(selector).width(value)는 너비를 설정합니다(참고).

width in jQuery

또 다른 방법으로 다음과 같은 스크립트를 생각해볼 수 있습니다.

window.onresize = function(event) {
var bWidth = $("body").width();
$(".child_div").width(bWidth);
}
Source: Stackoverflow

이 스크립트는 body 너비를 받아와서 .child_div의 너비로 설정합니다. jQuery의 width 메소드는 여기를 참고하세요.

Reference:

참고:



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.