(웹 프로그래밍 팁) 젤로 몰드 (Jello Mold) 브라우저 페이지 폭 자동 조절 기법

이글에서는 '젤로몰드' 라는 페이지 폭 자동 조절 기법을 소개합니다.

브라우저 창 크기에 따라 문서의 크기가 적당히 조절됐으면 할 때, 

유용하게 활용할 수 있는 방법이 있다. 물론 스크립트로 세밀하게 조절할 수도

있겠지만, 굳이 인터프리터를 부르지 않고 브라우저 상에서 해결할 수 있는 방법이다.

낡은 노트북을 정리하다가 눈에 띄어, 나름대로 활용성 있는 좋은 기법이었기에

여기에 정리해 놓는다.

 

큰 화면에 대해서는 신경쓸 게 없지만, 나는 주로 작은 화면 때문에 겪는 문제가 많아

작은 화면에서 이 기법을 활용한다. 아래에 일부의 내용을 대충 요약해 봤는데,

관심이 있다면 제일 하단의 링크를 보면 된다.

 

-- 역마진 (Negative Margin) --

우리가 간격을 조절하는 대부분의 CSS 속성들은 엘리먼트를 더 작게 만든다.

Margins, Padding, Borders 들 모두 각 엘리먼트가 차지하는 내부 공간을 줄인다.

그러나 '역 마진'만은 엘리먼트를 부모 엘리먼트 보다 더 크게 만들어 준다.

 

일반 엘리먼트가 취할 수 있는 가장 좁은 폭은 0 px 인데 

만약 어떤 엘리먼트가 0 px 짜리 부모 엘리먼트보다 700 px 더 넓게 확장될 수 있다면, 

(부모 엘리먼트 안에 자리를 잡은) 자식 엘리먼트는 0 + 700 px , 

즉 700 px 의 너비를 가질 수 있게 될 것이다.

바꿔 말하자면, 부모 엘리먼트의 너비가 0 px 일 때, 자식 엘리먼트의 너비는

부모 엘리먼트의 너비보다 항상 700 px 더 넓고 700 px 이하로 좁아질 수는

없는 것이다. 이것으로써 작은 화면에서의 최소 폭이 보장된다. 

자식 엘리먼트의 양 측면에 역마진을 주면 자식 엘리먼트는 양 방향으로 넓어지고 

결과적으로 부모 엘리먼트보다도 넓어 진다. 

 

아래 코드에서, 보통 바깥 쪽 엘리머트는 'body' 엘리먼트이므로 

바깥쪽 div의 id='bodydiv'로 한다. 바로 안 쪽 div는 'expander',

expander에 역마진을 주고 표시되는 화면 너비를 확장할 것이다. 

 

<div id="bodydiv"> 

  <div id="expander"> 

    <p> Jello Mold : 웹 페이지 폭 자동 조절 기법이에요 </p> 

  </div> 

</div>

 

이제 css로 #expander를 #bodydiv보다 700 px 더 넓어지도록 역마진을 사용할 것인데, 

역마진을 #expander의 한쪽 측면에 줘도 되지만, 중앙 정렬을 쉽게 하기 위해 양쪽에 

350 px 씩 주도록 하자. 다음과 같이.

 

#bodydiv { padding: 0 350px 0 350px; } 

#expander { margin: 0 -350px 0 -350px; }

아참, IE에서 역마진이 제대로 동작하려면 몇 가지 보완해야 할 점들이 있다. 

1) #expander 는 position:relative 이어야 하고

2) 모든 div들은 IE hasLayout에 맞게 전체 배율을 보정해야 하며

3) 위 두 개로 구성된 div쌍 사이에 100%의 폭을 갖는 또 하나의 div가 있어야 한다.

 

이를 적용해서 코드를 추가 해보면,

 

<div id="bodydiv"> 

  <div id="sizer">     <!-- IE에 대한 보정용 div -->

     <div id="expander">

        <p> Jello Mold : 웹 페이지 폭 자동 조절 기법이에요</p>

     </div>

</div>

#bodydiv { padding: 0 350px 0 350px; } 

#sizer { width: 100%; }

#expander { margin: 0 -350px 0 -350px; position:relative;}

 

(조건 주석문에서 가져오는 IE 전용 스타일시트에 작성) 

#bodydiv,

#expander {

    zoom: 1;

}

배율을 보정하는 코드는 IE만의 CSS이므로 IE만 읽을 수 있는 조건 주석문 안에 넣어둔다. 

그리고, Safari는 측면 마진의 총 합보다 더 좁은 윈도우 창으로 젤로 몰드가 로드되면

#expander의 역마진을 놓쳐버릴 것이다. 때문에 이를 수정하기 위해서 #expander에

최소 너비를 넣어준다. 이는 단지 Safari에서 어떻게든 동작되도록 하기 위한 것이고

다른 브라우저에는 영향을 주지 않는다.

#expander { margin: 0 -350px 0 -350px; min-width: 700px; }

-- 젤로 몰드 --

위 스타일시트에서 #sizer에 있는 100%라는 값을 50%로 바꾸고 브라우저 창의 폭을 

좁혀보면서 변화를 관찰해 보면 expander 안쪽의 내용 부분은 최소한 700 px의 너비로

(윈도우 폭이 좁아질 때는 수평 스크롤바도 함께) 표시된다. 양쪽 측면의 여백이 점차

감소하면서 expander의 내용이,  좁아지는 윈도우 창보다 상대적으로 더 넓게 표시된다.

반대로 브라우저 창의 폭을 700px이상으로 넓혀보면 양측 여백이 증가하고 브라우저 창에서 

expander  안쪽 내용의 점유 비율이 조금씩 감소한다.

이론적으로 그 폭을 계산해 보면 아래와 같다.

 

1st)   (bodydiv의 padding) 윈도우 폭 - 700 

2nd)  (sizer의 width)    위 계산결과 * 50% 

3rd)  (expander의 역마진)  위 계산결과 + 700

브라우저 폭	계산	젤로 폭	백분율(%)
800px	(800-700) * 0.5 + 700	750	750/800 = 94%
1024px	(1024-700) * 0.5 + 700	862	84%
1280px	...	990	77%
1600px	...	1150	72%
2560px	...	1630	64%

 

결국, 브라우저 창에서 페이지의 내용이 차지하는 비율은,   창이 좁아질 때는 넓고, 

창이 넓어질 때는 좁아지게 되는데,  그 비율의 변화 정도가 전체적으로 브라우저 창의 변화보다 느리다.

젤로 폭의 변화 정도는 간단히 #sizer의 비율을 조정함으로써 정할 수 있다.

 

참고로 지금 다루고 있는 가변 레이아웃들은 브라우저 상에서 중앙 정렬을 해야 하는데, 

#sizer에 대해서는 측면 여백을 auto로 주면 된다. (단, IE의 경우 6.0 이후에서만 유효)

이렇게 완성된 젤로몰드 코드는 다음과 같다.

 

-- 완성된 코드 --

<div id="bodydiv"> 

   <div id="sizer">

      <div id="expander">

          <p> Jello Mold : 웹 페이지 폭 자동 조절 기법이에요 </p>

      </div>

  </div>

</div>

#bodydiv { 

    padding: 0 350px 0 350px;

    text-align: center; /* centering hack for IE5.x/Win */

}

#sizer { 

    width: 50%;

    margin: 0 auto 0 auto; /* standard centering method */

    text-align: left; /* resets centering hack to default */

}

 

#expander { 

    margin: 0 -350px 0 -350px;

    position: relative;

    text-align: left;

}

(조건 주석문에서 가져오는 IE 전용 스타일시트에 작성)

#bodydiv,

#expander {

    zoom: 1;

} 

 

이렇게 만들어진 코드는 브라우저 창에서 내용물이 표시되는 영역의 폭을 

위에 예시한 표와 같이 자동으로 조절해 준다.  실제 위 코드의 동작 모습은

하단의 출처 링크에서 직접 확인해 볼 수 있다.

 

아래는 조금 수정한 테스트 코드지만 위에 표시한 세 가지 단계의 '젤로 폭' 

계산 과정을 그려놓은 것이다. 내가 접하는 화면이 작아서 위 700px은

150px 로 수정했음

 

 

※ 젤로 폭을 구하는 과정 (Jello Width)

 ① 전체 브라우저 폭 - (2 * padding 150px) 

 ② ① 의 결과값 * width 50 %

 ③ ② 의 결과값 + margin 150px

④  ③ 의 결과값 = 젤로 폭

 

더 궁금한 사항은 아래 링크 참조. 

출처 :  http://www.positioniseverything.net/articles/jello-expo.html 에서

          일부 필요한 내용을 발췌 정리한 것입니다.

 

 

 

 

(N20140219)