기본 규칙

몽9 에디터는 빠르고 간편한 작업을 위해 최대한 stylesheet를 수정하는 것을 지양합니다. 대신 자주 사용하는 css 속성을 클래스로 지정해두었습니다. css 를 알고 있다면 몽9 에디터 클래스의 규칙은 매우 간단합니다. 또한 반응형 처리를 위해 media query을 사용하지 않고 몽9 에디터만의 간현한 반응형 처리 방식을 소개합니다.

클래스 표현 방법

css 고유 속성과 값을 가졌다면 클래스를 만들 수 있습니다.
누구나 사용을해도 클래스 체계에 오류가 나지 않을 vertical-align-top, display-table 등 속성과 값이 명확한 경우만 사용합니다.
그러나 사람이 임의로 입력하는 값이 있는 속성의 경우는 클래스로 만들 수 없습니다.
예를 들어 color:#eee 를 color-gray로 사용한다거나 font-size:14em을 font-size-14 등으로 정의하면 안됩니다.
만약 원한다면 사용자 정의클래스로 정해주어야 타에디터의 충돌을 방지할 수 있습니다.
다만 몽9 에디터는 사용자 편의를 위해 미리 지정해두 속성이 있습니다. 이 고유 클래스들은 접두사 m9- 를 붙여서 사용하며
예를 들어 font-size:1.16em을 m9-f-large로 표현하고 있습니다.

예시1) font-weight:900을 클래스로 표현한다면 font-weight-900
예시2) line-height:140을 클래스로 표현한다면 line-height-140
예시3) float:left 을 클래스로 표현한다면 float-left

반응형 처리 방법

반응형 처리를 위해 media query을 사용하지 않고 몽9 에디터만의 간편한 반응형 처리 방식을 소개합니다. 몽9 에디터는 편한 반응형 처리를 위해 사전에 미리 클래스를 정해두었습니다. 반응형 처리를 위해서 모바일 환경에 따라 몽9 에디터는 모든 클래스앞에 접두사 m- 또는 e-를 붙이면 반응형 처리가 가능합니다.

모바일 가로 (768px 이하) 반응형 설정

모든 클래스앞에 접두사 m- 를 붙이면 반응형 처리가 가능합니다.

모바일 세로 (576px 이하)반응형 설정

모든 클래스앞에 접두사 e- 를 붙이면 반응형 처리가 가능합니다.

예시) PC에서는 position:absolute, 모바일 가로에서는 position:relative, 모바일 세로에서는 position:static 으로 변경하고 싶다면 position-absolute m-position-relative e-position-static로 표현 할 수 있습니다.

활용예시

position

PC-Class

.position-relative
.position-absolute
.position-static
.position-fixed
.relative
.absolute
.static
.fixed

CSS 코드

/* positon */
.position-absolute,.absolute{position:absolute}
.position-relative,.relative{position:relative}
.position-static,.static{position:static}
.position-fixed,.fixed{position:fixed}

모바일 가로 보기 - Class

.m-position-relative
.m-position-absolute
.m-position-static
.m-position-fixed
.m-relative
.m-absolute
.m-static
.m-fixed

CSS 코드

/* m-position */
@media screen and (max-width:683px){
.m-absolute{position:absolute !important}
.m-relative{position:relative !important}
.m-static{position:static !important}
.m-fixed{position:fixed !important}
}

모바일 세로 보기 - Class

.e-position-relative
.e-position-absolute
.e-position-static
.e-position-fixed
.e-relative
.e-absolute
.e-static
.e-fixed

CSS 코드

/* m-position */
@media screen and (max-width:683px){
.e-absolute{position:absolute !important}
.e-relative{position:relative !important}
.e-static{position:static !important}
.e-fixed{position:fixed !important}
}

display

PC-Class

.display-block
.display-inline-block
.display-inline
.display-none
.block
.inline-block
.inline
.none

CSS 코드

/* display */
.display-block,.block{display:block}
.display-inline-block{display:inline-block;*display:inline;*zoom:1}
.inline-block{display:inline-block;*display:inline;*zoom:1}
.display-inline,.inline{display:inline}
.display-none,.none {display:none !important}

모바일 가로 보기 - Class

.m-display-block
.m-display-inline-block
.m-display-inline
.m-display-none
.m-block
.m-inline-block
.m-inline
.m-none

CSS 코드

/* m-display */
@media screen and (max-width:683px){
.m-display-block,.m-block{display:block !important}
.m-display-inline-block{display:inline-block;*display:inline;*zoom:1}
.m-inline-block{display:inline-block;*display:inline;*zoom:1}
.m-display-inline,.m-inline{display:inline}
.m-display-none,.m-none{display:none !important}
}

모바일 세로 보기 - Class

.e-display-block
.e-display-inline-block
.e-display-inline
.e-display-none
.e-block
.e-inline-block
.e-inline
.e-none

CSS 코드

/* e-display */
@media screen and (max-width:439px){
.e-display-block,.e-block{display:block !important}
.e-display-inline-block{display:inline-block;*display:inline;*zoom:1}
.e-inline-block{display:inline-block;*display:inline;*zoom:1}
.e-display-inline,.e-inline{display:inline}
.e-display-none,.e-none{display:none !important}
}

display-table

PC-Class

.display-table
.display-table-row
.display-table-cell
.table
.table-row
.table-cell

CSS 코드

/* display-table */
.display-table,.table{display:table;width:100%}
.display-table-row,.table-row{display:table-row}
.display-table-cell,.table-cell{display:table-cell}

모바일 가로 보기 - Class

.m-display-table
.m-display-table-row
.m-display-table-cell
.m-table
.m-table-row
.m-table-cell

CSS 코드

/* m-display-table */
@media screen and (max-width:683px){
.m-display-table,.m-table{display:table;width:100%}
.m-display-table-row,.m-table-row{display:table-row}
.m-display-table-cell,.m-table-cell{display:table-cell}
}

모바일 세로 보기 - Class

.m-display-table
.m-display-table-row
.m-display-table-cell
.m-table
.m-table-row
.m-table-cell

CSS 코드

/* e-display-table */
@media screen and (max-width:439px){
.e-display-table,.e-table{display:table;width:100%}
.e-display-table-row,.e-table-row{display:table-row}
.e-display-table-cell,.e-table-cell{display:table-cell}
}

flaot

PC-Class

.float-left
.float-right
.float-none

CSS 코드

/* float */
.float-left{float:left}
.float-right{float:right}
.float-none{float:none;clear:both}

모바일 가로 보기 - Class

.m-float-left
.m-float-right
.m-float-none

CSS 코드

/* m-float */
@media screen and (max-width:683px){
.m-float-left{float:left}
.m-float-right{float:right}
.m-float-none{float:none;clear:both}
}

모바일 세로 보기 - Class

.e-float-left
.e-float-right
.e-float-none

CSS 코드

/* e-float */
@media screen and (max-width:439px){
.e-float-left{float:left}
.e-float-right{float:right}
.e-float-none{float:none;clear:both}
}

vertical-align

PC-Class

.vertical-align-top
.vertical-align-middle
.vertical-align-bottom
.top
.middle
.bottom

CSS 코드

/* vertical-align */
.vertical-align-top,.top{vertical-align:top !important}
.vertical-align-middle,.middle{vertical-align:middle !important}
.vertical-align-bottom,.bottom{vertical-align:bottom !important}

모바일 가로 보기 - Class

.m-vertical-align-top
.m-vertical-align-middle
.m-vertical-align-bottom
.m-top
.m-middle
.m-bottom

CSS 코드

/* m-vertical-align */
@media screen and (max-width:683px){
.m-vertical-align-top,.m-top{vertical-align:top !important}
.m-vertical-align-middle,.m-middle{vertical-align:middle !important}
.m-vertical-align-bottom,.m-bottom{vertical-align:bottom !important}
}

모바일 세로 보기 - Class

.e-vertical-align-top
.e-vertical-align-middle
.e-vertical-align-bottom
.e-top
.e-middle
.e-bottom

CSS 코드

/* e-vertical-align */
@media screen and (max-width:439px){
.e-vertical-align-top,.e-top{vertical-align:top !important}
.e-vertical-align-middle,.e-middle{vertical-align:middle !important}
.e-vertical-align-bottom,.e-bottom{vertical-align:bottom !important}
}

overflow

PC-Class

.visibility-hidden
.overflow-hidden

CSS 코드

/* overflow */
.visibility-hidden{visibility:hidden}
.overflow-hidden{overflow:hidden}

모바일 가로 보기 - Class

.m-visibility-hidden
.m-overflow-hidden

CSS 코드

/* m-overflow */
@media screen and (max-width:683px){
.m-visibility-hidden{visibility:hidden}
.m-overflow-hidden{overflow:hidden}
}

모바일 세로 보기 - Class

.m-visibility-hidden
.m-overflow-hidden

CSS 코드

/* e-overflow */
@media screen and (max-width:439px){
.e-visibility-hidden{visibility:hidden}
.e-overflow-hidden{overflow:hidden}
.e-overflow-not{overflow:initial !important}
}

clear

PC-Class

.clear-both
.after-clear-both
.clear
.after-clear

CSS 코드

/* clear */
.clear-both,.clear{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden}
.after-clear:after,.after-clear-both:after{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden}

모바일 가로 보기 - Class

.clear-both
.after-clear-both
.clear
.after-clear

CSS 코드

/* m-clear */
@media screen and (max-width:683px){
.m-clear-both{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden}
.m-clear{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden}
.m-after-clear:after{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden}
.m-after-clear-both:after{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden}
}

모바일 세로 보기 - Class

.clear-both
.after-clear-both
.clear
.after-clear

CSS 코드

/* e-clear */
@media screen and (max-width:439px){
.e-clear-both,.e-clear{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden}
.e-after-clear:after,.e-after-clear-both:after{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden}
}