어디에서나 바로가기 기능을 사용하실 수 있습니다. 주메뉴 이동은 알트 키 플러스 1 키이고, 본문 이동은 알트 키 플러스 2 키입니다.

Mong9
반응형홈페이지제작전문
현재위치
본문 영역
본문 글크기 설정

BUTTONS

<a>,<button>,<input> 요소에 버튼 클래스를 추가하여 버튼을 꾸밀 수 있습니다.
예시
  • <a>
    Button
  • <button>
  • <input>
사용법
버튼을 만들기위해서는 m9-btn 클래스가 필요합니다. <a>,<button>,<input> 요소에 m9-btn를 추가하세요. 
        
        <a href="#" class="m9-btn">Button</a>
        <button class="m9-btn">Button</button>
        <input type="button" value="Button" class="m9-btn">Button</a>

SIZE

버튼 크기는 글자크기를 조절하는 클래스를 사용하여 조절합니다.

인라인

예시
사용법
f-xsmall, f-small,f-size,f-large, f-xlarge, f-xxlarge, f-xxxlarge, f-huge 클래스를 추가하여 버튼 크기를 조정할 수 있습니다. 
        
        <a href="#" class="m9-btn f-xsmall">Button</a>
        <a href="#" class="m9-btn f-small">Button</a>
        <a href="#" class="m9-btn f-size">Button</a>
        <a href="#" class="m9-btn f-large">Button</a>
        <a href="#" class="m9-btn f-xlarge">Button</a>
        <a href="#" class="m9-btn f-xxlarge">Button</a>
        <a href="#" class="m9-btn f-xxxlarge">Button</a>
        <a href="#" class="m9-btn f-fuge">Button</a>

블록

예시
m9-btn-block
Button
사용법
m9-btn-block을 추가하여 부모요소만큼 꽉 찬 너비의 버튼을 만듭니다. 
            
            <a href="#" class="m9-btn f-xlarge m9-btn-block">Button</a>

STATE

비활성화 상태

opacity 로 흐려지게 하여 버튼을 클릭할 수 없는 것처럼 보여집니다.
예시
m9-btn-disabled
Button
사용법
<a>,<button>,<input> 요소에 m9-btn-disabled 클래스를 추가하세요. 
        
        <a href="#" class="m9-btn m9-btn-disabled">Button</a>

STYLE

버튼 스타일

기본 버튼은 둥근모서리버튼이며, 버튼의 모서리 스타일을 선택할 수 있습니다
예시
사용법
<a>,<button>,<input> 요소에 클래스 m9-btn-style-n을 추가하세요 

        <a href="#" class="m9-btn">Button</a>
        <a href="#" class="m9-btn m9-btn-style-1">Button</a>
        <a href="#" class="m9-btn m9-btn-style-2">Button</a>
        <a href="#" class="m9-btn m9-btn-style-3">Button</a>

COLOR

버튼 색상

간편하게 버튼 색상을 바꾸기 위해 버튼 클래스중 하나를 사용하세요.
예시
m9-btn-color-1, m9-btn-color-2은 자주 사용하는 색상의 버튼입니다.
의미에 따라 웹프로소프트에서 정의한 색상입니다.
사용법
<a>,<button>,<input> 요소에 사용가능한 버튼 클래스 중 하나를 삽입하세요. 

        <a href="#" class="m9-btn">Button</a>
        <a href="#" class="m9-btn m9-btn-color-1">Button</a>
        <a href="#" class="m9-btn m9-btn-color-2">Button</a>
        <a href="#" class="m9-btn m9-btn-primary">Button</a>
        <a href="#" class="m9-btn m9-btn-success">Button</a>
        <a href="#" class="m9-btn m9-btn-info">Button</a>
        <a href="#" class="m9-btn m9-btn-warning">Button</a>
        <a href="#" class="m9-btn m9-btn-danger">Button</a>

ICON

m9-btn에 사용하는 아이콘은 Axicon에 기반합니다.
아이콘의 위치는 글자 뒤 <i></i>태그로 들어가지만 클래스로 좌/우 위치 설정이 가능합니다.

POSITION

예시
  • m9-btn-icon-position-right
    Button
  • m9-btn-icon-position-left
    Button
사용법
Axicon에 기반한 <i></i> 태그를 <a>,<button>,<input> 요소 내에 삽입 후 클래스를 정의합니다. 

        <a href="#" class="m9-btn m9-btn-icon-position-right">Button<i class="axi axi-caret-right"></i></a>
        <a href="#" class="m9-btn m9-btn-icon-position-left">Button<i class="axi axi-caret-right"></i></a>
아이콘을 사용한다면 위치 클래스가 필요합니다.

EFFECT

클래스를 추가하여 hover시 아이콘 움직임 효과를 나타낼 수 있습니다.
예시
  • m9-btn-icon-effect-top-1
    Button
  • m9-btn-icon-effect-right-1
    Button
  • m9-btn-icon-effect-bottom-1
    Button
  • m9-btn-icon-effect-left-1
    Button
  • m9-btn-icon-effect-rotate-1
    Button
사용법
사용가능한 버튼 클래스 중 하나를 사용하세요. 

                <a href="#" class="m9-btn m9-btn-icon-position-right m9-btn-icon-effect-top-1">Button<i class="axi axi-ion-arrow-up-c"></i></a>
                <a href="#" class="m9-btn m9-btn-icon-position-right m9-btn-icon-effect-right-1">Button<i class="axi axi-caret-right"></i></a>
                <a href="#" class="m9-btn m9-btn-icon-position-right m9-btn-icon-effect-bottom-1">Button<i class="axi axi-ion-arrow-down-c"></i></a>
                <a href="#" class="m9-btn m9-btn-icon-position-right m9-btn-icon-effect-left-1">Button<i class="axi axi-caret-right"></i></a>
                <a href="#" class="m9-btn m9-btn-icon-position-right m9-btn-icon-effect-left-1">Button<i class="axi axi-circle-check"></i></a>
버튼에 애니메이션 효과를 주기 위해서는 m9-btn-icon-position-right,m9-btn-icon-position-left 클래스가 필요합니다.

SAMPLE

자주사용하는 아이콘 샘플입니다.
예시
m9-btn-icon-position-left
사용법

        <a href="#" class="m9-btn m9-btn-icon-position-left">Mail<i class="axi axi-mail"></i></a>
        <a href="#" class="m9-btn m9-btn-icon-position-left">Tel<i class="axi axi-phone-in-talk"></i></a>
        <a href="#" class="m9-btn m9-btn-icon-position-left">link<i class="axi axi-link"></i></a>
        <a href="#" class="m9-btn m9-btn-icon-position-left">Time<i class="axi axi-access-time"></i></a>
        <a href="#" class="m9-btn m9-btn-icon-position-left">Contact<i class="axi axi-headset"></i></a>
        <a href="#" class="m9-btn m9-btn-icon-position-left">Download<i class="axi axi-download"></i></a>

예시
m9-btn-icon-position-right
사용법
        
        <a href="#" class="m9-btn m9-btn-icon-position-right">Mail<i class="axi axi-mail"></i></a>
        <a href="#" class="m9-btn m9-btn-icon-position-right">Tel<i class="axi axi-phone-in-talk"></i></a>
        <a href="#" class="m9-btn m9-btn-icon-position-right">link<i class="axi axi-link"></i></a>
        <a href="#" class="m9-btn m9-btn-icon-position-right">Time<i class="axi axi-access-time"></i></a>
        <a href="#" class="m9-btn m9-btn-icon-position-right">Contact<i class="axi axi-headset"></i></a>
        <a href="#" class="m9-btn m9-btn-icon-position-right">Download<i class="axi axi-download"></i></a>
본문 공유 설정
TOP