매뉴얼::lightbox

lightbox

이미지에 다양한 hover 효과를 연출하는 클래스입니다. 기본 7가지 효과가 정의되어 있습니다.

lightbox-1

코드

<div class="lightbox-1">
    <image>
    내용
</div>

설명

이미지 hover효과

결과화면 소스보기

lightbox-2

코드

<div class="lightbox-2">
    <image>
    내용
</div>

결과화면

lightbox-3

코드

<div class="lightbox-3">
    <image>
    내용
</div>

결과화면

lightbox-4

코드

<div class="lightbox-4">
    <image>
    내용
</div>

결과화면

lightbox-5

코드

<div class="lightbox-5">
    <image>
    내용
</div>

결과화면

lightbox-6

코드

<div class="lightbox-6">
    <image>
    내용
</div>

결과화면

lightbox-7

코드

<div class="lightbox-7">
    <image>
    내용
</div>

결과화면

lightbox-1

예제소스


<div class="m9-img-box lightbox-1">
    <img src="images/sample_01.jpg" alt="sample_01">
    <span class="absolute width-100 height-100" style="top:0%;left:0;z-index:10">
        <div class="table" style="height:100%">								
            <span class="table-cell middle text-align-center font-size-3 user-color-1">내용</span>					
        </div>
    </span>
</div>

list-style-2

예제소스

list-style-2를 활용한 예제


<div class="grid-1">
	<div class="column1">
		<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>		
	</div>	
</div>

float2N-3

예제소스

float2N-3를 활용한 예제


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

float2N-4

예제소스

float2N-4를 활용한 예제


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

float2N-5

예제소스

float2N-5를 활용한 예제


<div class="grid-1">
	<div class="column1">	
        <ul class="float2N-5">
            <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>