브라우저 넓이 가져오기
$(window).width()
브라우저 높이 가져오기
$(window).height()
<div class="Size" style="background-color:black; color:white; font-size:20px; font-weight:900;">
background
</div>
을 실행시켜보면
아래와 같은 background가 나옵니다.
이것을 jquery로 사이즈를 조절하면
<script type="text/javascript">
$(document).ready(function(){
$('.Size').width($(window).width());
$('.Size').height($(window).height());
$(window).resize(function() {
$('.Size').width($(window).width());
$('.Size').height($(window).height());
});
});
</script>
홈페이지가 시작되면서 동작을 하게 됩니다.
$('클래스 or ID값').width or height($(window).width());
위의 코드를 적용시키면 브라우저 전체에 꽉찬 모습을 볼수있습니다.
$('클래스 or ID값').css('width or height',$(window).width());
css를 적용시키는 방법으로도 접근이 가능합니다!
꽉찬 모습이 싫으시다면
$('클래스 or ID값').width or height($(window).width() +-/* 사이즈조절);
+ - / * 를 통해서 사이즈를 변경해주시면 각 항목마다 style을 지정해주지 않아도 사이즈를 변경할수 있습니다~