user-background

사용자정의 백그라운드 클래스입니다. 취향에 맞게 추가,변경해서 사용할 수 있습니다.
기본 다섯가지 색상이 정의되어 있습니다.

user-background-1

코드

<div class="user-background-1">
    내용
</div>

결과화면소스보기

내용

user-background-2

코드

<div class="user-background-2">
    내용
</div>

결과화면

내용

user-background-3

코드

<div class="user-background-3"> 
    내용
</div>

결과화면

내용

user-background-4

코드

<div class="user-background-4"> 
    내용
</div>

결과화면

내용

user-background-5

코드

<div class="user-background-5"> 
    내용
</div>

결과화면

내용

user-background 활용예제

컨텐츠 영역에 각각 다른 user-background 를 적용시킨 모습소스보기

user-background-1
user-background-2
user-background-3
user-background-4
user-background-1
user-background-5
user-background-5
user-background-4

백그라운드를 활용한 리스트박스소스보기

주의사항
  • 아래 동의는 고객님의 보험계약 체결과 관련된 가입 설계, 보험 청약, 연대보증, 행정정보 열람 등을 위한 사전 동의절차 입니다.
  • [동의하기] 버튼을 클릭하시면 전자서명을 통한 동의절차가 진행됩니다.
  • 법인 고객은 해당되지 않습니다. (개인이 아닌 경우 자동 로그아웃됩니다)
  • 해당되는 부문의 동의절차만 진행하시면 됩니다.
  • 모바일(휴대폰, 태블릿 등)기기로 동의 업무가 가능합니다.

이미지와 백그라운드를 활용한 블럭소스보기

Step - by - Step Guide

단계별 가이드 :
마우스 하나로 컨텐츠를 완성하세요!

background-alpha-black-1

코드

<div>
    <image>
    <div class="background-alpha-black-1">
        알파값 70%가 적용된 모습
    </div>
</div>
설명

배경에 검정색 투명도70%를 씌울때 사용합니다.

결과화면소스보기

alpha_01
알파값 70%가 적용된 모습

background-alpha-black-2

코드

<div>
    <image>
    <div class="background-alpha-black-2">
        알파값 30%가 적용된 모습
    </div>
</div>
설명

배경에 검정색 투명도30%를 씌울때 사용합니다.

결과화면소스보기

alpha_01
알파값 30%가 적용된 모습

background-alpha-white-1

코드

<div>
    <image>
    <div class="background-alpha-white-1">
        알파값 50%가 적용된 모습
    </div>
</div>
설명

배경에 하얀색 투명도50%를 씌울때 사용합니다.

결과화면소스보기

alpha_02
알파값 50%가 적용된 모습

background-alpha-white-2

코드

<div>
    <image>
    <div class="background-alpha-white-2">
        알파값 30%가 적용된 모습
    </div>
</div>
설명

배경에 하얀색 투명도30%를 씌울때 사용합니다.

결과화면소스보기

alpha_02
알파값 30%가 적용된 모습

user-color

사용자정의 텍스트색상 클래스입니다. 취향에 맞게 추가,변경해서 사용할 수 있습니다.
기본 네가지 색상이 정의되어 있습니다.

user-color-0

코드

<div class="user-color-0">
    user-color-0 클래스가 적용된 텍스트입니다.
    user-color-0 클래스가 적용된 텍스트입니다.
    user-color-0 클래스가 적용된 텍스트입니다.
    user-color-0 클래스가 적용된 텍스트입니다.
</div>
설명

텍스트에 #000 색상이 적용됩니다.

결과화면

user-color-0 클래스가 적용된 텍스트입니다.
user-color-0 클래스가 적용된 텍스트입니다.
user-color-0 클래스가 적용된 텍스트입니다.
user-color-0 클래스가 적용된 텍스트입니다.

user-color-1

코드

<div class="user-color-1 user-background-2">
    user-color-1 클래스가 적용된 텍스트입니다.
    user-color-1 클래스가 적용된 텍스트입니다.
    user-color-1 클래스가 적용된 텍스트입니다.
    user-color-1 클래스가 적용된 텍스트입니다.
</div>
설명

텍스트에 #fff 색상이 적용됩니다.

결과화면

user-color-1 클래스가 적용된 텍스트입니다.
user-color-1 클래스가 적용된 텍스트입니다.
user-color-1 클래스가 적용된 텍스트입니다.
user-color-1 클래스가 적용된 텍스트입니다.

user-color-2

코드

<div class="user-color-2">
    user-color-2 클래스가 적용된 텍스트입니다.
    user-color-2 클래스가 적용된 텍스트입니다.
    user-color-2 클래스가 적용된 텍스트입니다.
    user-color-2 클래스가 적용된 텍스트입니다.
</div>
설명

텍스트에 #888 색상이 적용됩니다.

결과화면

user-color-2 클래스가 적용된 텍스트입니다.
user-color-2 클래스가 적용된 텍스트입니다.
user-color-2 클래스가 적용된 텍스트입니다.
user-color-2 클래스가 적용된 텍스트입니다.

user-color-3

코드

<div class="user-color-3">
    user-color-3 클래스가 적용된 텍스트입니다.
    user-color-3 클래스가 적용된 텍스트입니다.
    user-color-3 클래스가 적용된 텍스트입니다.
    user-color-3 클래스가 적용된 텍스트입니다.
</div>
설명

텍스트에 #af3333 색상이 적용됩니다.

결과화면

user-color-3 클래스가 적용된 텍스트입니다.
user-color-3 클래스가 적용된 텍스트입니다.
user-color-3 클래스가 적용된 텍스트입니다.
user-color-3 클래스가 적용된 텍스트입니다.

user-background

예제소스

background-color,border-color,color 세가지 속성은 필수 입니다.


.user-background-1 {background-color:#f5f4f7 !important;border-color:#eeeef2;color:#222}

user-background

예제소스

<div class="relative padding-1 border solid user-background-1 e-padding-1 e-padding-height-1">
    <div class="margin-bottom-1">
        <strong><i class="axi axi-lg axi-exclamation-circle"></i> 주의사항</strong>
    </div>
    <div class="padding-1 border solid" style="background:#fff">				
        <ul class="list-style-2">
            <li>아래 동의는 고객님의 보험계약 체결과 관련된 가입 설계, 보험 청약, 연대보증, 행정정보 열람 등을 위한 사전 동의절차 입니다.</li>
            <li>[동의하기] 버튼을 클릭하시면 전자서명을 통한 동의절차가 진행됩니다.</li>
            <li>법인 고객은 해당되지 않습니다. (개인이 아닌 경우 자동 로그아웃됩니다)</li>
            <li>해당되는 부문의 동의절차만 진행하시면 됩니다.</li>
            <li>모바일(휴대폰, 태블릿 등)기기로 동의 업무가 가능합니다.</li>
        </ul>				
    </div>
</div>

user-background

예제소스

<div class="table e-display-block">
    <div class="table-cell m-display-block">
        <div class="table" style="table-layout:fixed">
            <div class="table-row">
                <div class="table-cell">  
                    <div class="table user-background-1 padding-3 text-align-center">
                        user-background-1
                    </div>
                </div>		
                <div class="table-cell">
                    <div class="table user-background-2 padding-3 text-align-center">
                        user-background-2				
                    </div>
                </div>		
            </div>	
            <div class="table-row">
                <div class="table-cell">  
                    <div class="table user-background-3 padding-3 text-align-center">
                        user-background-3
                    </div>
                </div>		
                <div class="table-cell">
                    <div class="table user-background-4 padding-3 text-align-center">
                        user-background-4			
                    </div>
                </div>		
            </div>
        </div>
    </div>
    <div class="table-cell m-display-block">
        <div class="table" style="table-layout:fixed">
            <div class="table-row">
                <div class="table-cell">  
                    <div class="table user-background-1 padding-3 text-align-center">
                        user-background-1
                    </div>
                </div>		
                <div class="table-cell">
                    <div class="table user-background-5 padding-3 text-align-center">
                        user-background-5				
                    </div>
                </div>		
            </div>	
            <div class="table-row">
                <div class="table-cell">  
                    <div class="table user-background-5 padding-3 text-align-center">
                        user-background-5 
                    </div>
                </div>		
                <div class="table-cell">
                    <div class="table user-background-4 padding-3 text-align-center">
                        user-background-4			
                    </div>
                </div>		
            </div>
        </div>
    </div>
</div>

user-background

예제소스


<div class="table e-display-block" style="table-layout:fixed">
    <div class="table-cell relative width-50 e-display-block e-width-100">
        <div style="padding-top:50%"></div>
        <div class="absolute width-100 height-100" style="top:0;left:0;">
            <span class="fullimg m9-img-box"><span style="padding-bottom:50%"><img src="http://staff03.mong9.com/editor/imgs/example/example030.jpg" alt="" alt_no="1" style="position: absolute; top: -2.3321%; left: -20.5761%; width: 120.576%; min-width: 120.576%;"></span></span>					
        </div>
    </div>	
    <div class="table-cell relative width-50 e-display-block e-width-100">
        <div style="padding-top:50%"></div>
        <div class="absolute middle width-100 height-100" style="top:0;left:0;">
            <div class="table height-100">
                <div class="table-cell padding-width-2 text-align-left middle user-background-3 e-padding-width-1">
                    <p class="padding-bottom-2 m-padding-bottom-1">Step - by - Step Guide<br></p>
                    <span class="font-size-6">단계별 가이드 :<br>마우스 하나로 컨텐츠를 완성하세요!</span>
                </div>
            </div>
        </div>
    </div>		
</div>

background-alpha-black-1

예제소스

<div class="m9-img-box">
    <img src="images/alpha_01.jpg" alt="alpha_01">
    <div class="absolute display-block background-alpha-black-1" style="width:100%;height:50%;left:0;bottom:0;color:#ffffff;font-size:15px;">
        <span class="display-block" style="padding:60px">알파값 70%가 적용된 모습</span>
    </div>
</div>

background-alpha-black-2

예제소스

<div class="m9-img-box">
    <img src="images/alpha_01.jpg" alt="alpha_01">
    <div class="absolute display-block background-alpha-black-2" style="width:100%;height:50%;left:0;bottom:0;color:#ffffff;font-size:15px;">
        <span class="display-block" style="padding:60px">알파값 30%가 적용된 모습</span>
    </div>
</div>

background-alpha-white-1

예제소스

<div class="m9-img-box">
    <img src="images/alpha_01.jpg" alt="alpha_01">
    <div class="absolute display-block background-alpha-white-1" style="width:100%;height:50%;left:0;bottom:0;color:#ffffff;font-size:15px;">
        <span class="display-block" style="padding:60px">알파값 50%가 적용된 모습</span>
    </div>
</div>

background-alpha-white-2

예제소스

<div class="m9-img-box">
    <img src="images/alpha_01.jpg" alt="alpha_01">
    <div class="absolute display-block background-alpha-white-2" style="width:100%;height:50%;left:0;bottom:0;color:#ffffff;font-size:15px;">
        <span class="display-block" style="padding:60px">알파값 30%가 적용된 모습</span>
    </div>
</div>