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

스프링5 입문

JSP 2.3

JPA 입문

DDD Start

인프런 객체 지향 입문 강의

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



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

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

즉, 지도 영역의 높이는 상단 메뉴 높이를 뺀 나머지가 된다. 그런데, 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이상을 넣었을때도 창화면에 맞쳐져 버려서
    스크롤이 안생겨버리네요 ㅠ

Ajax로 읽어온 JSON 데이터로부터 HTML을 생성해주어야 하는 경우에 사용하기 좋은 문자열 템플릿 처리 라이브러리를 찾다가, jQuery 플러그인인 nano를 발견했다. jQuery nano 플러그인은 매우 간단한 라이브러리로서 아래 사이트에서 다운로드 받을 수 있다.

  • https://github.com/trix/nano

jQuery 1.9.1을 사용하고 있는데, 동작하지 않아 다음과 같이 코드를 일부 수정하였다. (빨간색으로 표시한 부분 삭제 처리, 다른 jQuery 버전에서는 어떻게 동작하는지 확인해보진 않았다.)


/* Nano Templates (Tomasz Mazur, Jacek Becela) */


(function($) {

    var _regex = /\{([\w\.]*)\}/g;

    $.fn.nano = function(template, data) {

        return template.replace(_regex, function (str, key) {

            var keys = key.split('.'), value = data[keys.shift()];

            $.each(keys, function() { value = value[this]; });

            return (value === null || value === undefined) ? '' : value;

        });

    };

}(jQuery));


사용방법은 간단한다. 다음과 같이 jquery와 함께 jquery.nano.js를 <script>로 읽어온 뒤에 $.nano() 메서드를 사용해서 변환 처리를 하면 된다.


<script src="/js/jquery/jquery-1.9.1.min.js"></script>

<script src="/js/jquery/jquery.nano.js"></script>

<script>

var data = {

    content: {

        title: "제목",

        imageUrl: "/pds/1.png"

    },

    desc: "설명"

}

var html = $.nano("<div>{content.title}</div><img src='{content.imageUrl}' alt='{desc}' />", data);

</script>


위 코드에서 nano() 함수의 첫 번째 파라미터는 문자열 템플릿이며, 두 번째 인자는 템플릿에서 사용될 값을 갖는 JSON 객체이다. 문자열에 포함된 {변수명}은 JSON 객체의 해당하는 값으로 치환된다. 예를 들어, 위 코드에서 {content.title}은 data.content.title의 값으로 치환되며, {desc}는 data.desc로 치환된다. 따라서, 위 코드에서 $.nano() 함수의 실행 결과로 생성되는 문자열 html은 "<div>제목</div><img src='/pds/1.png' alt='설명' />"이 된다.


사용법이 매우 간단하면서도 Ajax로 읽어온 JSON 객체를 그대로 사용할 수 있다는 점에서 유용하다.

Posted by 최범균 madvirus

댓글을 달아 주세요

  1. 간세 2013.03.28 09:54 신고  댓글주소  수정/삭제  댓글쓰기

    오~ 굉장히 유용하겠네요.
    $('<div/>').attr(...).html(..).appendTo(..)
    이런코드가 확 줄겠네요..
    좋은 정보 감사합니다. 꾸벅.

IE와 모질라 계열 브라우저에서 로컬 파일의 크기를 알아내는 방법을 살펴본다.

모질라 계열 브라우저에서 로컬 파일 크기 알아내기

파이어폭스와 같은 모질라 계열 브라우저에서는 XUL(XML User Interface Language)이 제공하는 로컬 파일 인터페이스를 사용해서 파일의 크기를 알아낼 수가 있다. 하지만, 파이어폭스가 보안상의 이유로 로컬 파일에 접근할 수 없도록 막아놓고 있기 때문에, 이 부분의 보안을 허용해주어야만 로컬 파일에 접근할 수 있게 된다.

먼저 로컬 파일에 접근할 수 있도록 하기 위해 "signed.applets.codebase_principal_support" 설정값을 true로 지정해주어야 한다. "signed.applets.codebase_principal_support"의 설정은 다음과 같은 방법으로 변경할 수 있다.

  1. 주소창에 about:config 를 입력하면, 설정 목록이 출력된다.
  2. 필터 입력란에 signed 를 입력하면 "signed.applets.codebase_principal_support" 설정명만 목록에 출력된다.
  3. 설정명에서 더블클릭하면 값이 true로 바뀐다.
signed.applets.codebase_principal_support 설정을 true로 변경해주면, 자바스크립트에서 로컬 파일에 접근하고자 할때, 사용자가 접근 권한 여부를 지정해줄 수 있게 된다. signed.applets.codebase_principal_support 설정을 true로 지정한 상태에서 다음과 같은 자바스크립트 코드를 실행하면,

    netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');

다음과 같이 'UniversalXPConnect' 권한을 현재 페이지에 부여할지의 여부를 확인하는 경고창이 뜬다.


위 화면에서 [허가] 버튼을 클릭하면 'UniversalXPConnect' 권한이 현재 페이지에 부여되어, 자바스크립트에서 로컬 파일에 접근할 수 있게 된다.

'UniversalXPConnect' 권한을 얻은 후에는 다음의 코드를 통해서 로컬 파일의 크기를 알아낼 수 있다.

    try {
        netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
        var file = Components.classes["@mozilla.org/file/local;1"]
                             .createInstance(Components.interfaces.nsILocalFile);
        file.initWithPath(filePath);
        
        len = file.fileSize;
    } catch(e) {
        alert("signed.applets.codebase_principal_support를 설정해주세요!\n"+e);
    }

XUL에서 제공하는 nslLocalFile 인터페이스를 사용하면 로컬 파일에 접근할 수 있는데, nslLocalFile 인터페이스의 fileSize 프로퍼티값을 통해서 파일의 크기를 알아낼 수가 있다. 접근하고자 하는 파일은 initWithPath() 함수를 통해서 지정하게 된다.

IE에서 업로드한 파일 크기 알아내기

IE는 Scripting.FileSystemObject ActiveX 객체를 사용해서 로컬 파일에 접근할 수 있지만, 보안상의 문제 때문에 원격에서 로딩한 페이지에서는 로컬 파일에 접근할 수가 없다. IE에서는 인증된 애플릿이나 ActiveX 객체를 사용하지 않고 로컬 파일의 크기를 알아낼 수 있는 편법이 있는데, 간단하게 Image 객체를 사용하면 된다.

IE에서 Image 객체는 dynSrc 프로퍼티를 사용해서 로컬 파일을 명시하더라도 에러가 발생하지 않는다. 또한, IE의 Image 객체는 fileSize 프로퍼티를 제공한다. 따라서, Image 객체의 dynSrc 프로퍼티와 fileSize 프로퍼티를 사용하면, 다음과 같이 매우 간단하게 로컬 파일의 크기를 알아낼 수가 있다.

    var img = new Image();
    img.dynsrc = filePath;
    len = img.fileSize;

완전한 코드

IE와 모질라 계열의 브라우저에 따라 알맞게 자바 스크립트 코드를 사용하면 브라우저에 상관없이 로컬 파일의 크기를 알아낼 수가 있을 것이다. 아래 코드는 브라우저에 상관없이 동작하도록 만들어본 getFileSize() 자바스크립트 함수이다.

    function getFileSize(filePath)
    {
        var len = 0;
        
        if ( navigator.appName.indexOf("Netscape") != -1) {
            try {
                netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
            } catch(e) {
                alert("signed.applets.codebase_principal_support를 설정해주세요!\n"+e);
                return -1;
            }
            try {
                var file = Components.classes["@mozilla.org/file/local;1"]
                                     .createInstance(Components.interfaces.nsILocalFile);
                file.initWithPath ( filePath );
                
                len = file.fileSize;
            } catch(e) {
                alert("에러 발생:"+e);
            }
        } else if (navigator.appName.indexOf('Microsoft') != -1) {
            var img = new Image();
            img.dynsrc = filePath;
            len = img.fileSize;
        }
        return len;
    }

이제 다음과 같이 getFileSize() 함수만 사용하면 로컬 파일의 크기를 구할 수 있게 된다.

    <script ..>
    ...
    var len = getFileSize(document.test.file.value);
    if (len > 1024 * 1024) {
        alert("파일 크기는 1메가보다 작아야 합니다.");
    }
    ...
    </script>
    
    <form name="test">
    <input type="file" name="file">
    </form>

Posted by 최범균 madvirus

댓글을 달아 주세요