Layout Template : UI Grid Layout

행 Layout

UI Layout grid 사용법
  • UI Layout Grid 는 총 12개 columns로 나뉘어 있습니다.
  • 모바일이 기준으로 되어 있고 반응형을 사용할 경우에는 각 대상 Screen 사이즈별 class를 적용해줍니다.
  • 반응형이 아닌 경우 'Grid-wrapper' class를 적용해서 기준점을 제시합니다.
  • 반응형을 적용할 경우에는 'Grid-container' class를 적용해서 기준점을 제시합니다.
  • 'Grid-wrapper'와 'Grid-container'는 UI Layout을 시작하는 가장 최상위 block tag 에 단 한번만 적용합니다. 보통 div tag에 적용됩니다.
    										
    										<body>
    										    <div class="Grid-wrapper">
    										......
    										    </div>
    										</body>
    										
    									
  • 반응형은 Desktop(lg) , Tablet(md) , Mobile(sm) 3가지로 구성되어 있고 각 디바이스에 맞는 컬럼 수에 따라 markup 해줍니다.
주요 class name
  • class name : Grid-sm-{column-number}
  • UI Layout Grid를 사용한 경우에는 block 사이의 간격이 없으므로 간격을 원할 경우 Helper css를 사용하여 간격 조정을 해줍니다.
    										
    											예) <div class="Grid-sm-12 Margin-top-20"></div>
    										
    									
2열 레이아웃

2행 첫번째

2행 두번째

						
							<!--한 section에서 나누어진 두문단으로 써야 하면 <div> tag로 block을 하나 만들어 주고 custom 해주세요.-->
							<div class="Grid-sm-12">
							    <p>2행 첫번째</p> <!--컨텐츠 영역-->
							</div>
							<div class="Grid-sm-12">
							    <p>2행 두번째</p> <!--컨텐츠 영역-->
							</div>
						
					
3행 레이아웃

3행 첫번째

3행 두번째

3행 세번째

						
							<div class="Grid-sm-12">
							    <p>3행 첫번째</p>
							</div>
							<div class="Grid-sm-12">
							    <p>3행 두번째</p>
							</div>
							<div class="Grid-sm-12">
							    <p>3행 세번째</p>
							</div>
						
					

열 Layout

열 Layout Grid 사용법
  • columns의 수는 필요한 영역 수 만큼 사용하고, 영역 columns 수를 합했을때 전체 column수인 12를 넘지 않아야 합니다.
  • columns과 columns 사이의 간격은 columns 내에서 Helper css를 사용해서 각 object에 적용합니다.
    										
    											예 ) <div class="Grid-sm-4"><p>내용</p></div>
    										
    									
  • 단 내부에 아래 샘플과 같이 간격의 크기가 column 으로 정의할 수 있다면 columns 수로 정의하여 줍니다.
2행 레이아웃

1행 1열
(Grid-sm-6)

1행 2열
(Grid-sm-6)

						
							<!--12개의 columns을 6개씩 가로로 나눈 Layout-->
							<div class="Grid-sm-12">
							    <div class="Grid-sm-6">
							        <p>1행 1열</p>
							    </div>
							    <div class="Grid-sm-6">
							        <p>1행 2열</p>
							    </div>
							</div>
						
					

1행 1열
(Grid-sm-5)

column 1/6의 간격
(Grid-sm-2)

1행 2열
(Grid-sm-5)

						
							<!--12개의 column을 왼쪽 오른쪽 5columns의 영역을 가지고 가운데 간격을 2columns로 설정했습니다.-->
							<!--contents 전체를 감쌀 전체 컨텐츠를 정의합니다. 해당 컨테츠를 기준으로 내부 section을 나누어 줍니다.-->
							<!--반드시 전체 컬럼수가 12일 필요는 없습니다. 만약 7을 전체 컬럼 수로 지정해주면 2개의 영역과 1개의 간격으로 나누면 3/1/3 으로 나누면 됩니다.
							    내용에 따라 설정해주세요.-->
							<div class="Grid-sm-12">
							    <div class="Grid-sm-5">
							        <p>1행 1열</p>
							    </div>
							    <div class="Grid-sm-2">
							        <p>column 1/6의 간격</p>
							    </div>
							    <div class="Grid-sm-5">
							        <p>1행 2열</p>
							    </div>
							</div>
						
					
3열 / 4열 레이아웃

1행 1열
(Grid-sm-4)

1행 2열
(Grid-sm-4)

1행 3열
(Grid-sm-4)

						
							<div class="Grid-sm-12">
							    <div class="Grid-sm-4">
							        <p>1행 1열</p>
							    </div>
							    <div class="Grid-sm-4">
							        <p>1행 2열</p>
							    </div>
							    <div class="Grid-sm-4">
							        <p>1행 3열</p>
							    </div>
							</div>
						
					

1행 1열
(Grid-sm-3)

1행 2열
(Grid-sm-3)

1행 3열
(Grid-sm-3)

1행 4열
(Grid-sm-3)

						
							<!--12개는 1개로도 나뉠수 있고 12개 내에서는 원하는 section 만큼 나누어서 사용할 수 있습니다.-->
							<div class="Grid-sm-12">
							    <div class="Grid-sm-3">
							        <p>1행 1열</p>
							    </div>
							    <div class="Grid-sm-3">
							        <p>1행 2열</p>
							    </div>
							    <div class="Grid-sm-3">
							        <p>1행 3열</p>
							    </div>
							    <div class="Grid-sm-3">
							        <p>1행 4열</p>
							    </div>
							</div>
						
					
SK Holdings C&C

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