Overview

Xpress Engine에서 사용되는 웹 페이지의 다양한 레이아웃 요소들을 정의 하였습니다. 레이아웃은 크게 고정폭, 가변폭, 혼합폭으로 구분할 수 있는데 각각을 직관적으로 이해하려면 아래 제시된 예제들을 볼 때 브라우저 창 너비를 조절해 보시면 됩니다. 고정폭은 변하지 않으나 가변폭은 브라우저 크기에 따라 변하는 것을 말합니다. 혼합폭은 가변폭과 고정폭이 함께 사용된 레이아웃 입니다.

  • 고정폭 레이아웃 Fixed Lauout :
    모든 레이아웃 요소들의 너비가 절대 단위(px)로 지정된 레이아웃을 말합니다.
  • 가변폭 레이아웃 Liquid Lauout :
    모든 레이아웃 요소들의 너비가 상대 단위(%)로 지정된 레이아웃을 말합니다.
  • 혼합폭 레이아웃 Hybrid Lauout :
    레이아웃 너비에 상대 단위(%)와 절대 단위(px)가 함께 사용된 것을 말합니다.

아래 제시된 모든 예제들의 HTML 구조는 동일합니다. HTML 파일 보기. CSS 파일 보기 [1], [2].

Table of contents

  1. 1 Column Layout
    1. Fixed 1 Column Layout
    2. Liquid 1 Column Layout
    3. Hybrid 1 Column Layout
  2. 2 Columns Layout
    1. Fixed 2 Columns Layout
    2. Liquid 2 Columns Layout
    3. Hybrid 2 Columns Layout
  3. 3 Columns Layout
    1. Fixed 3 Columns Layout
    2. Liquid 3 Columns Layout
    3. Hybrid 3 Columns Layout
  4. Align Layout (center, left, right)
  5. HTML Markup
  6. DOM Hierarch
  7. CSS Selector

1 Column Layout

Fixed 1 Column Layout

모든 레이아웃 요소의 너비가 고정폭으로써 콘텐츠가 위치한 블럭의 컬럼 개수가 1개인 레이아웃 입니다. #container 영역이 960px 고정폭으로 설정 되어있고 .extension 영역은 #container 너비의 3등분 고정폭으로 잡혀 있습니다. #content 영역을 넓게 사용하려는 경우 적합하지만 모니터의 수평 해상도가 1024px 보다 작은 경우 가로 스크롤을 유발하는 단점도 있습니다.

  1. fixed_cfixed_c.html<div id="xe" class="fixed"><div id="container" class="c">

Liquid 1 Column Layout

모든 레이아웃 요소의 너비가 가변폭으로써 콘텐츠가 위치한 블럭의 컬럼 개수가 1개인 레이아웃 입니다. #container 영역은 화면크기의 80% 가변폭으로 설정 되어있고 .extension 영역은 #container 너비의 3등분 가변폭으로 잡혀 있습니다. #content 영역을 다양한 해상도에서 폭넓게 사용하려는 경우 적합하며 브라우저의 너비에 따라 모든 레이아웃 요소들이 같은 비율로 줄어들거나 늘어나게 됩니다.

  1. liquid_cliquid_c.html<div id="xe" class="liquid"><div id="container" class="c">

Hybrid 1 Column Layout

가변폭과 고정폭 너비를 함께 사용한 혼합폭 레이아웃으로써 콘텐츠가 위치한 블럭의 컬럼 개수가 1개인 레이아웃 입니다. #container 영역은 화면크기의 80% 가변폭으로 설정 되어있고 .extension 영역은 #container 너비의 3등분 고정폭으로 잡혀 있습니다. #content 영역을 다양한 해상도에서 폭넓게 사용하려는 경우 적합하며 브라우저의 너비에 따라 #container의 너비는 같은 비율로 변경되지만 .extension 영역은 고정폭으로 지정되어 있어 해상도의 영향을 받지 않습니다.

  1. hybrid_chybrid_c.html<div id="xe" class="hybrid"><div id="container" class="c">

2 Columns Layout

Fixed 2 Columns Layout

모든 레이아웃 요소의 너비가 고정폭으로써 콘텐츠가 위치한 블럭의 컬럼 개수가 2개인 레이아웃 입니다. #container 영역이 960px 고정폭으로 설정 되어있고 #content 영역은 720px이며 .extension 영역은 220px 너비의 고정폭으로 잡혀 있습니다. #body 영역을 2개의 분할 컬럼으로 사용하려는 경우 적합하지만 브라우저의 너비를 1024px 보다 작게 변경하는 경우 가로 스크롤을 유발하는 단점도 있습니다.

  1. fixed_cefixed_ce.html<div id="xe" class="fixed"><div id="container" class="ce">
  2. fixed_ecfixed_ec.html<div id="xe" class="fixed"><div id="container" class="ec">

Liquid 2 Columns Layout

모든 레이아웃 요소의 너비가 가변폭으로써 콘텐츠가 위치한 블럭의 컬럼 개수가 2개인 레이아웃 입니다. #container 영역은 화면크기의 80% 가변폭으로 설정 되어있고 #content 영역은 75%이며 .extension 영역은 23% 너비의 가변폭으로 잡혀 있습니다. #body 영역을 2개의 분할 컬럼으로 사용하려는 경우 적합하지만 브라우저의 너비를 매우 작게 변경하는 경우 .extension 영역의 너비도 동일 비율로 줄어들게 되는 단점도 있습니다.

  1. liquid_celiquid_ce.html<div id="xe" class="liquid"><div id="container" class="ce">
  2. liquid_ecliquid_ec.html<div id="xe" class="liquid"><div id="container" class="ec">

Hybrid 2 Columns Layout

가변폭과 고정폭 너비를 함께 사용한 혼합폭 레이아웃으로써 콘텐츠가 위치한 블럭의 컬럼 개수가 2개인 레이아웃 입니다. #container 영역은 화면크기의 80% 가변폭으로 설정 되어있고 #content 영역은 100%이며 .extension 영역은 260px 너비의 고정폭으로 잡혀 있습니다. #body 영역을 2개의 분할 컬럼으로 사용하려는 경우 적합하며 브라우저의 너비에 따라 #container의 너비는 같은 비율로 변경되지만 .extension 영역은 고정폭으로 지정되어 있어 해상도의 영향을 받지 않습니다.

  1. hybrid_cehybrid_ce.html<div id="xe" class="hybrid"><div id="container" class="ce">
  2. hybrid_echybrid_ec.html<div id="xe" class="hybrid"><div id="container" class="ec">

3 Columns Layout

Fixed 3 Columns Layout

모든 레이아웃 요소의 너비가 고정폭으로써 콘텐츠가 위치한 블럭의 컬럼 개수가 3개인 레이아웃 입니다. #container 영역이 960px 고정폭으로 설정 되어있고 #content 영역은 520px이며 .extension 영역은 200px 너비의 고정폭으로 잡혀 있습니다. #body 영역을 3개의 분할 컬럼으로 사용하려는 경우 적합하지만 브라우저의 너비를 1024px 보다 작게 변경하는 경우 가로 스크롤을 유발하는 단점도 있습니다.

  1. fixed_ceefixed_cee.html<div id="xe" class="fixed"><div id="container" class="cee">
  2. fixed_ecefixed_ece.html<div id="xe" class="fixed"><div id="container" class="ece">
  3. fixed_eecfixed_eec.html<div id="xe" class="fixed"><div id="container" class="eec">

Liquid 3 Columns Layout

모든 레이아웃 요소의 너비가 가변폭으로써 콘텐츠가 위치한 블럭의 컬럼 개수가 3개인 레이아웃 입니다. #container 영역은 화면크기의 80% 가변폭으로 설정 되어있고 #content 영역은 56%이며 .extension 영역은 20% 너비의 가변폭으로 잡혀 있습니다. #body 영역을 3개의 분할 컬럼으로 사용하려는 경우 적합하지만 브라우저의 너비를 매우 작게 변경하는 경우 .extension 영역의 너비도 동일 비율로 줄어들게 되는 단점도 있습니다.

  1. liquid_ceeliquid_cee.html<div id="xe" class="liquid"><div id="container" class="cee">
  2. liquid_eceliquid_ece.html<div id="xe" class="liquid"><div id="container" class="ece">
  3. liquid_eecliquid_eec.html<div id="xe" class="liquid"><div id="container" class="eec">

Hybrid 3 Columns Layout

가변폭과 고정폭 너비를 함께 사용한 혼합폭 레이아웃으로써 콘텐츠가 위치한 블럭의 컬럼 개수가 3개인 레이아웃 입니다. #container 영역은 화면크기의 80% 가변폭으로 설정 되어있고 #content 영역은 100%이며 .extension 영역은 220px 너비의 고정폭으로 잡혀 있습니다. #body 영역을 3개의 분할 컬럼으로 사용하려는 경우 적합하며 브라우저의 너비에 따라 #container의 너비는 같은 비율로 변경되지만 .extension 영역은 고정폭으로 지정되어 있어 해상도의 영향을 받지 않습니다.

  1. hybrid_ceehybrid_cee.html<div id="xe" class="hybrid"><div id="container" class="cee">
  2. hybrid_ecehybrid_ece.html<divid="xe" class="hybrid"><div id="container" class="ece">
  3. hybrid_eechybrid_eec.html<div id="xe" class="hybrid"><div id="container" class="eec">

Align Layout (center, left, right)

'#container' 요소를 화면의 '중앙' 또는 '좌측' 또는 '우측'으로 배치할 수 있습니다. 기본값은 '중앙 정렬'이며 '좌측' 또는 '우측'으로 배치할 때 클래스가 필요합니다. '#xe' 요소에 '.aLeft' 또는 '.aRight' 클래스를 추가하면 됩니다. 예제에는 적용되어 있지 않으나 클래스로 제어할 수 있도록 이미 처리되어 있습니다.

HTML Markup

<div id="xe" class="fixed | liquid | hybrid | aLeft | aRight">
  <div id="container" class="c | ce | ec | cee | ece | eec">
    <div id="header">
      <h1></h1>
      <div class="extension"></div>
    </div>
    <div id="body">
      <div id="content"></div>
      <div class="extension e1"></div>
      <div class="extension e2"></div>
    </div>
    <div id="footer">
      <div class="extension"></div>
      <address></address>
    </div>
  </div>
</div>

DOM Hierarch

  • #xe .fixed | .liquid | .hybrid | .aLeft | .aRight
    • #container .c | .ce | .ec | .cee | .ece | .eec
      • #header
        • h1
        • .extension
      • #body
        • #content
        • .extension .e1
        • .extension .e2
      • #footer
        • .extension
        • address

CSS Selector

Selector Description
#xe 'body' 요소의 최초의 자손으로써 현재의 layout이 XE의 layout용 CSS Framework을 사용하고 있다는 것을 의미 합니다.
.fixed | .liquid | .hybrid '#xe' 요소에 함께 선언되는 클래스로써 현재의 layout이 어떤 성질(고정폭, 가변폭, 혼합폭)을 갖는지를 클래스 이름으로 정의 합니다. 스스로는 아무 속성이 없지만 클래스로 하여금 자식 '#container'가 다양한 성질을 가질 수 있도록 제어합니다.
.aLeft | .aRight '#xe' 요소에 함께 선언되는 클래스로써 현재 layout에 대한 수평 정렬을 제어 합니다. 스스로는 아무 속성이 없지만 클래스로 하여금 자식 '#container'가 '좌/우'로 정렬 될 수 있도록 제어합니다. 사용하지 않으면 가운데로 정렬 됩니다.
#container '#xe' 요소의 첫 번째 자손으로써 '#header, #body, #footer'를 자식으로 두며 현재 레이아웃의 너비와 성질(고정폭, 가변폭)에 대한 속성을 지니고 있습니다.
.c '#content'를 의미하며 '#content' 영역을 하나의 컬럼으로 배치 합니다. '.c' 클래스가 사용된 경우 '.extension' 요소들은 컬럼이 되지 못하고 아래쪽에 흐릅니다.
.ce | .ec 2컬럼 레이아웃 요소들의 수평 배치 순서를 결정하는 클래스 입니다. 각각 'c=#content, e=.extension'을 의미합니다.
.cee | .ece | .eec 3컬럼 레이아웃 요소들의 수평 배치 순서를 결정하는 클래스 입니다. 각각 'c=#content, e=.extension'을 의미합니다.
#header 현재 페이지의 '가장 큰 제목h1'이 들어가며 보통은 웹 사이트의 제목이 출력되고 상단에 배치 됩니다.
#body 현재 페이지의 본문인 '#content'와 네비게이션 또는 확장 요소인 '.extension'을 자손으로 두고 있습니다.
#footer '저작자 정보address' 또는 웹 사이트 이용안내등 부가 콘텐츠가 포함 되며 보통 하단에 배치 됩니다.
#content '본문'으로써 다양한 형태의 정보들이 포함되며 '.section' 요소를 자손으로 지닐 수 있습니다.
.extension 현재 사이트를 탐색하기 위한 '네비게이션' 또는 '확장' 으로써 '.section' 요소를 자손으로 지닐 수 있습니다.
.e1 | .e2 '#body'의 자손인 '.extension' 클래스와 동일한 요소에 적용되어 있는 클래스로써 두 개의 '.extension'이 각자 다른 배치를 가질 수 있도록 식별하는 역할을 합니다.
.section 내용을 더욱 의미있는 단위로 작게 구분할 필요가 있을 때 어느 곳에서든 사용합니다. 하나인 경우 생략할 수 있고 두 덩어리 이상을 구분할 필요가 있을 때 반드시 사용 합니다.

더욱 다양한 형태의 레이아웃이 존재하지만 상기 제시된 소스코드의 원리를 이해하고 응용하게 되면 대부분의 레이아웃 형태를 구현할 수 있습니다. 더욱 많은 레이아웃 예제가 Layout Gala, Little Boxes 에도 존재합니다. 한편 Layout Gala, Little Boxes 방식은 콘텐츠 영역 또는 측면 네비게이션 영역이 자신의 높이값을 부모 엘리먼트에게 전달하지 못하는 단점이 있습니다.