Layout Template : Static Contents

일반 컨텐츠 UI Layout Grid 적용법

일반 컨텐츠도 Layout 적용시와 동일하게 적용합니다.
  • UI Layout Grid 사용전 Markup이 block 요소이면 'Grid-sm-12'로 전체를 감싸지 않아도 됩니다. 기본적으로 float: left 가 적용되어 있습니다.
    (여기서는 없다고 가정하고 예제를 적용하기로 합니다.)
  • Nesting 될 요소가 복잡하다면 'Grid-sm-12'로 Nesting 부모요소를 정의 해줍니다.
1열 2행 레이아웃

This will provide some detailed information about the thumbnail board type. On Arbor Day every year, the executives and employees of SK holdings C&C and its subsidiaries plant seedlings in the ecologica...

On Arbor Day every year, the executives and employees of SK holdings C&C and its subsidiaries plant seedlings in the ecologica.This will provide some detailed information about the thumbnail board type.

						
							<!--'Grid-sm-12' 기본으로 선언합니다.-->
							<!--일렬로 정렬된 두 section으로 적용하기 위해 2/12 = 6칸으로 정의합니다.-->
							<div class="Grid-sm-12">
							    <div class="Grid-sm-6">
							        <p><img src="이미지링크"></p><!--contents 영역으로 custom 하게 markup 합니다.-->
							        <p>Text Contents</p>
							    </div>
							    <div class="Grid-sm-6">
							        <p><img src="이미지링크"></p>
							        <p>Text Contents</p>
							    </div>
							</div>
						
					
1열 3행 레이아웃
Forest Protection Activities

On Arbor Day every year, the executives and employees of SK holdings C&C and its subsidiaries plant seedlings in the ecologica

Clean Street Campaign with people

The members of organization engage in the Smoking Cessation Campaign near our office in Bundang and

Supporting Social Adaption

We conduct regular programs for children with physical and mental disabilities living in welfare welfare physical a

2단 2열을 사용할 경우 각내용에 따라 간격은 Helper class로 정의한다.
						
							<!--'Grid-sm-12' 기본으로 선언합니다.-->
							<!--일렬로 정렬된 3개 section으로 적용하기 위해 3/12 = 4칸으로 정의합니다.-->
							<div class="Grid-sm-12">
							    <div class="Grid-sm-4">
							        <!--contents 영역으로 custom 하게 markup 합니다.-->
							        <img src="이미지링크">
							        <h5>Contents title</h5> <!--header 요소를 사용하여 타이틀이 들어간 컨텐츠를 제작할 수도 있습니다. 링크를 넣고 싶은 경우 <a>를 사용하세요-->
							        <p>Text Contents</p>
							    </div>
							    <div class="Grid-sm-4">
							        <img src="이미지링크">
							        <h5>Contents title</h5>
							        <p>Text Contents</p>
							    </div>
							    <div class="Grid-sm-4">
							        <img src="이미지링크">
							        <h5>Contents title</h5>
							        <p>Text Contents</p>
							    </div>
							</div>
						
					
2열 2행 레이아웃 : contents 가 있는 경우
Clean Street Campaign with people

The members of organization engage in the Smoking Cessation Campaign near our office in Bundang and

Clean Street Campaign with people

The members of organization engage in the Smoking Cessation Campaign near our office in Bundang and

Clean Street Campaign with people

The members of organization engage in the Smoking Cessation Campaign near our office in Bundang and

Clean Street Campaign with people

The members of organization engage in the Smoking Cessation Campaign near our office in Bundang and

						
							<!-- contents를 일렬로 나열하되 배수로 떨어뜨릴 경우 UI Layout Grid는 기본적으로 float: left가 적용되어 있으므로
							     원하는 columns 수만큼 markup 하면 됩니다.-->
							<!-- 2줄씩 떨어뜨리고 싶으면 2/12 = 6칸 으로 <div class="Grid-sm-6"> 를 적용하고
							     3개씩 나열하고 싶으면 3/12 = 4칸 <div class="Grid-sm-4"> 로 markup 하세요.-->
							<div class="Grid-sm-6">
							    <img src="이미지링크" alt="">
							    <h5>contents title</h5>
							    <p>Text Contents</p>
							</div>
							<div class="Grid-sm-6">
							    <img src="이미지링크" alt="">
							    <h5>contents title</h5>
							    <p>Text Contents</p>
							</div>
							<div class="Grid-sm-6">
							    <img src="이미지링크" alt="">
							    <h5>contents title</h5>
							    <p>Text Contents</p>
							</div>
							<div class="Grid-sm-6">
							    <img src="이미지링크" alt="">
							    <h5>contents title</h5>
							    <p>Text Contents</p>
							</div>
						
					
이미지 연속 + Contents

The members of organization engage in the Smoking Cessation Campaign near our office in Bundang and members of organization engage in the Smoking Cessation Campaign near our office in Bun engage in the Smoking Cessation Campaign near our office in Bun engage in the Smoking Cessation Campaign near our office in Bun

SK Holdings C&C

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