SPSTRAP Document API

Document

<div sp--view-device="pc">
                                pc 에서만 보인다. ( 디바이스 크기 1025 ~  )
                            </div>
                            <div sp--view-device="tablet">
                                tablet 에서만 보인다. ( 디바이스 크기 601 ~ 1024 )
                            </div>
                            <div sp--view-device="mobile">
                                mobile 에서만 보인다. ( 디바이스 크기 1 ~ 600 )
                            </div>

<div sp--view-device="pc, tablet">
                                pc, tablet 에서만 보인다. ( 디바이스 크기 601 ~ )
                            </div>
                            <div sp--view-device="tablet, mobile">
                                tablet, mobile 에서만 보인다. ( 디바이스 크기 ~ 1024 )
                            </div>

Pc, Mobile, Tablet 에서의 수동적 대응

H Scale

Normal font scale

Color

Text with buttons (복합적인 구성이 가능하다.)

<h1 class="sp--font" theme="light-strike">Text strike</h1>
                            <h1 class="sp--font" theme="light-struck">Text struck strike 한글도 가능</h1>
                            <h1 class="sp--font" theme="gray-underline">H1 Heading text - gray</h1>
                            <div class="sp--font" theme="gray-bottomline">
                                gray underline
                            </div>
                            <div class="sp--font" scale="2xl" style="padding:30px;">
                                <span class="sp--font" theme="bold-bottomline">Lorem Ipsum</span> is simply dummy 
                                <span class="sp--font" theme="bold-underline">text</span> 
                                of the printing and <span class="sp--font" theme="primary-bold-struck">typesetting industry.</span> 
                                Lorem Ipsum has been the <span class="sp--font" theme="bold-strike">industry's standard</span> 
                                dummy text ever since the 1500s,
                                <a href="#!" class="sp--btn" theme="fill-light-left-round"><span> * text hover effect </span></a> 
                                <a href="#!" class="sp--btn" theme="fill-primary-left-round" bg="light"><span> * text hover effect - with background </span></a> 
                                <a href="#!" class="sp--btn" theme="fill-dark-left-round" bg="light"><span> * text hover effect - with background </span></a> 
                                <a href="#!" class="sp--btn" theme="fill-primary-left-round" scale="nude"><span> * text hover effect </span></a> 
                                <a href="#!" class="sp--btn" theme="under-dark" scale="xs">under-dark xs</a>
                                <a href="#!" class="sp--btn" theme="box-light" scale="ss">한글 가장작은 버튼</a>
                                text ever since the 1500s,
                            </div>

hr - light

hr - gray

hr - dark

hr - dark fiqure

hr - dark hexagon

hr - dark band

hr - dark shape

hr - align ( left )

hr - align ( right )

hr - dash ( with color )

hr - dash sm

hr - dash md

hr - dash lg

hr - dash xl (with bold)

hr - dash xl (with top, bottom space)

hr - tick (short)

hr - tick (medium)

hr - tick (long)

hr - tick (diagonal)

hr - tick (diagonal - reverse)

자간

Bedge - inside

<br /><br />
                            <a href="#!" class="sp--btn" theme="box-dark-round" scale="md">
                                버튼 top-in-center
                                <span class="sp--bedge" position="top-in-center">
                                    <span class="sp--btn" theme="box-primary-roundmax" scale="ss">3</span>
                                </span>
                            </a>

<br /><br />
                            <a href="#!" class="sp--btn" theme="box-dark-round" scale="md">
                                버튼 top-in-right
                                <span class="sp--bedge" position="top-in-right">
                                    <span class="sp--btn" theme="box-primary-roundmax" scale="ss">3</span>
                                </span>
                            </a>

<br /><br />
                            <a href="#!" class="sp--btn" theme="box-dark-round" scale="md">
                                버튼 bottom-in-left
                                <span class="sp--bedge" position="bottom-in-left">
                                    <span class="sp--btn" theme="box-primary-roundmax" scale="ss">3</span>
                                </span>
                            </a>

<br /><br />
                            <a href="#!" class="sp--btn" theme="box-dark-round" scale="md">
                                버튼 bottom-in-center
                                <span class="sp--bedge" position="bottom-in-center">
                                    <span class="sp--btn" theme="box-primary-roundmax" scale="ss">3</span>
                                </span>
                            </a>

<br /><br />
                            <a href="#!" class="sp--btn" theme="box-dark-round" scale="md">
                                버튼 bottom-in-right
                                <span class="sp--bedge" position="bottom-in-right">
                                    <span class="sp--btn" theme="box-primary-roundmax" scale="ss">3</span>
                                </span>
                            </a>

Bedge - outside

<br /><br />
                            <a href="#!" class="sp--btn" theme="box-gray-round" scale="md">
                                버튼 top-out-center
                                <span class="sp--bedge" position="top-out-center">
                                    <span class="sp--btn" theme="line-gray-roundmax" scale="ss">3</span>
                                </span>
                            </a>

<br /><br />
                            <a href="#!" class="sp--btn" theme="box-dark-round" scale="md">
                                버튼 top-out-right
                                <span class="sp--bedge" position="top-out-right">
                                    <span class="sp--btn" theme="line-dark-roundmax" scale="ss">3</span>
                                </span>
                            </a>

<br /><br />
                            <a href="#!" class="sp--btn" theme="box-primary-round" scale="md">
                                버튼 bottom-out-left
                                <span class="sp--bedge" position="bottom-out-left">
                                    <span class="sp--btn" theme="line-primary-roundmax" scale="ss">3</span>
                                </span>
                            </a>

<br /><br />
                            <a href="#!" class="sp--btn" theme="box-gray-round" scale="md">
                                버튼 bottom-out-center
                                <span class="sp--bedge" position="bottom-out-center">
                                    <span class="sp--btn" theme="line-gray-roundmax" scale="ss">3</span>
                                </span>
                            </a>

<br /><br />
                            <a href="#!" class="sp--btn" theme="box-dark-round" scale="md">
                                버튼 bottom-out-right
                                <span class="sp--bedge" position="bottom-out-right">
                                    <span class="sp--btn" theme="line-dark-roundmax" scale="ss">3</span>
                                </span>
                            </a>