grid

컨텐츠영역을 분할하는 최상위 클래스로써 column으로 영역을 구분합니다. grid와 column은 항상 함께 사용되어야 하며,
column이 두개 이상일때 첫 column과 마지막 column에는 column-first와 column-last 클래스가 사용되어야 합니다.

grid-1

코드

<div class="grid-1"> 
    <div class="column-1">
        컨텐츠
    </div>  
</div>

결과화면

컨텐츠
  • grid-1
  • column-1

    • grid-2

    코드

    <div class="grid-2"> 
    <div class="column-1 column-first">
        컨텐츠
    </div>
    <div class="column-1 column-last">
        컨텐츠
    </div>
</div>

    결과화면

    컨텐츠
    컨텐츠
  • grid-2
  • column-1

    • 코드

    <div class="grid-2"> 
    <div class="column-2">
        컨텐츠
    </div>
</div>

    결과화면

    컨텐츠
  • grid-2
  • column-2

    • grid-3

    코드

    <div class="grid-3"> 
    <div class="column-1 column-first">
        컨텐츠
    </div>
    <div class="column-1">
        컨텐츠
    </div>
    <div class="column-1 column-last">
        컨텐츠
    </div>
</div>

    결과화면

    컨텐츠
    컨텐츠
    컨텐츠
  • grid-3
  • column-1

    • 코드

    <div class="grid-3"> 
    <div class="column-2 column-first">
        컨텐츠
    </div>
    <div class="column-1 column-last">
        컨텐츠
    </div>
</div>

    결과화면

    컨텐츠
    컨텐츠
  • grid-3
  • column-2
  • column-1

    • 코드

    <div class="grid-3"> 
    <div class="column-1 column-first">
        컨텐츠
    </div>
    <div class="column-2 column-last">
        컨텐츠
    </div>
</div>

    결과화면

    컨텐츠
    컨텐츠
  • grid-3
  • column-1
  • column-2

    • 코드

    <div class="grid-3"> 
    <div class="column-3">
        컨텐츠
    </div>
</div>

    결과화면

    컨텐츠
  • grid-3
  • column-3

    • grid-4

    코드

    <div class="grid-4"> 
    <div class="column-1 column-first">
        컨텐츠
    </div>
    <div class="column-1">
        컨텐츠
    </div>
    <div class="column-1">
        컨텐츠
    </div>
    <div class="column-1 column-last">
        컨텐츠
    </div>
</div>

    결과화면

  • grid-4
  • column-1

    • 코드

    <div class="grid-4"> 
    <div class="column-2 column-first">
        컨텐츠
    </div>
    <div class="column-1">
        컨텐츠
    </div>
    <div class="column-1 column-last">
        컨텐츠
    </div>
</div>

    결과화면

  • grid-4
  • column-2
  • column-1

    • 코드

    <div class="grid-4"> 
    <div class="column-1 column-first">
        컨텐츠
    </div>
    <div class="column-2">
        컨텐츠
    </div>
    <div class="column-1 column-last">
        컨텐츠
    </div>
</div>

    결과화면

  • grid-4
  • column-1
  • column-2

    • 코드

    <div class="grid-4"> 
    <div class="column-1 column-first">
        컨텐츠
    </div>
    <div class="column-1">
        컨텐츠
    </div>
    <div class="column-2 column-last">
        컨텐츠
    </div>
</div>

    결과화면

  • grid-4
  • column-1
  • column-2

    • 코드

    <div class="grid-4"> 
    <div class="column-2 column-first">
        컨텐츠
    </div>
    <div class="column-2 column-last">
        컨텐츠
    </div>
</div>

    결과화면

  • grid-4
  • column-2

    • 코드

    <div class="grid-4"> 
    <div class="column-3 column-first">
        컨텐츠
    </div>
    <div class="column-1 column-last">
        컨텐츠
    </div>
</div>

    결과화면

  • grid-4
  • column-3
  • column-1

    • 코드

    <div class="grid-4"> 
    <div class="column-1 column-first">
        컨텐츠
    </div>
    <div class="column-3 column-last">
        컨텐츠
    </div>
</div>

    결과화면

  • grid-4
  • column-1
  • column-3

    • 코드

    <div class="grid-4"> 
    <div class="column-4">
        컨텐츠
    </div>
</div>

    결과화면

  • grid-4
  • column-4

    • grid-5

    코드

    <div class="grid-5"> 
    <div class="column-1 column-first">
        컨텐츠
    </div>
    <div class="column-1">
        컨텐츠
    </div>
    <div class="column-1">
        컨텐츠
    </div>
    <div class="column-1">
        컨텐츠
    </div>
    <div class="column-1 column-last">
        컨텐츠
    </div>
</div>

    결과화면

  • grid-5
  • column-1

    • 코드

    <div class="grid-5"> 
    <div class="column-2 column-first">
        컨텐츠
    </div>
    <div class="column-1">
        컨텐츠
    </div>
    <div class="column-1">
        컨텐츠
    </div>
    <div class="column-1 column-last">
        컨텐츠
    </div>
</div>

    결과화면

  • grid-5
  • column-2
  • column-1

    • 코드

    <div class="grid-5"> 
    <div class="column-1 column-first">
        컨텐츠
    </div>
    <div class="column-2">
        컨텐츠
    </div>
    <div class="column-1">
        컨텐츠
    </div>
    <div class="column-1 column-last">
        컨텐츠
    </div>
</div>

    결과화면

  • grid-5
  • column-1
  • column-2

    • 코드

    <div class="grid-5"> 
    <div class="column-1 column-first">
        컨텐츠
    </div>
    <div class="column-1">
        컨텐츠
    </div>
    <div class="column-2">
        컨텐츠
    </div>
    <div class="column-1 column-last">
        컨텐츠
    </div>
</div>

    결과화면

  • grid-5
  • column-1
  • column-2

    • 코드

    <div class="grid-5"> 
    <div class="column-1 column-first">
        컨텐츠
    </div>
    <div class="column-1">
        컨텐츠
    </div>
    <div class="column-1">
        컨텐츠
    </div>
    <div class="column-2 column-last">
        컨텐츠
    </div>
</div>

    결과화면

  • grid-5
  • column-1
  • column-2

    • 코드

    <div class="grid-5"> 
    <div class="column-2 column-first">
        컨텐츠
    </div>
    <div class="column-1">
        컨텐츠
    </div>
    <div class="column-2 column-last">
        컨텐츠
    </div>
</div>

    결과화면

  • grid-5
  • column-2
  • column-1

    • 코드

    <div class="grid-5"> 
    <div class="column-2 column-first">
        컨텐츠
    </div>
    <div class="column-2 column-last">
        컨텐츠
    </div>
    <div class="column-1 column-last">
        컨텐츠
    </div>
</div>

    결과화면

  • grid-5
  • column-2
  • column-1

    • 코드

    <div class="grid-5"> 
    <div class="column-1 column-first">
        컨텐츠
    </div>
    <div class="column-2">
        컨텐츠
    </div>
    <div class="column-2 column-last">
        컨텐츠
    </div>
</div>

    결과화면

  • grid-5
  • column-1
  • column-2

    • 코드

    <div class="grid-5"> 
    <div class="column-3 column-first">
        컨텐츠
    </div>
    <div class="column-1">
        컨텐츠
    </div>
    <div class="column-1 column-last">
        컨텐츠
    </div>
</div>

    결과화면

  • grid-5
  • column-1
  • column-3

    • 코드

    <div class="grid-5"> 
    <div class="column-1 column-first">
        컨텐츠
    </div>
    <div class="column-3">
        컨텐츠
    </div>
    <div class="column-1 column-last">
        컨텐츠
    </div>
</div>

    결과화면

  • grid-5
  • column-1
  • column-3

    • 코드

    <div class="grid-5"> 
    <div class="column-1 column-first">
        컨텐츠
    </div>
    <div class="column-1">
        컨텐츠
    </div>
    <div class="column-3 column-last">
        컨텐츠
    </div>
</div>

    결과화면

  • grid-5
  • column-1
  • column-3

    • 코드

    <div class="grid-5"> 
    <div class="column-3 column-first">
        컨텐츠
    </div>
    <div class="column-2 column-last">
        컨텐츠
    </div>
</div>

    결과화면

  • grid-5
  • column-3
  • column-2

    • 코드

    <div class="grid-5"> 
    <div class="column-2 column-first">
        컨텐츠
    </div>
    <div class="column-3 column-last">
        컨텐츠
    </div>
</div>

    결과화면

  • grid-5
  • column-2
  • column-3

    • 코드

    <div class="grid-5"> 
    <div class="column-4 column-first">
        컨텐츠
    </div>
    <div class="column-1 column-last">
        컨텐츠
    </div>
</div>

    결과화면

  • grid-5
  • column-4
  • column-1

    • 코드

    <div class="grid-5"> 
    <div class="column-1 column-first">
        컨텐츠
    </div>
    <div class="column-4 column-last">
        컨텐츠
    </div>
</div>

    결과화면

  • grid-5
  • column-1
  • column-4

    • 코드

    <div class="grid-5"> 
    <div class="column-5">
        컨텐츠
    </div>
</div>

    결과화면

  • grid-5
  • column-5

    • 응용

    코드

    <div class="grid-2"> 
    <div class="column-1 column-first">
        <ul class="float2N-2>
            <li>1</li>
            <li>2</li>
        </ul>
    </div>
    <div class="column-1 column-last">
        <ul class="float2N-2>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</div>

    결과화면

    • 1
    • 2
    • 3
    • 4
  • grid-2
  • column-1 column-first
  • column-1 column-last

    • float2N-1

    예제소스

    float2N-1를 활용한 예제 

    
<ul class="float2N-1">
    <li>
        컨텐츠
    </li>
</ul>

    float2N-2

    예제소스

    float2N-2를 활용한 예제 

    
<ul class="float2N-2">
    <li>컨텐츠</li>
    <li>컨텐츠</li>
</ul>

    float2N-3

    예제소스

    float2N-3를 활용한 예제 

    
<ul class="float2N-3">
    <li>컨텐츠</li>
    <li>컨텐츠</li>
    <li>컨텐츠</li>
</ul>

    float2N-4

    예제소스

    float2N-4를 활용한 예제 

    
<ul class="float2N-4">
    <li>컨텐츠</li>
    <li>컨텐츠</li>
    <li>컨텐츠</li>
    <li>컨텐츠</li>
</ul>

    float2N-5

    예제소스

    float2N-5를 활용한 예제 

    
<ul class="float2N-5">
    <li>컨텐츠</li>
    <li>컨텐츠</li>
    <li>컨텐츠</li>
    <li>컨텐츠</li>
    <li>컨텐츠</li>
</ul>

    float2N-6

    예제소스

    float2N-6를 활용한 예제 

    
<ul class="float2N-6">
    <li>컨텐츠</li>
    <li>컨텐츠</li>
    <li>컨텐츠</li>
    <li>컨텐츠</li>
    <li>컨텐츠</li>
    <li>컨텐츠</li>
</ul>

    spacing-1

    예제소스

    spacing-1을 활용한 예제 

    
<ul class="float2N-3 e-float2N-1 spacing-1">
    <li>
        <div class="padding-height-1">
            <h3 class="margin-bottom-1 text-align-center">제목(H3)을 입력해주세요.</h3>
            <p class="justify margin-bottom-1">이 글은 실제적인 문장 내용이 채워지기 전에 시각적 연출을 위해 미리 채워놓은 글로써, 사용자는 이글을 자신이 필요한 내용으로 변경하여 사용하시면 됩니다.</p>	
            <p class="text-align-center margin-bottom-1"><a class="button">자세히보기</a></p>
        </div>
    </li>

    <li>
        <div class="padding-height-1">
            <h3 class="margin-bottom-1 text-align-center">제목(H3)을 입력해주세요.</h3>
            <p class="justify margin-bottom-1">이 글은 실제적인 문장 내용이 채워지기 전에 시각적 연출을 위해 미리 채워놓은 글로써, 사용자는 이글을 자신이 필요한 내용으로 변경하여 사용하시면 됩니다.</p>	
            <p class="text-align-center margin-bottom-1"><a class="button">자세히보기</a></p>
        </div>
    </li>

    <li>
        <div class="padding-height-1">
            <h3 class="margin-bottom-1 text-align-center">제목(H3)을 입력해주세요.</h3>
            <p class="justify margin-bottom-1">이 글은 실제적인 문장 내용이 채워지기 전에 시각적 연출을 위해 미리 채워놓은 글로써, 사용자는 이글을 자신이 필요한 내용으로 변경하여 사용하시면 됩니다.</p>	
            <p class="text-align-center margin-bottom-1"><a class="button">자세히보기</a></p>
        </div>
    </li>
</ul>
    결과화면

    응용

    예제소스

    grid를 활용한 예제

    
<div class="grid-2">
    <div class="column-1 column-first">
        <ul class="float2N-2 e-float2N-1 spacing-1">
            <li>
                <div>
                    <h3 class="text-align-center">제목(H3)을 입력해주세요.</h3>
                    <div class="text-align-center">
                        <span class="fullimg m9-img-box"><img src="http://staff03.mong9.com/editor/imgs/example/example011.jpg" alt=""></span>
                    </div>
                    <p class="justify margin-bottom-2">이 글은 실제적인 문장 내용이 채워지기 전에 시각적 연출을 위해 미리 채워놓은 글로써, 사용자는 이글을 자신이 필요한 내용으로 변경하여 사용하시면 됩니다.</p>
                    <p class="margin-top-1 text-align-center"><a class="button round icon">자세히보기 <i class="axi axi-angle-right"></i></a></p>
                </div>
            </li>
            <li>
                <div>
                    <h3 class="text-align-center">제목(H3)을 입력해주세요.</h3>
                    <div class="text-align-center">
                        <span class="fullimg m9-img-box"><img src="http://staff03.mong9.com/editor/imgs/example/example012.jpg" alt=""></span>
                    </div>
                    <p class="justify margin-bottom-2">이 글은 실제적인 문장 내용이 채워지기 전에 시각적 연출을 위해 미리 채워놓은 글로써, 사용자는 이글을 자신이 필요한 내용으로 변경하여 사용하시면 됩니다.</p>
                    <p class="margin-top-1 text-align-center"><a class="button round icon">자세히보기 <i class="axi axi-angle-right"></i></a></p>
                </div>
            </li>
        </ul>
    </div>
    <div class="column-1 column-last">
        <ul class="float2N-2 e-float2N-1 spacing-1">
            <li>
                <div class="padding-height-1">
                    <h3 class="text-align-center">제목(H3)을 입력해주세요.</h3>
                    <div class="text-align-center">
                        <span class="fullimg m9-img-box"><img src="http://staff03.mong9.com/editor/imgs/example/example011.jpg" alt=""></span>
                    </div>
                    <p class="justify margin-bottom-2">이 글은 실제적인 문장 내용이 채워지기 전에 시각적 연출을 위해 미리 채워놓은 글로써, 사용자는 이글을 자신이 필요한 내용으로 변경하여 사용하시면 됩니다.</p>
                    <p class="margin-top-1 text-align-center"><a class="button round icon">자세히보기 <i class="axi axi-angle-right"></i></a></p>
                </div>
            </li>
            <li>
                <div class="padding-height-1">
                    <h3 class="text-align-center">제목(H3)을 입력해주세요.</h3>
                    <div class="text-align-center">
                        <span class="fullimg m9-img-box"><img src="http://staff03.mong9.com/editor/imgs/example/example012.jpg" alt=""></span>
                    </div>
                    <p class="justify margin-bottom-2">이 글은 실제적인 문장 내용이 채워지기 전에 시각적 연출을 위해 미리 채워놓은 글로써, 사용자는 이글을 자신이 필요한 내용으로 변경하여 사용하시면 됩니다.</p>
                    <p class="margin-top-1 text-align-center"><a class="button round icon">자세히보기 <i class="axi axi-angle-right"></i></a></p>
                </div>
            </li>
        </ul>
    </div>
</div>