Homeworks

Getting Started CSS Basic
GRID TYPOGRAPHY MODAL ICON FORM TABLE PAGINATION BREADCRUMB TAB DROPDOWN ACCORDION PROGRESS LABEL BADGE TOOLTIP STEP NOTIFICATION TIMELINE COLOR
CSS Advanced

GRID

DEFAULT

<!-- 그리드 부모 요소 시작 -->
<div class="row">
    <div class="col">그리드 자식요소</div>
</div>
<!-- 그리드 부모 요소 종료 -->
.row 클래스를 이용하여 그리드 부모요소를 지정하시고, .col 클래스를 이용하여 그리드 자식요소를 구성하여,
기본적인 그리드 시스템을 이용하실 수 있습니다.
.col-1
.col-2
.col-4
.col
.col-1
.col-2
.col-3
.col-4
.col-5
.col-6
.col-7
.col-8
.col-9
.col-10
.col-11
.col-12

HORIZONTAL ALIGN

<div class="row">
    <div class="col left">좌측 정렬</div>
    <div class="col center">가운데 정렬</div>
    <div class="col right">우측 정렬</div>
</div>
그리드 내용에 대해서 수평정렬을 적용하고자 한다면, 간단하게 .left .center .right 클래스로 적용이 가능합니다.
.left는 기본으로 제공되는 정렬입니다.
.col-1 .center
.col-2 .center
.col-4
.col-2

VERTICAL ALIGN

<div class="row row-table">
    <div class="col top">상단 정렬</div>
    <div class="col middle">가운데 정렬</div>
    <div class="col bottom">하단 정렬</div>
</div>
그리드 내용에 대해서 수직정렬을 적용하고자 한다면, 간단하게 .top .middle .bottom 클래스로 적용이 가능합니다.
.top은 기본으로 제공되는 정렬입니다.
(이 기능은 .row-table 레이아웃에서만 설정이 가능합니다. 그리드 부모요소에 해당 클래스를 추가해주시기 바랍니다.)
.col-1 .middle
.col-2 .middle
.col-4
.col-2

GRID PADDING

<div class="row">
    <div class="col col-pd">기본 패딩</div>
    <div class="col col-pd-lg">넓은 패딩</div>
</div>
그리드 내용에 안쪽 좌우여백(패딩)을 적용하고 싶다면 .col-pd 클래스를 적용합니다.
조금 더 넓은 여백을 원하신다면 .col-pd-lg 클래스를 적용합니다.
기본 컬럼
패딩 컬럼 (.col-pd)
넓은 패딩 컬럼 (.col-pd-lg)

AUTO GROW

<div class="row row-auto">
    <div class="col-1">.col-1 클래스로 적용되어 있으나 내용이 많으면 크기를 넓혀 줍니다.</div>
</div>
.row-auto 클래스를 그리드 부모요소에 적용한다면, 자식요소에 .col-1 등의 크기지정자는 최소 너비로 적용이 됩니다.
따라서, 지정한 너비보다 큰 내용이 들어온다면 내용에 맞게 너비를 늘려줍니다.
“The secret of life, though, is to fall seven times and to get up eight times.” ― Paulo Coelho, The Alchemist
.col-2

EQUAL WIDTH

<div class="row">
    <div class="col">contents</div>
    <div class="col">contents</div>
    <div class="col">contents</div>
</div>
HOMEWORKS의 그리드 시스템은 유연하게 동작합니다.
.col로 동작하는 모든 그리드 요소는 남은 너비에 대해서 동등한 너비를 가집니다.
.col
.col
.col

RESIZABLE

<div class="row">
    <div class="col col-auto">최소 너비를 가지는 내용</div>
    <div class="col-1 col-auto">.col-1이 적용되었으나, col-1 보다 큰 너비의 내용에 대해서도 너비를 적용 할 수 있습니다.</div>
</div>
.col-auto 클래스를 제공하시면 해당 그리드 요소에 적용된 너비가 최소 너비로 동작합니다.
또한 .col 클래스를 가진 요소에 적용한다면, 이는 남은 너비를 모두 차지하지 않고 내용의 최소 너비만큼 너비를 가집니다.
.col-1
.col-2
.col이 적용되었으나 내용 너비만큼 너비가 적용. (.col-auto)

WEIGHT COUNT

<div class="row row-weight">
    <div class="col-1">.col-1이 적용되었으나 1/12 너비가 아닌 1/3 너비</div>
    <div class="col-2">.col-2이 적용되었으나 2/12 너비가 아닌 2/3 너비</div>
</div>
.row-weight 클래스를 제공하시면 모든 그리드 자식 요소의 너비 계산이 가중치(weight)로 적용됩니다,
.col-x 등의 너비 클래스로 제공된 총합 너비에서 각각의 분포치를 나누어 너비를 제공합니다.
.col-1
.col-2
.col-3
.col-1
.col

OFFSETTING

<div class="row">
    <div class="col-2">.col-2</div>
    <div class="col-3 col-ofs-2">2/12 만큼 띄워 그리드 적용 (.col-3 .col-ofs-2)</div>
</div>
때때로 그리드를 일정 간격으로 띄워서 제공해야 하는 경우가 있습니다.
.col-ofs-x를 사용하시면 이를 효율적으로 제공하실 수 있습니다.
.col-2
2/12 만큼 띄워 그리드 적용 (.col-3 .col-ofs-2)

COMPACT

<div class="row row-compact">
    <div class="col col-pd col-auto">contents</div>
    <div class="col col-pd col-auto">contents</div>
</div>
그리드 시스템을 오직 레이아웃(배경을 지우고 안쪽에 다른 엘리먼트를 채우는)으로 사용하신다면,
때때로 첫번째와 마지막요소를 제외하고 여백을 적용하실 필요가 있습니다.
.row-compact 클래스를 제공하시면 첫번째와 마지막 자식요소의 양 극점에 여백을 무효화 시킵니다.
좌측 여백 무효화
여백 적용
여백 적용
여백 적용
여백 적용
여백 적용
우측 여백 무효화

TYPOGRAPHY

HEADERS

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
h1, h2, h3, h4, h5, h6 각각의 엘리먼트를 순차적으로 각 섹션을 대표하는 용도로 사용합니다.

H1

H2

H3

H4

H5
H6

LISTS

ul, li 엘리먼트를 서로 연관이 있는, 순차적 리스트 내용으로 사용합니다.

UL

<ul>
    <li>ITEM1</li>
    <li>ITEM2</li>
    <li>ITEM3</li>
    <li>ITEM4</li>
    <li>ITEM5</li>
</ul>
  • ITEM1
  • ITEM2
  • ITEM3
  • ITEM4
  • ITEM5

OL

<ol>
    <li>ITEM1</li>
    <li>ITEM2</li>
    <li>ITEM3</li>
    <li>ITEM4</li>
    <li>ITEM5</li>
</ol>
  1. ITEM1
  2. ITEM2
  3. ITEM3
  4. ITEM4
  5. ITEM5

BLOCKQUOTE

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
blockquote 태그를 통해 설명 내용을 강조하실 수 있습니다.
* PRIMARY 이 영역 안쪽의 내용은 강조됩니다.
NORMAL 이 영역 안쪽의 내용은 강조됩니다.
DEFAULT 이 영역 안쪽의 내용은 강조됩니다.
FORCE 이 영역 안쪽의 내용은 강조됩니다.
NOTICE 이 영역 안쪽의 내용은 강조됩니다.
COBALT 이 영역 안쪽의 내용은 강조됩니다.
DANGER 이 영역 안쪽의 내용은 강조됩니다.
ALERT 이 영역 안쪽의 내용은 강조됩니다.
SUCCESS 이 영역 안쪽의 내용은 강조됩니다.

GUIDE

<div class="guide">
    이곳에는 내용이 들어갈 수 있습니다.
</div>
.guide 클래스를 사용하시면 내용을 채울 수 있는 박스 스타일이 적용됩니다.
NORMAL - 이곳에는 내용이 들어갈 수 있습니다.
DEFAULT - 이곳에는 내용이 들어갈 수 있습니다.
FORCE - 이곳에는 내용이 들어갈 수 있습니다.
* PRIMARY - 이곳에는 내용이 들어갈 수 있습니다.
NOTICE - 이곳에는 내용이 들어갈 수 있습니다.
COBALT - 이곳에는 내용이 들어갈 수 있습니다.
DANGER - 이곳에는 내용이 들어갈 수 있습니다.
ALERT - 이곳에는 내용이 들어갈 수 있습니다.
SUCCESS - 이곳에는 내용이 들어갈 수 있습니다.

BUTTON

DEFAULT BUTTONS

<a href="#" class="btn">NORMAL</a>
<a href="#" class="btn btn-default">DEFAULT</a>
<a href="#" class="btn btn-force">FORCE</a>
<a href="#" class="btn btn-primary">PRIMARYT</a>
<a href="#" class="btn btn-notice">NOTICE</a>
<a href="#" class="btn btn-cobalt">COBALT</a>
<a href="#" class="btn btn-danger">DANGER</a>
<a href="#" class="btn btn-alert">ALERT</a>
<a href="#" class="btn btn-success">SUCCESS</a>
.btn 클래스를 링크 혹은 버튼 엘리먼트에 적용하시면,
HOMEWORKS 자체적으로 제공되는 버튼 요소를 사용하실 수 있습니다.
또한 아래 가이드를 참고하셔서 각 버튼 용도에 따라 .btn-{color} 클래스로 색상을 지정해주세요.

OUTLINE BUTTONS

<a href="#" class="btn btn-bordered">NORMAL</a>
<a href="#" class="btn btn-bordered btn-default">DEFAULT</a>
<a href="#" class="btn btn-bordered btn-force">FORCE</a>
<a href="#" class="btn btn-bordered btn-primary">PRIMARYT</a>
<a href="#" class="btn btn-bordered btn-notice">NOTICE</a>
<a href="#" class="btn btn-bordered btn-cobalt">COBALT</a>
<a href="#" class="btn btn-bordered btn-danger">DANGER</a>
<a href="#" class="btn btn-bordered btn-alert">ALERT</a>
<a href="#" class="btn btn-bordered btn-success">SUCCESS</a>
.btn-bordered 클래스를 적용하시면 버튼의 배경색이 무효화 되며,
대신 버튼색상이 테투리에 표시됩니다.

MATERIALIZED BUTTONS

<a href="#" class="btn btn-material">NORMAL</a>
<a href="#" class="btn btn-material btn-default">DEFAULT</a>
<a href="#" class="btn btn-material btn-force">FORCE</a>
<a href="#" class="btn btn-material btn-primary">PRIMARYT</a>
<a href="#" class="btn btn-material btn-notice">NOTICE</a>
<a href="#" class="btn btn-material btn-cobalt">COBALT</a>
<a href="#" class="btn btn-material btn-danger">DANGER</a>
<a href="#" class="btn btn-material btn-alert">ALERT</a>
<a href="#" class="btn btn-material btn-success">SUCCESS</a>
.btn-material 클래스를 사용하시면 버튼에 입체감을 주는 효과가 적용됩니다.

ROUNDED BUTTONS

<a href="#" class="btn btn-rounded">NORMAL</a>
<a href="#" class="btn btn-rounded btn-default">DEFAULT</a>
<a href="#" class="btn btn-rounded btn-force">FORCE</a>
<a href="#" class="btn btn-rounded btn-primary">PRIMARYT</a>
<a href="#" class="btn btn-rounded btn-notice">NOTICE</a>
<a href="#" class="btn btn-rounded btn-cobalt">COBALT</a>
<a href="#" class="btn btn-rounded btn-danger">DANGER</a>
<a href="#" class="btn btn-rounded btn-alert">ALERT</a>
<a href="#" class="btn btn-rounded btn-success">SUCCESS</a>
.btn-rounded 클래스를 적용하시면
버튼의 모서리가 둥근 형태의 스타일링을 적용하실 수 있습니다.

OUTLINE BUTTONS

<a href="#" class="btn btn-rounded btn-bordered">NORMAL</a>
<a href="#" class="btn btn-rounded btn-bordered btn-default">DEFAULT</a>
<a href="#" class="btn btn-rounded btn-bordered btn-force">FORCE</a>
<a href="#" class="btn btn-rounded btn-bordered btn-primary">PRIMARYT</a>
<a href="#" class="btn btn-rounded btn-bordered btn-notice">NOTICE</a>
<a href="#" class="btn btn-rounded btn-bordered btn-cobalt">COBALT</a>
<a href="#" class="btn btn-rounded btn-bordered btn-danger">DANGER</a>
<a href="#" class="btn btn-rounded btn-bordered btn-alert">ALERT</a>
<a href="#" class="btn btn-rounded btn-bordered btn-success">SUCCESS</a>
.btn-rounded 클래스는 .btn-bordered 클래스와 함께 사용 될 수 있습니다.

MATERIALIZED BUTTONS

<a href="#" class="btn btn-rounded btn-material">NORMAL</a>
<a href="#" class="btn btn-rounded btn-material btn-default">DEFAULT</a>
<a href="#" class="btn btn-rounded btn-material btn-force">FORCE</a>
<a href="#" class="btn btn-rounded btn-material btn-primary">PRIMARYT</a>
<a href="#" class="btn btn-rounded btn-material btn-notice">NOTICE</a>
<a href="#" class="btn btn-rounded btn-material btn-cobalt">COBALT</a>
<a href="#" class="btn btn-rounded btn-material btn-danger">DANGER</a>
<a href="#" class="btn btn-rounded btn-material btn-alert">ALERT</a>
<a href="#" class="btn btn-rounded btn-material btn-success">SUCCESS</a>
.btn-rounded 클래스는 .btn-material 클래스와 함께 사용 될 수 있습니다.

BUTTON GROUP

<div class="btn-group">
    <a href="#" class="btn" ripple="dark">NORMAL 1</a>
    <a href="#" class="btn" ripple="dark">NORMAL 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-default" ripple="dark">DEFAULT 1</a>
    <a href="#" class="btn btn-default" ripple="dark">DEFAULT 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-force" ripple="dark">FORCE 1</a>
    <a href="#" class="btn btn-force" ripple="dark">FORCE 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-primary" ripple="dark">PRIMARY 1 *</a>
    <a href="#" class="btn btn-primary" ripple="dark">PRIMARY 2 *</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-notice" ripple="dark">NOTICE 1</a>
    <a href="#" class="btn btn-notice" ripple="dark">NOTICE 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-cobalt" ripple="dark">COBALT 1</a>
    <a href="#" class="btn btn-cobalt" ripple="dark">COBALT 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-danger" ripple="dark">DANGER 1</a>
    <a href="#" class="btn btn-danger" ripple="dark">DANGER 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-alert" ripple="dark">ALERT 1</a>
    <a href="#" class="btn btn-alert" ripple="dark">ALERT 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-success" ripple="dark">SUCCESS 1</a>
    <a href="#" class="btn btn-success" ripple="dark">SUCCESS 2</a>
</div>
.btn-group 클래스는 자식 버튼요소를 하나의 그룹으로 묶어줍니다.

BUTTON GROUP - BORDERED

<div class="btn-group">
    <a href="#" class="btn btn-bordered" ripple="dark">NORMAL 1</a>
    <a href="#" class="btn btn-bordered" ripple="dark">NORMAL 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-bordered btn-default" ripple="dark">DEFAULT 1</a>
    <a href="#" class="btn btn-bordered btn-default" ripple="dark">DEFAULT 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-bordered btn-force" ripple="dark">FORCE 1</a>
    <a href="#" class="btn btn-bordered btn-force" ripple="dark">FORCE 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-bordered btn-primary" ripple="dark">PRIMARY 1 *</a>
    <a href="#" class="btn btn-bordered btn-primary" ripple="dark">PRIMARY 2 *</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-bordered btn-notice" ripple="dark">NOTICE 1</a>
    <a href="#" class="btn btn-bordered btn-notice" ripple="dark">NOTICE 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-bordered btn-cobalt" ripple="dark">COBALT 1</a>
    <a href="#" class="btn btn-bordered btn-cobalt" ripple="dark">COBALT 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-bordered btn-danger" ripple="dark">DANGER 1</a>
    <a href="#" class="btn btn-bordered btn-danger" ripple="dark">DANGER 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-bordered btn-alert" ripple="dark">ALERT 1</a>
    <a href="#" class="btn btn-bordered btn-alert" ripple="dark">ALERT 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-bordered btn-success" ripple="dark">SUCCESS 1</a>
    <a href="#" class="btn btn-bordered btn-success" ripple="dark">SUCCESS 2</a>
</div>
.btn-bordered 클래스는 버튼 그룹에도 똑같이 적용이 가능합니다.

BUTTON GROUP - MATERIAL

<div class="btn-group">
    <a href="#" class="btn btn-material" ripple="dark">NORMAL 1</a>
    <a href="#" class="btn btn-material" ripple="dark">NORMAL 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-material btn-default" ripple="dark">DEFAULT 1</a>
    <a href="#" class="btn btn-material btn-default" ripple="dark">DEFAULT 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-material btn-force" ripple="dark">FORCE 1</a>
    <a href="#" class="btn btn-material btn-force" ripple="dark">FORCE 2</a>
</div>>
<div class="btn-group">
    <a href="#" class="btn btn-material btn-primary" ripple="dark">PRIMARY 1 *</a>
    <a href="#" class="btn btn-material btn-primary" ripple="dark">PRIMARY 2 *</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-material btn-notice" ripple="dark">NOTICE 1</a>
    <a href="#" class="btn btn-material btn-notice" ripple="dark">NOTICE 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-material btn-cobalt" ripple="dark">COBALT 1</a>
    <a href="#" class="btn btn-material btn-cobalt" ripple="dark">COBALT 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-material btn-danger" ripple="dark">DANGER 1</a>
    <a href="#" class="btn btn-material btn-danger" ripple="dark">DANGER 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-material btn-alert" ripple="dark">ALERT 1</a>
    <a href="#" class="btn btn-material btn-alert" ripple="dark">ALERT 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-material btn-success" ripple="dark">SUCCESS 1</a>
    <a href="#" class="btn btn-material btn-success" ripple="dark">SUCCESS 2</a>
</div>
.btn-material 클래스는 버튼 그룹에도 똑같이 적용이 가능합니다.

BUTTON GROUP - ROUNDED

<div class="btn-group">
    <a href="#" class="btn btn-rounded" ripple="dark">NORMAL 1</a>
    <a href="#" class="btn btn-rounded" ripple="dark">NORMAL 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-rounded btn-default" ripple="dark">DEFAULT 1</a>
    <a href="#" class="btn btn-rounded btn-default" ripple="dark">DEFAULT 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-rounded btn-force" ripple="dark">FORCE 1</a>
    <a href="#" class="btn btn-rounded btn-force" ripple="dark">FORCE 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-rounded btn-primary" ripple="dark">PRIMARY 1 *</a>
    <a href="#" class="btn btn-rounded btn-primary" ripple="dark">PRIMARY 2 *</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-rounded btn-notice" ripple="dark">NOTICE 1</a>
    <a href="#" class="btn btn-rounded btn-notice" ripple="dark">NOTICE 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-rounded btn-cobalt" ripple="dark">COBALT 1</a>
    <a href="#" class="btn btn-rounded btn-cobalt" ripple="dark">COBALT 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-rounded btn-danger" ripple="dark">DANGER 1</a>
    <a href="#" class="btn btn-rounded btn-danger" ripple="dark">DANGER 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-rounded btn-alert" ripple="dark">ALERT 1</a>
    <a href="#" class="btn btn-rounded btn-alert" ripple="dark">ALERT 2</a>
</div>
<div class="btn-group">
    <a href="#" class="btn btn-rounded btn-success" ripple="dark">SUCCESS 1</a>
    <a href="#" class="btn btn-rounded btn-success" ripple="dark">SUCCESS 2</a>
</div>
.btn-rounded 클래스는 버튼 그룹에도 똑같이 적용이 가능합니다.

FILE BUTTONS

<span class="btn btn-file" ripple="dark">
    <input type="file" class="file" />
    <span>NORMAL</span>
</span>
<span class="btn btn-default btn-file" ripple="dark">
    <input type="file" class="file" />
    <span>DEFAULT</span>
</span>
<span class="btn btn-force btn-file" ripple="dark">
    <input type="file" class="file" />
    <span>FORCE</span>
</span>
<span class="btn btn-primary btn-file" ripple="dark">
    <input type="file" class="file" />
    <span>PRIMARY *</span>
</span>
<span class="btn btn-notice btn-file" ripple="dark">
    <input type="file" class="file" />
    <span>NOTICE</span>
</span>
<span class="btn btn-cobalt btn-file" ripple="dark">
    <input type="file" class="file" />
    <span>COBALT</span>
</span>
<span class="btn btn-danger btn-file" ripple="dark">
    <input type="file" class="file" />
    <span>DANGER</span>
</span>
<span class="btn btn-alert btn-file" ripple="dark">
    <input type="file" class="file" />
    <span>ALERT</span>
</span>
<span class="btn btn-success btn-file" ripple="dark">
    <input type="file" class="file" />
    <span>SUCCESS</span>
</span>
.btn-file 클래스를 사용하시면 파일 업로드 버튼을 제공 하실 수 있습니다.
소스코드를 참고해주세요.
NORMAL
DEFAULT
FORCE
PRIMARY *
NOTICE
COBALT
DANGER
ALERT
SUCCESS

BUTTON SIZES

<a href="#" class="btn btn-xs">EXTRA SMALL</a>
<a href="#" class="btn btn-sm">SMALL</a>
<a href="#" class="btn">NORMAL</a>
<a href="#" class="btn btn-lg">LARGE</a>
<a href="#" class="btn btn-xg">EXTRA LARGE</a>
HOMEWORKS에서 제공되는 모튼 버튼은 .btn-xs .btn-sm .btn-lg .btn-xg 클래스를 이용하여
다양한 사이즈를 제공하실 수 있습니다.

BLOCK TYPE BUTTON

<a href="#" class="btn btn-block">BLOCK BUTTON</a>
.btn-block 클래스를 적용하시면,
클래스가 지정된 버튼이 블럭요소로 변하여 너비를 모두 채우는 버튼 형태로 제공됩니다.

FLOATING BUTTONS

<a href="#" class="floating"><!--NORMAL FLOATING--></a>
<a href="#" class="floating floating-default"><!--DEFAULT FLOATING--></a>
<a href="#" class="floating floating-force"><!--FORCE FLOATING--></a>
<a href="#" class="floating floating-primary"><!--PRIMARY FLOATING--></a>
<a href="#" class="floating floating-notice"><!--NOTICE FLOATING--></a>
<a href="#" class="floating floating-cobalt"><!--COBALT FLOATING--></a>
<a href="#" class="floating floating-danger"><!--DANGER FLOATING--></a>
<a href="#" class="floating floating-alert"><!--ALERT FLOATING--></a>
<a href="#" class="floating floating-success"><!--SUCCESS FLOATING--></a>
.floating 클래스를 이용하시면 플로팅 형태의 원형 버튼을 제공 할 수 있습니다.
.floating-{color} 클래스를 이용하여 플로팅 버튼에 색상을 입힐 수 있습니다.

NORMAL

DEFAULT

FORCE

PRIMARY *

NOTICE

COBALT

DANGER

ALERT

SUCCESS

LABEL & BADGE

LABELS

<span class="label">NORMAL</span>
<span class="label label-default">DEFAULT</span>
<span class="label label-force">FORCE</span>
<span class="label label-primary">PRIMARY *</span>
<span class="label label-notice">NOTICE</span>
<span class="label label-cobalt">COBALT</span>
<span class="label label-danger">DANGER</span>
<span class="label label-alert">ALERT</span>
<span class="label label-success">SUCCESS</span>
.label 클래스를 인라인 엘리먼트에 적용하시면,
라벨링 용도로 사용하실 수 있는 스타일이 적용됩니다.
.label-{color} 클래스를 이용하여 라벨에 색상을 입힐 수 있습니다.
NORMAL
DEFAULT
FORCE
PRIMARY *
NOTICE
COBALT
DANGER
ALERT
SUCCESS

BADGES

<a href="#" class="btn btn-bordered">NORMAL</a>
<a href="#" class="btn btn-bordered btn-default">DEFAULT</a>
<a href="#" class="btn btn-bordered btn-force">FORCE</a>
<a href="#" class="btn btn-bordered btn-primary">PRIMARYT</a>
<a href="#" class="btn btn-bordered btn-notice">NOTICE</a>
<a href="#" class="btn btn-bordered btn-cobalt">COBALT</a>
<a href="#" class="btn btn-bordered btn-danger">DANGER</a>
<a href="#" class="btn btn-bordered btn-alert">ALERT</a>
<a href="#" class="btn btn-bordered btn-success">SUCCESS</a>
.badge 클래스를 인라인 엘리먼트에 적용하시면,
상태 뱃지 용도로 사용하실 수 있는 스타일이 적용됩니다.
.badge-{color} 클래스를 이용하여 뱃지에 색상을 입힐 수 있습니다.
NORMAL
DEFAULT
FORCE
PRIMARY *
NOTICE
COBALT
DANGER
ALERT
SUCCESS

LABEL SIZES

<span class="label label-primary label-xs">EXTRA SMALL</span>
<span class="label label-primary label-sm">SMALL</span>
<span class="label label-primary">NORMAL</span>
<span class="label label-primary label-lg">LARGE</span>
<span class="label label-primary label-xg">EXTRA LARGE</span>
.label-xs .label-sm .label-lg .label-xg 클래스를 이용하여
라벨에 다양한 사이즈를 제공 하실 수 있습니다.
EXTRA SMALL
SMALL
NORMAL
LARGE
EXTRA LARGE

BADGE SIZES

<span class="badge badge-primary badge-xs">EXTRA SMALL</span>
<span class="badge badge-primary badge-sm">SMALL</span>
<span class="badge badge-primary">NORMAL</span>
<span class="badge badge-primary badge-lg">LARGE</span>
<span class="badge badge-primary badge-xg">EXTRA LARGE</span>
.badge-xs .badge-sm .badge-lg .badge-xg 클래스를 이용하여
뱃지에 다양한 사이즈를 제공 하실 수 있습니다.
EXTRA SMALL
SMALL
NORMAL
LARGE
EXTRA LARGE

FORM

TEXT

<input type="text" class="input" input placeholder="NORMAL" />
<input type="text" class="input input-default" input placeholder="DEFAULT" />
<input type="text" class="input input-force" input placeholder="FORCE" />
<input type="text" class="input input-primary" input placeholder="PRIMARY" />
<input type="text" class="input input-notice" input placeholder="NOTICE" />
<input type="text" class="input input-cobalt" input placeholder="COBALT" />
<input type="text" class="input input-danger" input placeholder="DANGER" />
<input type="text" class="input input-alert" input placeholder="ALERT" />
<input type="text" class="input input-success" input placeholder="SUCCESS" />
폼 요소중 가장 기본적인 입력 요소입니다.
.input 클래스를 입력 요소에 적용하시기 바랍니다.
보다 더 상호적인 입력폼 요소를 원한다면 input 속성을 해당 엘리먼트에 추가하시기 바랍니다.
.input-{color} 클래스로 색상을 입히실 수 있습니다.

SELECT

<select class="input" spinner>
    <option>NORMAL OPTION1</option>
    <option>NORMAL OPTION2</option>
    <option>NORMAL OPTION3</option>
    <option>NORMAL OPTION4</option>
    <option>NORMAL OPTION5</option>
</select>
<select class="input input-default" spinner>
    <option>DEFAULT OPTION1</option>
    <option>DEFAULT OPTION2</option>
    <option>DEFAULT OPTION3</option>
    <option>DEFAULT OPTION4</option>
    <option>DEFAULT OPTION5</option>
</select>
<select class="input input-force" spinner>
    <option>FORCE OPTION1</option>
    <option>FORCE OPTION2</option>
    <option>FORCE OPTION3</option>
    <option>FORCE OPTION4</option>
    <option>FORCE OPTION5</option>
</select>
<select class="input input-primary" spinner>
    <option>PRIMARY * OPTION1</option>
    <option>PRIMARY * OPTION2</option>
    <option>PRIMARY * OPTION3</option>
    <option>PRIMARY * OPTION4</option>
    <option>PRIMARY * OPTION5</option>
</select>
<select class="input input-notice" spinner>
    <option>NOTICE OPTION1</option>
    <option>NOTICE OPTION2</option>
    <option>NOTICE OPTION3</option>
    <option>NOTICE OPTION4</option>
    <option>NOTICE OPTION5</option>
</select>
<select class="input input-cobalt" spinner>
    <option>COBALT OPTION1</option>
    <option>COBALT OPTION2</option>
    <option>COBALT OPTION3</option>
    <option>COBALT OPTION4</option>
    <option>COBALT OPTION5</option>
</select>
<select class="input input-danger" spinner>
    <option>DANGER OPTION1</option>
    <option>DANGER OPTION2</option>
    <option>DANGER OPTION3</option>
    <option>DANGER OPTION4</option>
    <option>DANGER OPTION5</option>
</select>
<select class="input input-alert" spinner>
    <option>ALERT OPTION1</option>
    <option>ALERT OPTION2</option>
    <option>ALERT OPTION3</option>
    <option>ALERT OPTION4</option>
    <option>ALERT OPTION5</option>
</select>
<select class="input input-success" spinner>
    <option>SUCCESS OPTION1</option>
    <option>SUCCESS OPTION2</option>
    <option>SUCCESS OPTION3</option>
    <option>SUCCESS OPTION4</option>
    <option>SUCCESS OPTION5</option>
</select>
폼 요소중 선택창을 제공하는 입력 요소입니다.
.input 클래스를 입력 요소에 적용하시기 바랍니다.
보다 더 상호적인 입력폼 요소를 원한다면 spinner 속성을 해당 엘리먼트에 추가하시기 바랍니다.
.input-{color} 클래스로 색상을 입히실 수 있습니다.

CHECKBOX

<label>
    <input type="checkbox" class="input" checkbox />
    <span>NORMAL</span>
</label>
<label>
    <input type="checkbox" class="input input-default" checkbox />
    <span>DEFAULT</span>
</label>
<label>
    <input type="checkbox" class="input input-force" checkbox />
    <span>FORCE</span>
</label>
<label>
    <input type="checkbox" class="input input-primary" checkbox />
    <span>PRIMARY *</span>
</label>
<label>
    <input type="checkbox" class="input input-notice" checkbox />
    <span>NOTICE</span>
</label>
<label>
    <input type="checkbox" class="input input-cobalt" checkbox />
    <span>COBALT</span>
</label>
<label>
    <input type="checkbox" class="input input-danger" checkbox />
    <span>DANGER</span>
</label>
<label>
    <input type="checkbox" class="input input-alert" checkbox />
    <span>ALERT</span>
</label>
<label>
    <input type="checkbox" class="input input-success" checkbox />
    <span>SUCCESS</span>
</label>
폼 요소중 다중 선택을 제공하는 입력 요소입니다.
.input 클래스를 입력 요소에 적용하시기 바랍니다.
보다 더 상호적인 입력폼 요소를 원한다면 checkbox 속성을 해당 엘리먼트에 추가하시기 바랍니다.
.input-{color} 클래스로 색상을 입히실 수 있습니다.

TOGGLE

<input type="radio" class="input" toggle placeholder="['Off', 'NORMAL']" />
<input type="radio" class="input input-default" toggle placeholder="['Off', 'DEFAULT']" />
<input type="radio" class="input input-force" toggle placeholder="['Off', 'FORCE']" />
<input type="radio" class="input input-primary" toggle placeholder="['Off', 'PRIMARY']" />
<input type="radio" class="input input-notice" toggle placeholder="['Off', 'NOTICE']" />
<input type="radio" class="input input-cobalt" toggle placeholder="['Off', 'COBALT']" />
<input type="radio" class="input input-danger" toggle placeholder="['Off', 'DANGER']" />
<input type="radio" class="input input-alert" toggle placeholder="['Off', 'ALERT']" />
<input type="radio" class="input input-success" toggle placeholder="['Off', 'SUCCESS']" />
폼 요소중 토글 선택을 제공하는 입력 요소입니다.
.input 클래스를 입력 요소에 적용하시기 바랍니다.
보다 더 상호적인 입력폼 요소를 원한다면 toggle="{placeholder}" 속성을 해당 엘리먼트에 추가하시기 바랍니다.
.input-{color} 클래스로 색상을 입히실 수 있습니다.

DROPDOWN

<!-- DROPDOWN [NORMAL] START -->
<a href="#" class="btn btn-default btn-dropdown-default">DROPDOWN</a>
<div class="dropdown" dropdown="true" pen=".btn-dropdown-default" direction="center">
    <a href="#" class="dropdown-menu" onClick="toast('Dropdown 1');">Dropdown Menu 1</a>
    <a href="#" class="dropdown-menu" onClick="toast('Dropdown 2');">Dropdown Menu 2</a>
    <a href="#" class="dropdown-menu" onClick="toast('Dropdown 3');">Dropdown Menu 3</a>
</div>
<!-- DROPDOWN [NORMAL] END -->

<!-- DROPDOWN [ADVANCED] START -->
<a href="#" class="btn btn-default btn-dropdown-advanced">DROPDOWN (ADVANCED)</a>
<div class="dropdown" dropdown="true" pen=".btn-dropdown-advanced" direction="center">
    <a href="#" class="dropdown-menu" onClick="toast('Dropdown 1');">
        <i class="fa fa-info-circle" aria-hidden="true"></i>
        <span>Dropdown Menu 1</span>
    </a>
    <a href="#" class="dropdown-menu" onClick="toast('Dropdown 2');">
        <i class="fa fa-heart" aria-hidden="true"></i>
        <span>Dropdown Menu 2</span>
    </a>
    <div class="dropdown-divider">&nbsp;</div>
    <a href="#" class="dropdown-menu" onClick="toast('Dropdown 3');">
        <i class="fa fa-cog" aria-hidden="true"></i>
        <span>Dropdown Menu 3</span>
    </a>
</div>
<!-- DROPDOWN [ADVANCED] END -->
드롭다운은 앞서 설명드린 spinner에서 커스터마이징이 가능한 형태로 개발된 컴포넌트 입니다.
드롭다운 버튼 요소를 만드시고 버튼이나 입력요소에 연결시켜 사용 하실 수 있습니다.
자세한 내용은 소스를 참고해주시기 바랍니다.

TOOLTIP

DIRECTIONS

<a href="#" class="btn btn-material btn-block" tooltip="LEFT" tooltip-direction="left">LEFT</a>
<a href="#" class="btn btn-material btn-block" tooltip="TOP" tooltip-direction="top">TOP</a>
<a href="#" class="btn btn-material btn-block" tooltip="RIGHT" tooltip-direction="right">RIGHT</a>
<a href="#" class="btn btn-material btn-block" tooltip="BOTTOM" tooltip-direction="bottom">BOTTOM</a>
tooltip="{tooltip title}" 속성을 이용하여 엘리먼트에 설명 타이틀을 제공하실 수 있습니다.
또한 tooltip-direction="{tooltip direction}" 속성을 이용하여 타이틀의 나타날 위치를 적용 하실 수 있습니다.

TOAST

DEFAULT TOAST

<script>toast('HELLO HOMEWOKRS!');</script>
toast 컴포넌트는 단발성 메시지 출력을 제공합니다.
HOMEWORKS 자바스크립트가 반드시 임베드 되어있어야 합니다.
자세한 사용방법은 개발자 가이드를 참고해주세요.

NOTIFICATION

DEFAULT NOTIFICATION

<script>notificaiton('HELLO HOMEWOKRS!'m '노티피케이션 노출 내용을 여기에 제공해주시기 바랍니다.');</script>
toast 노티피케이션은 장문의 타이틀, 본문 혹은 이미지와 링크를 제공 할 수 있습니다.
HOMEWORKS 자바스크립트가 반드시 임베드 되어있어야 합니다.
자세한 사용방법은 개발자 가이드를 참고해주세요.

TABLE

DEFAULT TABLE

<table class="table table-bordered">
    <thead>
        <tr>
            <th>No</th>
            <th>Subject1</th>
            <th>Subject2</th>
            <th>Subject3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <th>Contents1</th>
            <th>Contents2</th>
            <th>Contents3</th>
        </tr>
        <tr>
            <th>2</th>
            <th>Contents1</th>
            <th>Contents2</th>
            <th>Contents3</th>
        </tr>
        <tr>
            <th>3</th>
            <th>Contents1</th>
            <th>Contents2</th>
            <th>Contents3</th>
        </tr>
        <tr>
            <th>4</th>
            <th>Contents1</th>
            <th>Contents2</th>
            <th>Contents3</th>
        </tr>
        <tr>
            <th>5</th>
            <th>Contents1</th>
            <th>Contents2</th>
            <th>Contents3</th>
        </tr>
    </tbody>
</table>
.table 클래스를 테이블 엘리먼트에 제공하여
테이블 요소에 최적화 된 스타일을 적용하실 수 있습니다.
No Subject1 Subject2 Subject3
1 Contents1 Contents2 Contents3
2 Contents1 Contents2 Contents3
3 Contents1 Contents2 Contents3
4 Contents1 Contents2 Contents3
5 Contents1 Contents2 Contents3

STRIPED TABLE

<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>No</th>
            <th>Subject1</th>
            <th>Subject2</th>
            <th>Subject3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <th>Contents1</th>
            <th>Contents2</th>
            <th>Contents3</th>
        </tr>
        <tr>
            <th>2</th>
            <th>Contents1</th>
            <th>Contents2</th>
            <th>Contents3</th>
        </tr>
        <tr>
            <th>3</th>
            <th>Contents1</th>
            <th>Contents2</th>
            <th>Contents3</th>
        </tr>
        <tr>
            <th>4</th>
            <th>Contents1</th>
            <th>Contents2</th>
            <th>Contents3</th>
        </tr>
        <tr>
            <th>5</th>
            <th>Contents1</th>
            <th>Contents2</th>
            <th>Contents3</th>
        </tr>
    </tbody>
</table>
.table-striped 클래스를 적용하시면 테이블의 홀수 행이 어둡게 색상이 지정됩니다.
No Subject1 Subject2 Subject3
1 Contents1 Contents2 Contents3
2 Contents1 Contents2 Contents3
3 Contents1 Contents2 Contents3
4 Contents1 Contents2 Contents3
5 Contents1 Contents2 Contents3

HOVER TABLE

<table class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>No</th>
            <th>Subject1</th>
            <th>Subject2</th>
            <th>Subject3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <th>Contents1</th>
            <th>Contents2</th>
            <th>Contents3</th>
        </tr>
        <tr>
            <th>2</th>
            <th>Contents1</th>
            <th>Contents2</th>
            <th>Contents3</th>
        </tr>
        <tr>
            <th>3</th>
            <th>Contents1</th>
            <th>Contents2</th>
            <th>Contents3</th>
        </tr>
        <tr>
            <th>4</th>
            <th>Contents1</th>
            <th>Contents2</th>
            <th>Contents3</th>
        </tr>
        <tr>
            <th>5</th>
            <th>Contents1</th>
            <th>Contents2</th>
            <th>Contents3</th>
        </tr>
    </tbody>
</table>
.table-hover 클래스를 적용하시면
각각의 행에 마우스를 올릴 때, 해당 행이 어둡게 표시됩니다.
No Subject1 Subject2 Subject3
1 Contents1 Contents2 Contents3
2 Contents1 Contents2 Contents3
3 Contents1 Contents2 Contents3
4 Contents1 Contents2 Contents3
5 Contents1 Contents2 Contents3

FIXED SIZE COLUMNS TABLE

<table class="table table-bordered table-hover">
    <colgroup>
        <col style="width: 80px;" />
        <col style="width: 240px;" />
        <col />
    </colgroup>
    <thead>
        <tr>
            <th>No</th>
            <th>Subject</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Subject</td>
            <td>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Subject</td>
            <td>The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words. If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages. The new common language will be more simple and regular than the existing European languages. It will be as simple as Occidental; in fact, it will be Occidental. To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is.The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Subject</td>
            <td>A.wonderful.serenity.has.taken.possession.of.my.entire.soul,.like.these.sweet.mornings.of.spring.which.I.enjoy.with.my.whole.heart..I.am.alone,.and.feel.the.charm.of.existence.in.this.spot,.which.was.created.for.the.bliss.of.souls.like.mine..I.am.so.happy,.my.dear.friend,.so.absorbed.in.the.exquisite.sense.of.mere.tranquil.existence,.that.I.neglect.my.talents..I.should.be.incapable.of.drawing.a.single.stroke.at.the.present.moment;.and.yet.I.feel.that.I.never.was.a.greater.artist.than.now..When,.while.the.lovely.valley.teems.with.vapour.around.me,.and.the.meridian.sun.strikes.the.upper.surface.of.the.impenetrable.foliage.of.my.trees,.and.but.a.few.stray.gleams.steal.into.the.inner.sanctuary,.I.throw.myself.down.among.the.tall.grass.by.the.trickling.stream;.and,.as.I.lie.close.to.the.earth,.a.thousand.unknown.plants.are.noticed.by.me:.when.I.hear.the.buzz.of.the.little.world.among.the.stalks,.and.grow.familiar.with.the.countless.indescribable.forms.of.the.insects.and.flies,.then.I.feel.the.presence.of.the.Almighty,.who.formed.us.in.his.own.image,.and.the.breath</td>
        </tr>
    </tbody>
</table>
col-groupcol 태그를 사용하여 칼럼의 각각의 너비를 지정하실 수 있습니다.
칼럼에 너비를 지정하지 않는다면 해당 칼럼은 남은 너비를 나누어 가지게 됩니다.
No Subject Description
1 Subject But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee
2 Subject The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To achieve this, it would be necessary to have uniform grammar, pronunciation and more common words. If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual languages. The new common language will be more simple and regular than the existing European languages. It will be as simple as Occidental; in fact, it will be Occidental. To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is.The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators. To
3 Subject A.wonderful.serenity.has.taken.possession.of.my.entire.soul,.like.these.sweet.mornings.of.spring.which.I.enjoy.with.my.whole.heart..I.am.alone,.and.feel.the.charm.of.existence.in.this.spot,.which.was.created.for.the.bliss.of.souls.like.mine..I.am.so.happy,.my.dear.friend,.so.absorbed.in.the.exquisite.sense.of.mere.tranquil.existence,.that.I.neglect.my.talents..I.should.be.incapable.of.drawing.a.single.stroke.at.the.present.moment;.and.yet.I.feel.that.I.never.was.a.greater.artist.than.now..When,.while.the.lovely.valley.teems.with.vapour.around.me,.and.the.meridian.sun.strikes.the.upper.surface.of.the.impenetrable.foliage.of.my.trees,.and.but.a.few.stray.gleams.steal.into.the.inner.sanctuary,.I.throw.myself.down.among.the.tall.grass.by.the.trickling.stream;.and,.as.I.lie.close.to.the.earth,.a.thousand.unknown.plants.are.noticed.by.me:.when.I.hear.the.buzz.of.the.little.world.among.the.stalks,.and.grow.familiar.with.the.countless.indescribable.forms.of.the.insects.and.flies,.then.I.feel.the.presence.of.the.Almighty,.who.formed.us.in.his.own.image,.and.the.breath

PAGINATION

PAGINATION

<div class="pagination">
    <a href="#" class="arrow">Prev</a>
    <a href="#" class="active">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#" class="arrow">Next</a>
</div>
.pagination 클래스를 적용하여 목록의 페이징 버튼 제공하실 수 있습니다.
소스를 참고하시기 바랍니다.

TAB

DEFAULT TAB

<div class="tab" tab="true">
    <a href="#" class="tab-item active">Title 1</a>
    <a href="#" class="tab-item">Title 2</a>
</div>
<div class="tab-container">
    <div class="tab-container-item">
        <h2 class="section-title">
            <span class="pull-left">Sub title 1</span>
        </h2>
        <div class="guide">
            Tab 1 contents
        </div>
    </div>
    <div class="tab-container-item">
        <h2 class="section-title">
            <span class="pull-left">Sub title 2</span>
        </h2>
        <div class="guide">
            Tab 2 contents
        </div>
    </div>
</div>
.tab 클래스와 tab="true"" 속성을 같이 제공하시면
한정된 공간에서 버튼을 선택해가며 여러 내용을 효과적으로 제공하실 수 있습니다.

Sub title 1

Tab 1 contents

Sub title 2

Tab 2 contents

PANEL

PANEL

<div class="panel">
    <div class="panel-header">
        <h3>PANEL NORMAL</h3>
    </div>
    <div class="panel-body">
        <strong>패널</strong> 요소입니다.<br />
        패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-header">
        <h3>PANEL DEFAULT</h3>
    </div>
    <div class="panel-body">
        <strong>패널</strong> 요소입니다.<br />
        패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.
    </div>
</div>
<div class="panel panel-force">
    <div class="panel-header">
        <h3>PANEL FORCE</h3>
    </div>
    <div class="panel-body">
        <strong>패널</strong> 요소입니다.<br />
        패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.
    </div>
</div>
<div class="panel panel-primary">
    <div class="panel-header">
        <h3>PANEL PRIMARY *</h3>
    </div>
    <div class="panel-body">
        <strong>패널</strong> 요소입니다.<br />
        패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.
    </div>
</div>
<div class="panel panel-notice">
    <div class="panel-header">
        <h3>PANEL NOTICE</h3>
    </div>
    <div class="panel-body">
        <strong>패널</strong> 요소입니다.<br />
        패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.
    </div>
</div>
<div class="panel panel-cobalt">
    <div class="panel-header">
        <h3>PANEL COBALT</h3>
    </div>
    <div class="panel-body">
        <strong>패널</strong> 요소입니다.<br />
        패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.
    </div>
</div>
<div class="panel panel-danger">
    <div class="panel-header">
        <h3>PANEL DANGER</h3>
    </div>
    <div class="panel-body">
        <strong>패널</strong> 요소입니다.<br />
        패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.
    </div>
</div>
<div class="panel panel-alert">
    <div class="panel-header">
        <h3>PANEL ALERT</h3>
    </div>
    <div class="panel-body">
        <strong>패널</strong> 요소입니다.<br />
        패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.
    </div>
</div>
<div class="panel panel-success">
    <div class="panel-header">
        <h3>PANEL SUCCESS</h3>
    </div>
    <div class="panel-body">
        <strong>패널</strong> 요소입니다.<br />
        패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.
    </div>
</div>
.pagination 클래스를 적용하여 목록의 페이징 버튼 제공하실 수 있습니다.
소스를 참고하시기 바랍니다.

PANEL NORMAL

패널 요소입니다.
패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.

PANEL DEFAULT

패널 요소입니다.
패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.

PANEL FORCE

패널 요소입니다.
패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.

PANEL PRIMARY *

패널 요소입니다.
패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.

PANEL NOTICE

패널 요소입니다.
패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.

PANEL COBALT

패널 요소입니다.
패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.

PANEL DANGER

패널 요소입니다.
패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.

PANEL ALERT

패널 요소입니다.
패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.

PANEL SUCCESS

패널 요소입니다.
패널 요소를 통하여 제목과 본문이 연결된 하나의 그룹 컨텐츠를 제공하실 수 있습니다.

MODAL

DEFAULT MODAL

<div class="modal default-modal">
    <div class="modal-header">
        <h2>DEFAULT MODAL</h2>
        <a href="#" class="btn-close">
            <i class="pe-7s-close"></i>
        </a>
    </div>
    <div class="modal-body">
        MODAL BODY CONTENT
    </div>
    <div class="modal-footer">
        <a href="#" class="btn btn-sm btn-default">CANCEL</a>
        <a href="#" class="btn btn-sm btn-primary">OK</a>
    </div>
</div>
<a href="#" modal="true" pen=".default-modal" class="btn btn-block btn-force btn-lg">OPEN MODAL</a>
.modal 클래스로 팝업 모달 요소를 만들고,
modal="true", pen="{modal selector}" 속성을 모달을 열 수 있는 버튼에 적용하셔서
사용자를 위한 팝업 모달을 제공하실 수 있습니다.
소스를 참고하시기 바랍니다.

COLOR

PALETTE

컬러 팔레트는 HOMEWORKS에서 주로 사용하는 색상을 제공합니다.
HOMEWORKS 프레임워크와 일관화 된 사이트를 스타일링 하실 때 참고하시기 바랍니다.
아래 색상 요소를 클릭하면, 색상이 자동으로 클립보드에 복사됩니다.

DEFAULT

GENERAL #9FA2A9 100%
DARK #505155 50%
SEMI DARK #787A7F 75%
SEMI LIGHT #B7B9BE 125%
LIGHT #CFD0D4 150%

PRIMARY

GENERAL #5369E3 100%
DARK #2A3572 50%
SEMI DARK #3E4FAB 75%
SEMI LIGHT #7D8EEA 125%
LIGHT #A9B4F1 150%

COBALT

GENERAL #455370 100%
DARK #232A38 50%
SEMI DARK #343E54 75%
SEMI LIGHT #7D8EEA 125%
LIGHT #A2A9B7 150%

FORCE

GENERAL #5E636C 100%
DARK #2F3236 50%
SEMI DARK #474B51 75%
SEMI LIGHT #868A90 125%
LIGHT #AEB1B5 150%

NOTICE

GENERAL #4B98FF 100%
DARK #264C80 50%
SEMI DARK #3872C0 75%
SEMI LIGHT #77B1FF 125%
LIGHT #A5CBFF 150%

DANGER

GENERAL #F44747 100%
DARK #7A2424 50%
SEMI DARK #B83535 75%
SEMI LIGHT #F77474 125%
LIGHT #F9A3A3 150%

ALERT

GENERAL #FF8556 100%
DARK #80432B 50%
SEMI DARK #C06441 75%
SEMI LIGHT #FFA380 125%
LIGHT #FFC2AA 150%

SUCCESS

GENERAL #008D8B 100%
DARK #004746 50%
SEMI DARK #006A69 75%
SEMI LIGHT #3FA9A8 125%
LIGHT #7FC6C5 150%