본문 영역
그리드(grid)
그리드(
몽9 에디터에서
몽9 에디터의 그리드 시스템은 최대 6개까지 열(
6개 이상 만들려고 생각도 하지말것(경우의 수가 너무 커져, 소스가 너무 길어짐)
grid)는 통상 한줄(row)을 나누는 것을 의미합니다.몽9 에디터에서
grid는 행(row)을 의미, column은 열(col)을 의미하며, 항상 grid 안에 column이 위치해야합니다. 몽9 에디터의 그리드 시스템은 최대 6개까지 열(
col)을 제공합니다. 6개 이상 만들려고 생각도 하지말것(경우의 수가 너무 커져, 소스가 너무 길어짐)
소개
- 몽9 에디터에서 모든 블록의 기본 구조는
.m9-grid-block>.m9-grid-n>.m9-column-n구조로 사용됩니다. .m9-grid-n와.m9-column-n은 항상 함께 사용되어야 합니다.
예를 들어 열을 4개로 나눈다면.m9-grid-4로 사용할 수 있습니다. (아래에는 다양한 column의 경우의 수를 설명합니다)- column이 두개 이상일때 첫 번째 column 에는
m9-column-first가 필요하며 마지막 column에는m9-column-last클래스가
사용되어야 합니다. - 열의 간격은
.m9-spacing-n클래스로 조정할 수 있으며,.m9-grid-n에 삽입되어 0부터 2까지 조정 가능합니다.
.m9-spacing-0,.m9-spacing-1,.m9-spacing-2 - 그리드 구조를 임의로 수정할 시 블록이 깨질 수 있습니다.
- 에디터를 사용한다면 자동으로 그리드가 생성됩니다.
m9-grid-1
결과
m9-column-1
코드
m9-grid-2
결과
m9-column-1
m9-column-1
코드
결과
m9-column-2
코드
m9-grid-3
결과
m9-column-1
m9-column-1
m9-column-1
코드
결과
m9-column-2
m9-column-1
코드
결과
m9-column-1
m9-column-2
코드
m9-grid-4
결과
m9-column-1
m9-column-1
m9-column-1
m9-column-1
코드
결과
m9-column-2
m9-column-1
m9-column-1
코드
결과
m9-column-1
m9-column-2
m9-column-1
코드
결과
m9-column-1
m9-column-1
m9-column-2
코드
결과
m9-column-1
m9-column-3
코드
결과
m9-column-2
m9-column-2
코드
결과
m9-column-3
m9-column-1
코드
결과
m9-column-4
코드
m9-grid-5
결과
m9-column-1
m9-column-1
m9-column-1
m9-column-1
m9-column-1
코드
결과
m9-column-2
m9-column-1
m9-column-1
m9-column-1
코드
결과
m9-column-1
m9-column-2
m9-column-1
m9-column-1
코드
결과
m9-column-1
m9-column-1
m9-column-2
m9-column-1
코드
결과
m9-column-1
m9-column-1
m9-column-1
m9-column-2
코드
결과
m9-column-2
m9-column-2
m9-column-1
코드
결과
m9-column-2
m9-column-1
m9-column-2
코드
결과
m9-column-1
m9-column-2
m9-column-2
코드
결과
m9-column-3
m9-column-1
m9-column-1
코드
결과
m9-column-1
m9-column-3
m9-column-1
코드
결과
m9-column-1
m9-column-1
m9-column-3
코드
결과
m9-column-3
m9-column-2
코드
결과
m9-column-2
m9-column-3
코드
결과
m9-column-1
m9-column-4
코드
결과
m9-column-4
m9-column-1
코드
결과
m9-column-5
코드
m9-grid-6
결과
m9-column-1
m9-column-1
m9-column-1
m9-column-1
m9-column-1
m9-column-1
코드
결과
m9-column-2
m9-column-1
m9-column-1
m9-column-1
m9-column-1
코드
결과
m9-column-1
m9-column-2
m9-column-1
m9-column-1
m9-column-1
코드
결과
m9-column-1
m9-column-1
m9-column-2
m9-column-1
m9-column-1
코드
결과
m9-column-1
m9-column-1
m9-column-1
m9-column-2
m9-column-1
코드
결과
m9-column-1
m9-column-1
m9-column-1
m9-column-1
m9-column-2
코드
결과
m9-column-3
m9-column-1
m9-column-1
m9-column-1
코드
결과
m9-column-1
m9-column-3
m9-column-1
m9-column-1
코드
결과
m9-column-1
m9-column-1
m9-column-3
m9-column-1
코드
결과
m9-column-1
m9-column-1
m9-column-1
m9-column-3
코드
결과
m9-column-2
m9-column-2
m9-column-1
m9-column-1
코드
결과
m9-column-2
m9-column-1
m9-column-2
m9-column-1
코드
결과
m9-column-2
m9-column-1
m9-column-1
m9-column-2
코드
결과
m9-column-1
m9-column-1
m9-column-4
코드
결과
m9-column-1
m9-column-4
m9-column-1
코드
결과
m9-column-4
m9-column-1
m9-column-1
코드
결과
m9-column-2
m9-column-2
m9-column-2
코드
결과
m9-column-1
m9-column-2
m9-column-3
코드
결과
m9-column-1
m9-column-3
m9-column-2
코드
결과
m9-column-2
m9-column-1
m9-column-3
코드
결과
m9-column-2
m9-column-3
m9-column-1
코드
결과
m9-column-3
m9-column-1
m9-column-2
코드
결과
m9-column-3
m9-column-2
m9-column-1
코드
결과
m9-column-1
m9-column-1
m9-column-4
코드
결과
m9-column-1
m9-column-4
m9-column-1
코드
결과
m9-column-4
m9-column-1
m9-column-1
코드
결과
m9-column-5
m9-column-1
코드
결과
m9-column-1
m9-column-5
코드
결과
m9-column-2
m9-column-4
코드
결과
m9-column-4
m9-column-2
코드
결과
m9-column-3
m9-column-3
코드
결과
m9-column-6