mong9.css

시작하기

특징과 소개

소개

mong9Editor에는 사용자들이 간편하게 웹제작을 할 수 있도록 css가 정의되어 있습니다.
이렇게 정의된 css는 상상하는 모든 형태를 구현할 수 있게 해주고 모든 브라우저에서 동일한 화면을 보장하며, 안정감 있는 반응형을 지원합니다.
외울 필요가 없이 규칙만 알면 누구나 자유자재로 화면을 구성할 수 있게됩니다.

네이밍 규칙

모든 class는 아래와 같은 형태로 정의되어 있습니다.


/* mong9.css에 정의된 클래스 네이밍의 예 */
.text-align-left{text-align:left}
.display-block{display:block}
.vertical-align-top{vertical-align:top !important}
.float-left {float:left}
.margin-0 {margin:0}

  • 속성명 + 속성값 = class명

글꼴,정렬,테두리,넓이,높이,여백 등의 모든 속성이 위와 같은 형태의 네이밍으로 정의 되어 있습니다.
class가 어떤 속성을 가지고 있는지 어떤 상황에서 사용되는지등의 고민을 할 필요가 없습니다.

이 방식은 스타일시트 소스가 무분별하게 넘치는것을 방지하고 누가 보더라도 의미를 파악할 수 있게 하는 mong9에디터만의 차별화된 시스템으로써, 간단한 규칙만 파악한다면 수십가지의 조합을 사용해서 모든 형태를 구현할 수 있게 됩니다.

누구나 쉽게 응용이 가능합니다.
누구나 쉽게 해석이 가능합니다.

결과적으로 이 방식은 페이지의 소스코드를 단축시키고 제작과 유지보수에 소요되는 작업시간을 절약시켜 줍니다.

예외적인 규칙

속성값에 숫자가 들어갈 경우는 네이밍으로 사용하기 부적절하게 됩니다. 단위가 여러가지이고 그 값이 거의 무한대이기때문에 모든 값을 정의할 수 없기 때문입니다. 따라서 이런 유형의 클래스들은 미리 파악을 해 두는것이 좋습니다.


/* 클래스 네이밍 규칙의 예외적인 네이밍 예 */

/* 넓이,높이 */
.width-20{width:20% !important}
.width-25{width:25% !important}
.width-30{width:30% !important}
.width-33{width:33.333% !important}
.width-40{width:40% !important}
.width-50{width:50% !important}
.width-66{width:66.664% !important}
.width-75{width:75% !important}
.width-80{width:80% !important}
.width-100{width:100% !important}
.height-100{height:100% !important}
.width-auto{width:auto !important}
.height-auto{height:auto !important}
.min-height-auto{min-height:initial !important}

/* 높이 */
.height-10 {height:10px !important}
.height-20 {height:20px !important}
.height-30 {height:30px !important}
.height-40 {height:40px !important}
.height-50 {height:50px !important}
.height-60 {height:60px !important}
.height-70 {height:70px !important}
.height-80 {height:80px !important}
.height-90 {height:90px !important}
.height-100 {height:100px !important}
.height-200 {height:200px !important}

/* 투명도 */
.opacity-0{opacity:0;filter:alpha(opacity=0)}
.opacity-10{opacity:0.1;filter:alpha(opacity=10)}
.opacity-20{opacity:0.2;filter:alpha(opacity=20)}
.opacity-30{opacity:0.3;filter:alpha(opacity=30)}
.opacity-40{opacity:0.4;filter:alpha(opacity=40)}
.opacity-50{opacity:0.5;filter:alpha(opacity=50)}
.opacity-60{opacity:0.6;filter:alpha(opacity=60)}
.opacity-70{opacity:0.7;filter:alpha(opacity=70)}
.opacity-80{opacity:0.8;filter:alpha(opacity=80)}
.opacity-90{opacity:0.9;filter:alpha(opacity=90)}
.opacity-100{opacity:1;filter:alpha(opacity=100)}

/* 행간 */
.line-height-100{line-height:1}
.line-height-110{line-height:1.1}
.line-height-120{line-height:1.2}
.line-height-130{line-height:1.3}
.line-height-140{line-height:1.4}
.line-height-150{line-height:1.5}
.line-height-160{line-height:1.6}
.line-height-170{line-height:1.7}
.line-height-180{line-height:1.8}
.line-height-190{line-height:1.9}
.line-height-200{line-height:2}

  • 클래스 이름에 단위는 포함시키지 않습니다.

네이밍 단축사용

수많은 속성중에서 단독으로 사용되는 값은 그 자체로 네이밍으로 사용하기도 합니다. 예를 들어 position:absolute 의 경우, absolute라는 값은 position이라는 속성에서만 사용되는 값입니다. 이런경우 클래스명을 absolute로 사용합니다. 의미를 해석하는데 전혀 어려움이 없으며 사용하기도 간편합니다. 하지만 모든 경우에서 해당하는 규칙이 아니므로 이런 유형의 클래스들은 미리 파악을 해 두는것이 좋습니다.


/* 클래스 단축 네이밍 예 */

/* 글꼴두께 */
.weight-100{font-weight:100}
.weight-200{font-weight:200}
.weight-300{font-weight:300}
.weight-400{font-weight:400}
.weight-500{font-weight:500}
.weight-600{font-weight:600}
.weight-700{font-weight:700}
.weight-800{font-weight:800}
.weight-900{font-weight:900}

/* 모서리 스타일 */
.radius-0{border-radius:0}
.radius-5{border-radius:5px}
.radius-10{border-radius:10px}
.radius-15{border-radius:15px}
.radius-20{border-radius:20px}
.radius-44{border-radius:44px}

/* 정렬 */
.absolute{position:absolute}
.relative{position:relative}
.static{position:static}
.fixed{position:fixed}

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

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

mong9.css

다음 장 부터는 M9에디터에서 사용하고 있는 스타일시트의 모든 속성들을 빠짐없이 설명합니다.
공통예약어 페이지는 가장 기본이 되면서 필수로 알아두어야 할 클래스들을 설명하고,
반응형 페이지는 반응형에서 사용하는 모든 클래스들을 정리했습니다.
그리고 UserStyle 페이지에서는 디자인적인 요소가 들어간 속성들을 지속적으로 업데이트해서 공유 합니다.