Style Guide

컬러 토큰

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

폰트 컬러

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

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

폰트

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	margin: 100px
`mgTB0 ~ mgTB100`	margin: 0px 0	margin: 100px 0
`mgLR0 ~ mgLR100`	margin: 0 0px	margin: 0 100px
`mgT0 ~ mgT100`	margin-top: 0px	margin-top: 100px
`mgR0 ~ mgR100`	margin-right: 0px	margin-right: 100px
`mgB0 ~ mgB100`	margin-bottom: 0px	margin-bottom: 100px
`mgL0 ~ mgL100`	margin-left: 0px	margin-left: 100px

padding

클래스	최소	최대
`pd0 ~ pd50`	padding: 0px	padding: 50px
`pdTB0 ~ pdTB50`	padding: 0px 0	padding: 50px 0
`pdLR0 ~ pdLR50`	padding: 0 0px	padding: 0 50px
`pdT0 ~ pdT50`	padding-top: 0px	padding-top: 50px
`pdR0 ~ pdR50`	padding-right: 0px	padding-right: 50px
`pdB0 ~ pdB50`	padding-bottom: 0px	padding-bottom: 50px
`pdL0 ~ pdL50`	padding-left: 0px	padding-left: 50px

width

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

정렬

align--l

align--l

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

align--r

align--r

align--c

align--c

align--v

align--v

flex

flex

123

<div class="flex flex--between">
    <span>1</span>
    <span>2</span>
</div>

flex 와 modifier 를 함께 씁니다. center·end·between 은 가로 정렬입니다.

flex flex--center

123

flex flex--end

123

flex flex--between

123

flex flex--column

123

flex flex--wrap

123

상태

클래스명	코드
`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
`display--block`	display: block display: block
`display--visible`	visibility: visible
`display--hidden`	visibility: hidden
`display--inlineblock`	display: inline-block
`hidden`	display: none

버튼

btn

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

btn__brand

btn__brand
btn__brand btn__brand--dark

btn__system

btn__system

아이콘 버튼

btn_icon

btn_icon btn_icon--user
btn_icon btn_icon--manager
btn_icon btn_icon--share
btn_icon btn_icon--folder
btn_icon btn_icon--attach
btn_icon btn_icon--download
btn_icon btn_icon--file-download
btn_icon btn_icon--preview
btn_icon btn_icon--search
btn_icon btn_icon--category
btn_icon btn_icon--manage
btn_icon btn_icon--delete
btn_icon btn_icon--edit
btn_icon btn_icon--message
btn_icon btn_icon--mobile
btn_icon btn_icon--pc
btn_icon btn_icon--confirm
btn_icon btn_icon--cancel
btn_icon btn_icon--revision

입력(input)

input

<input type="text" class="input input--error" value="입력값" aria-label="input input--error">

input [readonly]

input input--error

input input--valid

select

select [readonly]

select input--error

select input--valid

select [checked]

메시지

msg

메시지 텍스트

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

msg msg--error

메시지 텍스트

msg msg--info

메시지 텍스트

msg msg--noti

메시지 텍스트

안내 박스

alert alert--error

안내 제목

안내 내용입니다. 강조 텍스트

<div class="alert alert--error-line">
    <p class="alert__title">안내 제목</p>
    <p class="alert__desc">
        <strong>강조 텍스트</strong> 안내 내용입니다.
        <a href="#" class="alert__link">바로가기</a>
    </p>
</div>

alert alert--error-line

수강만료 안내

건설안전기술 외 2건이 8.25부터 순차 만료됩니다. 만료 예정 강의 보기

체크박스

checkbox__input

선택

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

checkbox__input [disabled]

선택

checkbox__input checkbox__input--round

선택

라디오

radio__input

선택

<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

탭1
탭2

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

선택된 탭에 tab__item--active 를 붙입니다.

tab__basic

탭1
탭2

뱃지

badge

미등록
badge badge--red
기본 배송지
badge badge--line
사용
badge badge--line badge--line-gray
소멸
badge badge--line badge--line-red
선택
badge badge--gray
Best
badge badge--blue
New
badge badge--blue-light
패키지
badge badge--purple

status

접수
status status--receipt
처리중
status status--progress
답변완료
status status--done

수강완료 마크

lecture-item--done

<li class="lecture-item lecture-item--done">
    <span class="lecture-item__thumb">
        <img src="/assets/img/lecture/thumb_s.png" alt="">
        <span class="lecture-item__stamp" aria-hidden="true"><span class="lecture-item__stamp-text">수강<br>완료</span></span>
    </span>
    ...
</li>

mypage.css 에 있습니다. 상위에 lecture-item--done 이 있을 때만 마크가 보입니다. 수강상태는 본문 텍스트로 전달하므로 마크는 aria-hidden 처리합니다.

툴팁

tooltip

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

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

tooltip tooltip--top

tooltip tooltip--left

tooltip tooltip--right

레이어팝업

layer-pop

<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--xs" 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--xs</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>

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

layer-pop layer-pop--xs

layer-pop layer-pop--s

layer-pop layer-pop--m

layer-pop layer-pop--full

시스템 팝업

layer-pop--system layer-pop

<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--system layer-pop layer-pop--alert" role="dialog" aria-modal="true" aria-labelledby="guide-example-title" aria-describedby="guide-example-desc">
        <h4 class="layer-pop__title" id="guide-example-title">팝업 제목</h4>
        <div class="layer-pop__box">
            <p class="layer-pop__account">강조 문구</p>
            <dl class="layer-pop__info">
                <div class="layer-pop__info-row"><dt>항목명</dt><dd>내용</dd></div>
            </dl>
        </div>
        <ul class="layer-pop__notice" id="guide-example-desc"><li>안내 문구</li></ul>
        <div class="layer-pop__btns">
            <button type="button" class="btn btn__line layer-pop--close">취소</button>
            <button type="button" class="btn">확인</button>
        </div>
    </div>
</div>

안내 박스와 버튼 2개로 사용자에게 선택을 묻는 팝업입니다. layer-pop--alert 와 함께 씁니다.