M9 Editor

개요

M9에디터에서 사용하는 블락요소를 정리한다.

M9 그리드

최종수정 20180820D

m9에서 사용하는 그리드의 개념을 파악한다면 자유자재로 커스터마이징이 가능해진다. 그리드모듈은 M9에디터의 기본요소이며 빠르고 쉽게 화면을 제작하도록 도움을 준다. 익스플로러 하위버전을 포함한 현존하는 모든 브라우저에서 동일한 화면을 보장한다.

grid와 column은 항상 함께 사용된다.
column은 grid안에서만 사용된다.
컬럼 넘버의 합은 그리드 넘버가 되야한다.
grid와 column 계산만 알면 된다.

기본 구조

grid와 column은 함께 사용된다.

grid에 붙는 숫자는 분할가능한 열의 숫자를 의미한다. (ex:grid-8 은 8열로 분할하겠다는 의미)

column에 붙는 숫자는 가로폭의 기준이다. 부모 그리드넘버가 해당 칼럼이 사용가능한 최대 숫자가 된다. (grid-4의 자식 column의 최대 넘버는 4가 된다.)

아래의 예시는 그리드 단계별로 column1만을 사용한 구조이다


<!-- gird-1 -->
<div class="grid-1">	
	<div class="column1">
        컨텐츠
	</div>
</div>

<!-- gird-2 -->
<div class="grid-2">	
	<div class="column1">
        컨텐츠
	</div>
    <div class="column1">
        컨텐츠
	</div>
</div>

<!-- gird-5 -->
<div class="grid-5">	
	<div class="column1">
        컨텐츠
	</div>
    <div class="column1">
        컨텐츠
	</div>
    <div class="column1">
        컨텐츠
	</div>
    <div class="column1">
        컨텐츠
	</div>
    <div class="column1">
        컨텐츠
	</div>
</div>

그리드 칼럼 CSS정의

최종수정 20180821D

M9그리드는 최대 8분할까지이고 100% 기준에서

그리드 CSS

레이아웃 칼럼 세트



.grid-1>.column1{width:100%;}

.grid-2>.column1{width:50%;*width:49.9%;}

.grid-3>.column1{width:33.333%;}
.grid-3>.column2{width:66.666%;}

.grid-4>.column1{width:25%;*width:24.99%;}
.grid-4>.column2{width:50%;*width:49.99%;}
.grid-4>.column3{width:75%;}

.grid-5>.column1{width:20%;*width:19.9%;;}
.grid-5>.column2{width:40%;}
.grid-5>.column3{width:60%;}
.grid-5>.column4{width:80%;}

.grid-6>.column1{width:16.666%;}
.grid-6>.column2{width:33.333%;}
.grid-6>.column3{width:49.999%;}
.grid-6>.column4{width:66.664%;}
.grid-6>.column5{width:83.33%;}

.grid-7>.column1{width:14.285%;}
.grid-7>.column2{width:28.571%;}
.grid-7>.column3{width:42.857%;}
.grid-7>.column4{width:57.142%;}
.grid-7>.column5{width:71.428%;}
.grid-7>.column6{width:85.714%;}

.grid-8>.column1{width:12.5%;}
.grid-8>.column2{width:25%;}
.grid-8>.column3{width:37.5%;}
.grid-8>.column4{width:50%;}
.grid-8>.column5{width:62.5%;}
.grid-8>.column6{width:75%;}
.grid-8>.column7{width:87.5%;}

그리드와 칼럼 개념

grid- 다음에 붙는 숫자는


<div class="grid-1">	
	<div class="column1">
	    <h2>제목(H2)을 입력해주세요.</h2>
	</div>
</div>

<div class="grid-1">
    <div class="column1">
        <div class="margin-bottom-1">
          	<img src="/images/example050.jpg" alt="" />
        </div>
    </div>
</div>

grid1

아래와 같이 grid-1에서는 column1만 사용할수 있기때문에 간단하다.


<div class="grid-1">	
	<div class="column1">
	    <h2>제목(H2)을 입력해주세요.</h2>
	</div>
</div>

<div class="grid-1">
    <div class="column1">
        <div class="margin-bottom-1">
          	<img src="/images/example050.jpg" alt="" />
        </div>
    </div>
</div>

grid2

grid-2에서는


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

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

예약어 정리

최종수정 20180817D

11


<!-- h1 -->
<div data-sumnail="http://link.mong9.com/editor/sumnail/block_t1.jpg" title="제목글1(H1)">
<div class="grid-1">	
	<div class="column1">
        <h1>제목(H1)을 입력해주세요.</h1>
	</div>
</div>
</div>

그리드

개요