레이아웃의 다단을 100% 로 맞추기

예전에 Table로 레이아웃을 잡을 때는 어렵지 않게 구현되었던 표현인데 근래들어서 웹표준에 맞게 코딩을 하게 되면서 레이아웃을 DVI태그로 구현해야 하게 되므로써 다소 구현이 어려워진 것 중에 하나가 다단을 구성하는 것이 아닐까 합니다.
그 다단을 구현하는 방법이 여러가지가 있을 것 같은데.. 이번에 소개를 해드리는 것은 javascript로 구현하는 방법입니다.
레이아웃을 구성 시 2단 또는 3단 이상의 다단을 구성할때 상위 Tag에 대해 가로 100%로 자동으로 맞춰지는 javascript 입니다.
예를들어 만약 레이아웃을 4단으로 구성한다고 했을 때 3개의 단에 대해서는 px 또는 %로 고정값을 지정하고 나머지 하나의 단에 대해서만 .pct 클래스를 지정해 주면 .pct 클래스가 자동으로 나머지 넓이에 대해 값을 지정해 주게 됩니다.

HTML

전체 div를 multiColumn으로 감싸 줍니다. 물론 class이름은 바꿀 수 있습니다. 1단, 2단, 4단은 css에서 또는 inline으로 넓이를 지정해 주면 됩니다. 여기에 작성된 샘플은 CSS 파일에서 넓이를 지정해 주었습니다.

<div class='multiColumn'>
    <div>1단</div>
    <div>2단</div>
    <div class='pct'>3단</div>
    <div>4단</div>
</div>

JAVASCRIPT

jquery를 활요해서 HTML문서가 처음 로딩될때와 브라우저 창의 크기를 변경할떄 체크를 해서 .pct의 넓으를 재지정해 줍니다.

$(function () {
    contentLayAutoWidth();
});

$(window).resize(function () {
    contentLayAutoWidth();
});

/* 레이아웃의 다단 단수를 100%로 채움 */
function contentLayAutoWidth() {
    $('.multiColumn > .pct').css("width", function (index) {
        var siblingsWidthSum = 0;
        var parentPadding = 1;
        var siblingsMargin = 10;
        var parentWidth = $(this).parent().innerWidth();
        $(this).siblings().each(function () {
            siblingsWidthSum = siblingsWidthSum + ($(this).outerWidth() + siblingsMargin);
        });
        index = parentWidth - siblingsWidthSum - parentPadding;
        return index;
    });
}

CSS

css를 통해서 1단, 2단, 4단의 넓이를 20%로 지정했습니다.
나머지의 css요소는 이번 코드에서는 중요하지 않은 요소들입니다. 단지 변경된것을 눈에 보여주기 위해 지정된 css요소들 입니다.

.multiColumn div {
    width:20%;
    height:200px;
    margin:0 2px;
    border:1px #ddd solid;
    float:left
}
.multiColumn div.pct {
    border:1px #fdd solid
}

이렇게 지정하면 아래와 같이 표현이 됩니다. 아래의 링크를 눌러서 확인하시면 됩니다. jsfiddle 로 확인 할 수 있습니다.

레이아웃을 구성 시 2단 또는 3단 이상의 다단을 구성할때 상위 Tag에 대해 가로 100%로 자동 맞춰지는 자바스크립트 입니다. 예를들어 만약 레이아웃을 4단으로 구성한다고 했을 때 3개의 단에 대해서는 px 또는 %로 고정값을 지정하고 나머지 하나의 단에 대해서만 .pct 클래스를 지정해 주면 `.pct' 클래스가 자동으로 맞춰 줍니다.

HTML

<div class='multiColumn'>
    <div>1단</div>
    <div>2단</div>
    <div class='pct'>3단</div>
    <div>4단</div>
</div>

JAVASCRIPT

$(function () {
    contentLayAutoWidth();
});

$(window).resize(function () {
    contentLayAutoWidth();
});

/* 레이아웃의 다단 단수를 100%로 채움 */
function contentLayAutoWidth() {
    $('.multiColumn > .pct').css("width", function (index) {
        var siblingsWidthSum = 0;
        var parentPadding = 1;
        var siblingsMargin = 10;
        var parentWidth = $(this).parent().innerWidth();
        $(this).siblings().each(function () {
            siblingsWidthSum = siblingsWidthSum + ($(this).outerWidth() + siblingsMargin);
        });
        index = parentWidth - siblingsWidthSum - parentPadding;
        return index;
    });
}

CSS

.multiColumn div {
    width:20%;
    height:200px;
    margin:0 2px;
    border:1px #ddd solid;
    float:left
}
.multiColumn div.pct {
    border:1px #fdd solid
}

jsfiddle로 확인 할 수 있습니다.

옛날블로그

이 블로그 검색