본문 바로가기

예약어

m9예약어

이것만 외우면 홈페이지 뚝딱

mong9.css

M9에디터에서 사용하는 글꼴,색깔,정렬방식과 여백,위치 등의 스타일이 정의되어 있습니다.

글꼴

폰트를

제목

제목에는 별다른 클래스 사용없이 h태그만 사용해도 상관없습니다. 특별한 디자인으로 꾸미려면 user style(사용자정의) 에서 새롭게 정의해서 사용할 수도 있고 에디터 편집기에서 다양한 효과를 낼 수 있습니다.




font-family

폰트패밀리 관련 클래스 목록입니다.


.font-family-1{font-family:'Nanum Myeongjo',Gulim,sans-serif;} /*명조*/
.font-family-2{font-family:Arial; font-weight:600;} /*숫자전용*/
.font-family-3{font-family:'Roboto Condensed',sans-serif;} /*영문전용*/

font-weight

내용 추가


/* font-weight */
.font-weight-200 {font-weight: 200;} /* extra-light */
.font-weight-300 {font-weight: 300;} /* light */
.font-weight-400 {font-weight: 400;} /* regular */
.font-weight-600 {font-weight: 600;} /* semi-bold */
.font-weight-700 {font-weight: 700;} /* bold */
.font-weight-900 {font-weight: 900;} /* black */

font-size

폰트 크기를 제어하는 클래스입니다.


/* font-size */
.font-size-1 {}
.font-size-2 {}
.font-size-3 {}
.font-size-4 {}
.font-size-5 {}
.font-size-6 {}
.font-size-7 {}
.font-size-8 {}

font-style

내용 추가


/* font-style */
.font-style-italic {font-style:italic} /* 기울어짐 */

decoration

기본적으로 none 속성을 가집니다.


/* text-decoration */
.text-decoration-underline{text-decoration:underline} /* 글자 아래에 줄 그어짐 */
.text-decoration-overline {text-decoration:overline} /* 글자 위에 줄 그어짐 */
.text-decoration-line-through {text-decoration:line-through} /* 글자 중간에 줄 그어짐 */

text-align

텍스트 정렬


/* text-align */
.text-align-left{text-align:left}
.text-align-center{text-align:center}
.text-align-right{text-align:right}
.text-align-justify{text-align:justify}

line-height


/* line-height */
.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}

기타


/* word-break */
.break-all{word-break:break-all}

위치,정렬

1

position


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

display

요소를 어떻게 표시할지를 선택하는 속성입니다.


/* 사용하는 display 속성  */
.display-block{display:block}
.display-inline-block{display:inline-block;*display:inline;*zoom:1}
.display-inline{display:inline}
.display-none{display:none}

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

float

block 요소를 나란히 옆으로 배치하게 만드는 속성입니다.


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

overflow

요소를 보이게 할지 숨길지를 결정합니다.


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

clear


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

테두리,모서리

테두리를

border

border-color는 기본 #eeeef2로 설정되어 있으며, 추가적인 수정은 editor 옵션창을 사용해서 변경합니다.


/* border */
.border{border-width:1px;}
.border-top{border-top-width:1px;}
.border-left{border-left-width:1px;}
.border-bottom{border-bottom-width:1px;}
.border-right{border-right-width:1px;}

/* 특정위치에서 border 사용 안하고자 할때 */
.border-0{border-width:0}
.border-top-0{border-top-width:0}
.border-right-0{border-right-width:0}
.border-bottom-0{border-bottom-width:0}
.border-left-0{border-left-width:0}  

border-style


/* border-style */
.solid{border-style:solid}
.dashed{border-style:dashed}
.dotted{border-style:dotted} 

border-radius


/* border-radius */
.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}

넓이,높이

11

width


/* width */
.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-80{width:80% !important}
.width-100{width:100% !important}
.width-auto{width:auto !important}

height


/* height */
.height-100{height:100% !important}
.height-auto{height:auto !important}
.min-height-auto{min-height:initial !important}

여백

11

margin


/* margin */
.margin-0{margin:0 !important}

.margin-1{margin:1em !important}
.margin-2{margin:2em !important}
.margin-3{margin:3em !important}

.margin-top-0{margin-top:0 !important}
.margin-top-1{margin-top:1em !important}
.margin-top-2{margin-top:2em !important}
.margin-top-3{margin-top:3em !important}

.margin-right-0{margin-right:0 !important}
.margin-right-1{margin-right:1em !important}
.margin-right-2{margin-right:2em !important}
.margin-right-3{margin-right:3em !important}

.margin-bottom-0{margin-bottom:0 !important}
.margin-bottom-1{margin-bottom:1em !important}
.margin-bottom-2{margin-bottom:2em !important}
.margin-bottom-3{margin-bottom:3em !important}

.margin-left-0{margin-left:0 !important}
.margin-left-1{margin-left:1em !important}
.margin-left-2{margin-left:2em !important}
.margin-left-3{margin-left:3em !important}

.margin-width-0{margin-left:0em !important;margin-right:0em !important}
.margin-width-1{margin-left:1em !important;margin-right:1em !important}
.margin-width-2{margin-left:2em !important;margin-right:2em !important}
.margin-width-3{margin-left:3em !important;margin-right:3em !important}

.margin-height-0{margin-top:0em !important;margin-bottom:0em !important}
.margin-height-1{margin-top:1em !important;margin-bottom:1em !important}
.margin-height-2{margin-top:2em !important;margin-bottom:2em !important}
.margin-height-3{margin-top:3em !important;margin-bottom:3em !important}

padding


/* padding */
.padding-0{padding:0 !important}
.padding-1{padding:1em !important}
.padding-2{padding:2em !important}
.padding-3{padding:3em !important}

.padding-top-0{padding-top:0 !important}
.padding-top-1{padding-top:1em !important}
.padding-top-2{padding-top:2em !important}
.padding-top-3{padding-top:3em !important}

.padding-right-0{padding-right:0 !important}
.padding-right-1{padding-right:1em !important}
.padding-right-2{padding-right:2em !important}
.padding-right-3{padding-right:3em !important}

.padding-bottom-0{padding-bottom:0 !important}
.padding-bottom-1{padding-bottom:1em !important}
.padding-bottom-2{padding-bottom:2em !important}
.padding-bottom-3{padding-bottom:3em !important}

.padding-left-0{padding-left:0 !important}
.padding-left-1{padding-left:1em !important}
.padding-left-2{padding-left:2em !important}
.padding-left-3{padding-left:3em !important}

.padding-width-0{padding-left:0em !important;padding-right:0em !important}
.padding-width-1{padding-left:1em !important;padding-right:1em !important}
.padding-width-2{padding-left:2em !important;padding-right:2em !important}
.padding-width-3{padding-left:3em !important;padding-right:3em !important}

.padding-height-0{padding-top:0em !important;padding-bottom:0em !important}
.padding-height-1{padding-top:1em !important;padding-bottom:1em !important}
.padding-height-2{padding-top:2em !important;padding-bottom:2em !important}
.padding-height-3{padding-top:3em !important;padding-bottom:3em !important}

버튼

버튼 디자인은 사용자의 취향대로 수정해서 사용할 수도 있고, 별도의 작업없이 기본 정의된 버튼을 사용할 수 있습니다. 여기에서는 기본 정의된 버튼 사용법을 설명합니다.

default

input type="button" , button태그, .button 클래스에서 'button' 이라는 예약어를 사용하면 기본 선언된 버튼의 형태가 나타납니다.


<!-- 모두 동일한 형태의 버튼이 된다 -->
<button class="button">버튼</button>
<input type="button" value="버튼" >
<p class="button">버튼</p>
<a href="#none" class="button">버튼</a>

결과화면
  • 버튼

  • 버튼
  • color

    버튼 예약어 뒤에 'color'라는 예약어를 추가하면 색깔이 채워진 버튼의 형태가 됩니다.

    
    <!-- color 클래스 추가 -->
    <button class="color">버튼</button>
    <input type="button" value="버튼" class="color">
    <p class="button color">버튼</p>
    <a href="#none" class="button color">버튼</a>
    
    
    결과화면
  • 버튼

  • 버튼
  • gray

    버튼 예약어 뒤에 'gray'라는 예약어를 추가하면 어두운색의 버튼이 됩니다.

    
    <!-- gray 클래스 추가 -->
    <button class="gray">버튼</button>
    <input type="button" value="버튼" class="gray">
    <p class="button gray">버튼</p>
    <a href="#none" class="button gray">버튼</a>
    
    
    결과화면
  • 버튼

  • 버튼
  • icon

    버튼 예약어 뒤에 'icon'라는 예약어를 추가하고 아이콘 태그를 함께 사용할 수 있습니다. 단, input태그에서 아이콘을 사용할 경우 다른방법을 사용해야 합니다.

    
    <!-- gray 클래스 추가 -->
    <button class="icon">버튼<i class="axi axi-keyboard-arrow-right"></i></button>
    <input type="button" value="버튼" class="icon">
    <p class="button icon">버튼<i class="axi axi-keyboard-arrow-right"></i></p>
    <a href="#none" class="button icon">버튼<i class="axi axi-keyboard-arrow-right"></i></a>
    
    
    결과화면
  • 버튼

  • 버튼
  • round

    버튼 예약어 뒤에 'round'라는 예약어를 추가하면 둥근 버튼으로 사용할 수 있습니다.

    
    <!-- gray 클래스 추가 -->
    <button class="round">버튼</button>
    <input type="button" value="버튼" class="round">
    <p class="button round">버튼</p>
    <a href="#none" class="button round">버튼</a>
    
    
    결과화면
  • 버튼

  • 버튼
  • full

    버튼 예약어 뒤에 'full'라는 예약어를 추가하면 꽉찬 버튼이 됩니다.

    
    <!-- full 클래스 추가 -->
    <button class="full">버튼</button>
    <input type="button" value="버튼" class="full">
    <p class="button full">버튼</p>
    <a href="#none" class="button full">버튼</a>
    
    
    결과화면
  • 버튼

  • 버튼
  • 조합

    앞서 설명한 버튼 예약어들을 적절히 조합하여 사용하는것도 가능합니다.

    
    <!-- 예제 -->
    <a class="button icon">자세히보기 <i class="axi axi-angle-right"></i></a>
    <a class="button icon color">자세히보기 <i class="axi axi-angle-right"></i></a>
    <a class="button line">자세히보기 </a>
    <a class="button gray">자세히보기 <i class="axi axi-angle-right"></i></a>
    <a class="button round">자세히보기 </a>
    <a class="button round color">자세히보기 </a>
    
    <a class="button full line">자세히보기 </a>
    <a class="button full icon">자세히보기 <i class="axi axi-angle-right"></i></a>
    <a class="button full color">자세히보기 <i class="axi axi-angle-right"></i></a>
    
    

    float2N-

    완성되어 있는 블럭들을 클릭앤드래그로 손쉽게 활용할 수 있지만 사용자가 하드코딩으로 직접 레이아웃을 만들수도 있습니다. 이 때 알아두면 유용한 클래스로 .float2N- 가 있습니다. 레이아웃을 제작할때 첫번째로 고려해야 할것이 몇단 이 속성을 사용하기 전에 화면의 기본 구조를 파악하고 있어야 합니다.

    기본구조

    모든 컨텐츠는 컬럼안에 포함이 되고 컬럼은 그리드 영역에 포함됩니다.

    .grid-1 > .column1 > 컨텐츠

    
    /* block 기본 구조 */
    <div class="grid-1"> 
        <div class="column1">
            <div>
                컨텐츠
            </div>
        </div>
    </div>
    
    

    직접 하드코딩을 할 경우 위의 구조를 숙지해야 합니다.

    영역화면
    컨텐츠
  • grid-1
  • column1
  • float2N-1

    이 클래스의 의미는 float2N-1 하위 자식요소의 가로폭을 100%로 활용하겠다는 의미 입니다.
    컬럼의 하위 ul 태그안에 삽입이 되며 해당 ul의 하위 li가 별개의 컨텐츠 영역으로 구분이 되어집니다.

    .grid-1 > .column1 > .float2N-1 > 컨텐츠

    
    /* float2N-1  */
    <div class="grid-1"> 
        <div class="column1">
            <ul class="float2N-1">
                <li>
                    <div>
                        컨텐츠
                    </div>
                </li>
            </ul>
        </div>
    </div>
    
    

    이와 같은 단일블럭의 경우 float2N-1 클래스는 사용을 해도 되고 안해도 상관이 없습니다. 결과화면상으로는 기본구조와 동일하기 때문입니다. 일반적인 상황에서는 불필요하지만 반응형에서는 유용하게 활용되기때문에 기본 개념을 파악해두시는 것이 좋습니다.

    영역화면
    • 컨텐츠
  • grid-1
  • column1
  • float2N-1
  • float2N-2

    float2N-2 하위 자식요소의 가로폭을 50%로 활용하겠다는 의미 입니다. 컬럼의 하위 ul태그안에 삽입되어 해당 ul의 하위 li로 구분되어지므로 아래의 코드와 같이 두개의 li 그룹이 사용됩니다.

    
    /* float2N-2 */
    <div class="grid-1">
        <div class="column1">
            <ul class="float2N-2">
                <li>
                    <div>
                        컨텐츠
                    </div>
                </li>
                <li>
                    <div>
                        컨텐츠
                    </div>
                </li>
            </ul>
        </div>
    </div>
    
    
    영역화면

    영역을 보기쉽게 구분하기 위해 임의로 여백이 표현되어 있지만 실제 화면에서는 여백없이 꽉찬 형태가 됩니다.

    • 컨텐츠1
    • 컨텐츠2
  • grid-1
  • column1
  • 50%
  • 50%
  • float2N-3

    ddd

    
    /* float2N-3 */
    <div class="grid-1">
        <div class="column1">
            <ul class="float3N-2">
                <li>
                    <div>
                        컨텐츠
                    </div>
                </li>
                <li>
                    <div>
                        컨텐츠
                    </div>
                </li>
                <li>
                    <div>
                        컨텐츠
                    </div>
                </li>
            </ul>
        </div>
    </div>
    
    
    영역화면

    영역을 보기쉽게 구분하기 위해 임의로 여백이 표현되어 있지만 실제 화면에서는 여백없이 꽉찬 형태가 됩니다.

    • 컨텐츠1
    • 컨텐츠2
  • grid-1
  • column1
  • 50%
  • 50%
  • float2N-4

    ddd

    
    /*   */
    
    
    

    float2N-5

    ddd

    
    /*   */
    
    
    

    float2N-6

    ddd

    
    /*   */
    
    
    

    표 만들기

    몽구에디터에서 테이블 블락을 사용하면 손쉽게 표를 꾸밀수가 있습니다. 그렇지 않고 div태그를 사용해서 레이아웃을 제어하거나 직접 새롭게 구조를 짜고 싶다면 다음의 클래스를 사용해서 테이블처럼 꾸밀수 있습니다.

    display 속성으로 표 만들기

    div태그를 사용해서 table요소처럼 표현을 할때 이 클래스를 사용합니다.

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

    예제1

    table-row 그룹은 테이블의 TR , table-cell 그룹은 테이블의 TD와 같은 개념이 됩니다.

    
    /* div태그에 table클래스를 사용하여 table처럼 만들기 */
    <div class="table">
        <div class="table-row">
            <div class="table-cell padding-2 text-align-center vertical-align-middle height-200" style="background:#f5f5fa">
                <p>Lorem</p>
            </div>
            <div class="table-cell padding-2 height-200" style="background:#fafada">
                <p>Ipsum</p>
            </div>
            <div class="table-cell padding-2 text-align-right height-200" style="background:#f5f5fa">
                <p>Dolor</p>
            </div>
        </div>
        <div class="table-row">
            <div class="table-cell padding-2 vertical-align-top height-200" style="background:#fafada">
                <p>Lorem</p>
            </div>
            <div class="table-cell padding-2 vertical-align-bottom height-200" style="background:#f5f5fa">
                <p>Ipsum</p>
            </div>
            <div class="table-cell padding-2 vertical-align-middle height-200" style="background:#fafada">
                <p>Dolor</p>
            </div>
        </div>
    </div>
    
    
    결과화면

    Lorem

    Ipsum

    Dolor

    Lorem

    Ipsum

    Dolor

    예제2

    table-row 그룹은 테이블의 TR , table-cell 그룹은 테이블의 TD와 같은 개념이 됩니다.

    
    <div class="grid-1">
        <div class="column1">
            <div class="table vertical-align-top e-display-block" style="table-layout:fixed">
                <div class="table-cell vertical-align-top relative t-display-block">
                    <div style="padding-top:100%"></div>
                    <div class="absolute blue" style="top:0;left:0;width:100%;height:100%">
                        <span class="fullimg m9-img-box"><span style="padding-bottom:100%"><img src="http://staff03.mong9.com/editor/imgs/example/example077.jpg" alt="" alt_no="1" style="position: absolute; top: 0%; left: -0.0511945%; width: 150.171%; min-width: 150.171%"></span></span>					
                    </div>
                    <div class="absolute padding-1 img-above" style="width:100%;bottom:0;left:0;color:#fff">
                        <p class="padding-bottom-1">가던 길 잠시 멈추고<br></p>
                        <span>내키는 대로 가면<br>그만인 것을</span>
                        <p class="padding-top-1">계획하지 않아도 찾을 수 있는 여행의 즐거움</p>
                    </div>
                </div>
                <div class="table-cell top t-display-block">
                    <div class="table" style="table-layout:fixed">
                        <div class="table-row">
                            <div class="table-cell relative" style="width:50%">
                                <div style="padding-top:100%"></div>
                                <div class="absolute vertical-align-middle" style="top:0;left:0;width:100%;height:100%">
                                    <div class="table" style="height:100%">
                                        <div class="table-cell text-align-center vertical-align-middle user-background-2" style="height:100%">
                                            <p class="padding-bottom-2 t-padding-bottom-1">Make better me<br></p>
                                            <span>더 나은 나를 위해 떠나는<br>여행 - 1</span>
                                        </div>
                                    </div>
                                </div>
                            </div>		
                            <div class="table-cell relative" style="width:50%">
                                <div style="padding-top:100%"></div>
                                <div class="absolute" style="top:0;left:0;width:100%;height:100%">
                                    <span class="fullimg m9-img-box"><span style="padding-bottom:100%"><img src="http://staff03.mong9.com/editor/imgs/example/food003.jpg" alt="" alt_no="1" style="position: absolute; top: 0%; left: -0.0511945%; width: 150.171%; min-width: 150.171%"></span></span>					
                                </div>
                            </div>		
                        </div>	
                        <div class="table-row">
                            <div class="table-cell relative" style="width:50%">
                                <div style="padding-top:100%"></div>
                                <div class="absolute" style="top:0;left:0;width:100%;height:100%">
                                    <span class="fullimg m9-img-box"><span style="padding-bottom:100%"><img src="http://staff03.mong9.com/editor/imgs/example/food004.jpg" alt="" alt_no="1" style="position: absolute; top: 0%; left: -0.0511945%; width: 150.171%; min-width: 150.171%"></span></span>									
                                </div>
                            </div>
                            <div class="table-cell relative" style="width:50%">
                                <div style="padding-top:100%"></div>
                                <div class="absolute vertical-align-middle" style="top:0;left:0;width:100%;height:100%">
                                    <div class="table" style="height:100%">
                                        <div class="table-cell text-align-center vertical-align-middle user-background-2" style="height:100%">
                                            <p class="padding-bottom-2 t-padding-bottom-1">Make better me<br></p>
                                            <span class="">더 나은 나를 위해 떠나는<br>여행 - 2</span>
                                        </div>
                                    </div>
                                </div>
                            </div>	
                        </div>
                    </div>
                </div>							
            </div>
        </div>
    </div>
    
    결과화면

    가던 길 잠시 멈추고

    내키는 대로 가면
    그만인 것을

    계획하지 않아도 찾을 수 있는 여행의 즐거움

    Make better me

    더 나은 나를 위해 떠나는
    여행 - 1

    Make better me

    더 나은 나를 위해 떠나는
    여행 - 2

    리스트

    11

    투명도

    특정요소에 투명도를 줘야할때 사용합니다.

    
    /* 투명도 */
    .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)}