저작권 안내: 저작권자표시 Yes 상업적이용 No 컨텐츠변경 No

스프링5 입문

JSP 2.3

JPA 입문

DDD Start

인프런 객체 지향 입문 강의

'jquery css()'에 해당되는 글 1건

  1. 2013.04.03 [팁] 자바 스크립트로 나머지 높이 차지하는 영역 만들기 (2)

다음 지도 서비스를 사용하면 웹 브라우저 크기가 바뀔 때 마다 아래 그림처럼 지도 영역의 높이가 함께 변경되는 것을 알 수 있다.



위 그림에서 지도의 높이는 다음과 같다.

  • 지도 영역의 높이 = 웹 브라우저 전체 높이 - 상단 메뉴 고정 높이

즉, 지도 영역의 높이는 상단 메뉴 높이를 뺀 나머지가 된다. 그런데, CSS에는 높이를 부모 태그에 대한 비율로 지정하는 방법만 있을 뿐, 일부 영역을 뺀 나머지 높이를 지정하는 방법은 존재하지 않는다. 그래서, 위 그림과 같이 특정 요소의 높이가 일부를 제외한 나머지 요소의 높이가 되도록 만들려면 다음과 같은 처리를 해 주어야 한다.

  • 자바 스크립트 이벤트 처리
    • 문서 로딩이나 윈도우 크기 변경 이벤트 발생시에, 해당 요소의 높이를 변경한다.
아래는 자바스크립트로 높이를 처리하기 전의 HTML 문서를 보여주고 있다.


<!DOCTYPE html>

<html>

<head>

<title>가변 높이 처리</title>

<style>

#top{ height: 50px; background-color: #eee; }

#left { background-color: yellow; float: left; width: 100px; }

#content { background-color: red; margin-left: 100px; }

</style>

<body>

<div id="top">헤드 높이</div>

<div id="left">좌측 메뉴</div>

<div id="content">내용</div>

</body>


위 문서를 웹 브라우저로 보면 다음과 같이 left와 content 영역이 표시된다.



우리가 하려는 건, content 영역이 웹 브라우저의 나머지 높이를 차지하도록 만드는 것이다. 자바 스크립트를 이용하면, 간단하게 웹 브라우저의 크기에 따라 content 영역의 높이가 설정되도록 할 수 있다. 여기서는 jquery를 이용해서 크기를 변경해주는 코드를 작성해보았다.


<!DOCTYPE html>

<html>

<head>

<title>가변 높이 처리</title>

<style>

body { height: 100%; margin: 0 0 0 0;}

#top { height: 50px; background-color: #eee; }

#left { background-color: yellow; float: left; width: 100px; }

#content { background-color: red; margin-left: 100px; }

</style>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>

$(document).ready(function() {

resizeContent();

});

$(window).resize(function() {

resizeContent();

});


function resizeContent() {

var windowHeight = $(window).height();

var topHeight = $("#top").height();

$('#content').css({'height':(windowHeight-topHeight)+'px'});

}

</script>

<body>

<div id="top">헤드 높이</div>

<div id="left">좌측 메뉴</div>

<div id="content">내용</div>

</body>


위 코드에서 $(window).height()와 $("#top").height()는 각각 아래 그림과 같은 높이 값을 구해준다.



따라서, windowHeight - topHeight 는 전체 윈도우 높이에서 헤드 높이를 제외한 나머지 높이가 되며, 아래 코드를 실행하면 "#content" 영역은 나머지 만큼의 높이를 차지하게 된다.


$('#content').css({'height':(windowHeight-topHeight)+'px'});


resizeContent() 함수는 문서가 준비되거나 윈도우 크기가 변경될 때 마다 실행되므로, 최초 문서 로딩이 완료되면 내용 부분이 나머지 높이를 차지하게 된다. 실제로 실행해보면 아래 그림과 같이 내용 부분이 나머지 높이를 차지하는 것을 확인할 수 있다.





Posted by 최범균 madvirus

댓글을 달아 주세요

  1. 최소값 2013.08.05 09:34 신고  댓글주소  수정/삭제  댓글쓰기

    혹시 이소스에 Min 값을 넣을 수 있을까요
    실질적으로 컨텐츠에 800px이상을 넣었을때도 창화면에 맞쳐져 버려서
    스크롤이 안생겨버리네요 ㅠ