Layout Template : Flexbox Layout

Flexbox Layout - Basic Layout (반응형 적용)

Basic Layout에서 사용한 주요 CSS
  • display: flex 를 지정하고 Flexbox-column을 사용하여 flex-directioncolumn으로 줍니다.
  • 사이트의 컨텐츠 영역은 주로 양옆으로 위치함으로 rowflex-direction을 다시 설정합니다. Alopex-ui의 css인 Flexbox-row를 다시 적용해도 됩니다.
    그러나 여기에서는 Flexbox-contents css에 해당 property가 적용되어 있습니다.
  • left 영역과 aside 영역은 각각 사용자가 원하는 대로 다시 설정 해주셔도 됩니다.
  • 다만 left 영역은 나열되어 있는 컨텐츠들 중 가장 왼족에 있음으로 order: -1 을 사용하여 가장 왼쪽에 놓아줍니다. Alopex-ui 에서는 따로 order를 제공하지는 않습니다. 이유는 디자인과 사용성에 따라 order를 원하는 대로 설정 할 수 있도록 하기 위함입니다.
header area
Contents area
footer area
						
							<!--header / 왼쪽메뉴 / contents / 오른쪽 기타 영역 / footer 는 홈페이지에서 사용하는 기본 레이아웃입니다.
								Alopex Flexbox 에서는 이 레이아웃이 적용 될 수 있도록 Flexbox-layout을 제공합니다.
							-->
							<div class="Flexbox Flexbox-column">
							    <header>Header</header>
							    <div class="Flexbox-contents">
							        <nav class="Flexbox-contents-nav">navigation area</nav>
							        <main class="Flexbox-contents-main">contents area</main>
							        <aside>banner, counsel... area</aside>
							    </div>
							    <footer>Footer</footer>
							</div>
						
					
SK Holdings C&C

26, Jong-ro, Jongno-gu, Seoul, 03188, Republic of Korea
Copyright © 2018 SK Holdings C&C. All rights reserved.