Style Guide

컬러 토큰

$primary_color #2B79ED
$secondary_color #010F3B
$tertiary_color #7E59C7
$warning_color #D20505
$focus_color #2B79ED
$gray_1 #F5F6F8
$gray_2 #E5E6E8
$gray_3 #D1D6DB
$gray_4 #C4C9D1
$gray_5 #A6ACB6
$gray_6 #8B95A1
$gray_7 #4E5968

폰트 컬러

$font_color_1 #010F3B
$font_color_2 #333D4B
$font_color_3 #8B95A1
$font_color_4 #FFFFFF

분류 클래스명 코드 미리보기

CSS 변수

변수	값
`--header-h`	128px
`--gnb-h`	5.5rem
`--tnb-h`	40px
`--inner-w`	1440px
`--logo-w`	11rem
`--utility-w`	15rem
`--snb-w`	14.9rem
`--content-w`	69.4rem
`--footer-h`	0rem
`--side-panel-w`	0rem
`--side-content-w`	21rem
`--side--dashboard-w`	23rem

폰트

font-family	font-weight	미리보기
Paperozi	400	산준모 스타일 가이드 Aa 123
Paperozi	600	산준모 스타일 가이드 Aa 123
Paperozi	800	산준모 스타일 가이드 Aa 123
pretendard	300	산준모 스타일 가이드 Aa 123
pretendard	400	산준모 스타일 가이드 Aa 123
pretendard	500	산준모 스타일 가이드 Aa 123
pretendard	600	산준모 스타일 가이드 Aa 123
pretendard	700	산준모 스타일 가이드 Aa 123
pretendard	800	산준모 스타일 가이드 Aa 123
Aggravo	300	산준모 스타일 가이드 Aa 123

기본 폰트 크기

조건	html, body font-size
기본	16px
@media screen and (max-width: 1024px)	14px
@media screen and (max-width: 820px)	12px

폰트사이즈

fs--12
fs--13
fs--14
fs--15
fs--16
fs--17
fs--18
fs--19
fs--20
fs--21
fs--22
fs--23
fs--24
fs--25
fs--26
fs--27
fs--28
fs--29
fs--30
fs--31
fs--32
fs--33
fs--34
fs--35
fs--36
fs--37
fs--38
fs--39
fs--40

margin

클래스	조건	최소	최대
`mg0 ~ mg100`	기본	margin: 0px !important	margin: 100px !important
`mg25 ~ mg60`	@media (max-width: 912px)	margin: 15px !important	margin: 36px !important
`mgTB0 ~ mgTB100`	기본	margin: 0px 0 !important	margin: 100px 0 !important
`mgTB25 ~ mgTB60`	@media (max-width: 912px)	margin: 15px 0 !important	margin: 36px 0 !important
`mgLR0 ~ mgLR100`	기본	margin: 0 0px !important	margin: 0 100px !important
`mgLR25 ~ mgLR60`	@media (max-width: 912px)	margin: 0 15px !important	margin: 0 36px !important
`mgT0 ~ mgT100`	기본	margin-top: 0px !important	margin-top: 100px !important
`mgT25 ~ mgT60`	@media (max-width: 912px)	margin-top: 15px !important	margin-top: 36px !important
`mgR0 ~ mgR100`	기본	margin-right: 0px !important	margin-right: 100px !important
`mgR25 ~ mgR60`	@media (max-width: 912px)	margin-right: 15px !important	margin-right: 36px !important
`mgB0 ~ mgB100`	기본	margin-bottom: 0px !important	margin-bottom: 100px !important
`mgB25 ~ mgB60`	@media (max-width: 912px)	margin-bottom: 15px !important	margin-bottom: 36px !important
`mgL0 ~ mgL100`	기본	margin-left: 0px !important	margin-left: 100px !important
`mgL25 ~ mgL60`	@media (max-width: 912px)	margin-left: 15px !important	margin-left: 36px !important

padding

클래스	조건	최소	최대
`pd0 ~ pd50`	기본	padding: 0px !important	padding: 50px !important
`pd0 ~ pd50`	@media (max-width: 912px)	padding: 0px !important	padding: 30px !important
`pdTB0 ~ pdTB50`	기본	padding: 0px 0 !important	padding: 50px 0 !important
`pdTB0 ~ pdTB50`	@media (max-width: 912px)	padding: 0px 0 !important	padding: 30px 0 !important
`pdLR0 ~ pdLR50`	기본	padding: 0 0px !important	padding: 0 50px !important
`pdLR0 ~ pdLR50`	@media (max-width: 912px)	padding: 0 0px !important	padding: 0 30px !important
`pdT0 ~ pdT50`	기본	padding-top: 0px !important	padding-top: 50px !important
`pdT0 ~ pdT50`	@media (max-width: 912px)	padding-top: 0px !important	padding-top: 30px !important
`pdR0 ~ pdR50`	기본	padding-right: 0px !important	padding-right: 50px !important
`pdR0 ~ pdR50`	@media (max-width: 912px)	padding-right: 0px !important	padding-right: 30px !important
`pdB0 ~ pdB50`	기본	padding-bottom: 0px !important	padding-bottom: 50px !important
`pdB0 ~ pdB50`	@media (max-width: 912px)	padding-bottom: 0px !important	padding-bottom: 30px !important
`pdL0 ~ pdL50`	기본	padding-left: 0px !important	padding-left: 50px !important
`pdL0 ~ pdL50`	@media (max-width: 912px)	padding-left: 0px !important	padding-left: 30px !important

width

클래스	조건	최소	최대
`wp1 ~ wp100`	기본	width: 1%	width: 100%
`w1 ~ w100`	기본	width: 1px	width: 100px

정렬

align--l
align--r
align--c
align--v

<div class="guide__box guide__box--tall align--l">align--l</div>

align--l

align--r

align--c

align--v

상태

클래스명	코드
`state--disabled`	color: #aaa; pointer-events: none; cursor: not-allowed; opacity: .6
`display--enabled`	pointer-events: auto; cursor: pointer; opacity: 1
`display--none`	display: none display: none !important
`display--block`	display: block display: block !important
`display--visible`	visibility: visible
`display--hidden`	visibility: hidden
`display--inlineblock`	display: inline-block
`hidden`	display: none

버튼

btn 5개

btn
btn btn--dark
btn btn__line
btn btn__line--dark
btn disabled

btn__brand 2개

btn__brand
btn__brand btn__brand--dark

입력

input
select
select [checked]
select input--valid

<select class="select input--valid" aria-label="select input--valid"><option>선택</option></select>

메시지

msg
msg msg--error
msg msg--info
msg msg--noti

<p class="msg msg--error">메시지 텍스트</p>

메시지 텍스트

체크박스

checkbox__input
checkbox__input [checked]
checkbox__input [disabled]
checkbox__input checkbox__input--round
checkbox__input checkbox__input--round [checked]

<span class="checkbox"><input type="checkbox" id="guide-example" class="checkbox__input checkbox__input--round"><label for="guide-example" class="checkbox__label">선택</label></span>

선택 선택 선택 선택 선택

라디오

radio__input
radio__input [checked]

<span class="radio"><input type="radio" id="guide-example" name="guide-example" class="radio__input"><label for="guide-example" class="radio__label">선택</label></span>

선택 선택

탭

tab__item
tab__item tab__item--active

<div class="tab"><ul class="tab__list"><li><a href="#" class="tab__item tab__item--active">탭</a></li></ul></div>

툴팁

tooltip
tooltip tooltip--top
tooltip tooltip--left
tooltip tooltip--right

aria-label 값이 메시지로 표시됩니다. 마우스 오버와 키보드 포커스에 표시됩니다.

<button type="button" class="guide__tip tooltip tooltip--top" aria-label="툴팁 메시지">?</button>

레이어팝업

layer-pop
layer-pop layer-pop--alert
layer-pop layer-pop--system
layer-pop layer-pop--xs
layer-pop layer-pop--s
layer-pop layer-pop--m
layer-pop layer-pop--full

열기 버튼의 data-target 과 팝업 id 를 같은 값으로 씁니다.

<button type="button" class="btn btn--dark layer__open" data-target="guide-example">열기</button>
<div class="layer-pop__overlay layer-pop--hidden" id="guide-example">
    <div class="layer-pop layer-pop--alert" role="dialog" aria-modal="true" aria-labelledby="guide-example-title">
        <div class="layer-pop__head">
            <h4 class="layer-pop__title" id="guide-example-title">layer-pop layer-pop--alert</h4>
            <button type="button" class="layer-pop--close"><span class="blind">닫기</span></button>
        </div>
        <div class="layer-pop__body" tabindex="0"><p>레이어팝업 내용</p></div>
    </div>
</div>