홈 로그인 회원가입 사이트맵
My Library

대북지원정보시스템 메인이동

정보교류협력기관

UI Kit 정의

HTML 주석 기본 사용

<!-- [Start] HTML 주석 기본 사용 -->
HTML 내용 작성
<!-- [End] HTML 주석 기본 사용 -->

CSS 주석 기본 사용

/* =======================================*/
/* 대분류 > 중분류 > 소분류
/* (html/index.html)
/* =======================================*/
CSS 내용 작성

JS 주석 기본 사용

// =======================================
// JS 플러그인명 (URL 제공)
// =======================================
JS 내용 작성
or

// 한줄라인 주석 사용 시
JS 내용 작성

FortAwesome 활용 방법

요소(Element)에 적용할 경우

  1. http://fontawesome.io/cheatsheet 로 접속하여 "FortAwesome Cheatsheet"에서 적용할 아이콘 폰트를 찾아 아이콘 폰트의 이름을 복사한다.
    예) "FortAwesome Cheatsheet"에 있는 " fa-pagelines" 나뭇잎() 아이콘 폰트를 사용하고 싶을 경우 아이콘 폰트의 이름 "fa-pagelines"을 복사한다.
  2. 아이콘 폰트를 추가 할 적합한 요소(Element)를 삽입하여 복사한 아이콘 폰트의 이름(fa-pagelines)을 "fa"와 함께 class="fa fa-pagelines"와 같이 적용한다.
    class="fa fa-pagelines"는 아이콘 폰트체(FortAwesome)와 폰트영역(Display)을 설정하는 기준이 되는 스타일이기 때문에 반드시 함께 적용해야 한다.
    예) <span class="fa fa-pagelines"></span>
  3. FortAwesome 아이콘 사이즈는 스타일(CSS) 속성 "font-size : 사이즈;" 로 적용 가능하다.
  4. FortAwesome 아이콘 색상은 스타일(CSS) 속성 "color : 색상;" 로 적용 가능하다.
<p><span class="fa fa-pagelines"></span> FortAwesome 활용 방법</p>

FortAwesome 활용 방법 

p {
    color: #999;
}
p .fa {
    font-size: 14px;
    color: #0ba44c;
}

FortAwesome 활용 방법

가상요소(Before, After)에 적용할 경우

  1. http://fontawesome.io/cheatsheet 로 접속하여 "FortAwesome Cheatsheet"에서 적용할 아이콘 폰트를 찾아 아이콘 폰트의 이름을 복사한다.
    예) "FortAwesome Cheatsheet"에 있는 " fa-fort-awesome" 성() 아이콘 폰트를 사용하고 싶을 경우 아이콘 폰트의 이름 "fa-fort-awesome"을 복사한다.
  2. 복사한 "fa-fort-awesome"를 font-awesome.css에서 검색하여 content: "아이콘 코드";를 복사한다.
  3. 요소(Element)를 삽입하여 class를 설정하고 가상요소(Before, After)에 복사한 content: "아이콘 코드"; 속성을 font-family: FontAwesome; 과 함께 스타일에 적용한다.
  4. FortAwesome 아이콘 사이즈는 스타일(CSS) 속성 "font-size : 사이즈;" 로 적용 가능하다.
  5. FortAwesome 아이콘 색상은 스타일(CSS) 속성 "color : 색상;" 로 적용 가능하다.
<ul>
    <li class="icon-fortawesome-before">FortAwesome :before 활용 방법</li>
    <li class="icon-fortawesome-after">FortAwesome :after 활용 방법</li>
</ul>
.icon-fortawesome-before:before {
    font-family: FontAwesome;
    content: "\f286";
    margin-right: 4px;
}
.icon-fortawesome-after {
    color: #999;
}
.icon-fortawesome-afte:after {
    font-family: FontAwesome;
    font-size: 14px;
    color: #4d52de;
    content: "\f286";
    margin-left: 4px;
}
  • FortAwesome :before 활용 방법
  • FortAwesome :after 활용 방법

Typography

타이포그라피 설계

reset 폰트 사이즈 : 10px = 1rem
본문 폰트 사이즈 : 15px
본문 행간 비율 : 1.4배 (본문 폰트 사이즈 * 행간 비율)

타이포그라피 설계는 본문 폰트 사이즈와 행간 비율을 사용자가 글을 읽는데 불편함이 없도록 가독성이 좋게 설정을 해준다. 행간의 높이는 본문 폰트 사이즈 * 행간 비율로 설정하는데 소수점이 떨어지지 않도록 설계하는 것이 가독성을 높이는데 도움이 된다.

p 본문 사이즈 / 행간 사이즈 : 15px / 21px

h6 폰트 사이즈 : 16px
h5 폰트 사이즈 : 18px

h4 폰트 사이즈 : 20px

h3 폰트 사이즈 : 23px

h2 폰트 사이즈 : 26px

reset 폰트 사이즈 : 10px = 1rem
본문 폰트 사이즈 : 15px
본문 행간 비율 : 1.4배 (본문 폰트 사이즈 * 행간 비율)

타이포그라피 설계는 본문 폰트 사이즈와 행간 비율을 사용자가 글을 읽는데 불편함이 없도록 가독성이 좋게 설정을 해준다. 행간의 높이는 본문 폰트 사이즈 * 행간 비율로 설정하는데 소수점이 떨어지지 않도록 설계하는 것이 가독성을 높이는데 도움이 된다.

p 본문 사이즈 / 행간 사이즈 : 15px / 21px

h6 폰트 사이즈 : 16px
h5 폰트 사이즈 : 18px

h4 폰트 사이즈 : 20px

h3 폰트 사이즈 : 23px

h2 폰트 사이즈 : 26px

Input

설명이 있는 기본 인풋 스타일

<div class="input-type">
    <label for="label-name">내용 설명</label>
    <input type="text" id="label-name" name="label-name" />
</div>

설명이 없는 기본 인풋 스타일

<div class="input-type">
    <input type="text" aria-label="내용 설명" />
</div>

설명이 없는 너비 100% 인풋 스타일

<div class="input-type full">
    <input type="text" aria-label="내용 설명" />
</div>

input-type 클래스의 형재요소 클래스로 full 을 추가해준다.
ex) <div class="input-type full">

Placeholder가 있는 인풋 스타일

<div class="input-type">
    <input type="text" placeholder="Placeholder 내용" aria-label="내용 설명" />
</div>

전화번호 인풋 스타일

<div class="input-type tel">
    <div class="dialog">
        <input class="country-code" type="tel" aria-label="지역번호">
    </div>
    <div class="dialog">
        <input class="first-number" type="tel" aria-label="앞번호">
    </div>
    <div class="dialog">
        <input class="last-number" type="tel" aria-label="뒷번호">
    </div>
</div>

달력 인풋 스타일

~ 
<div class="input-type date">
    <div class="start-date">
        <input type="text" aria-label="시작 년, 월, 일">
        <button type="button">
            <img src="../assets/images/icon/icon-link-04.png" width="21px" height="23px" alt="선택">
        </button>
    </div>
    <span class="and">~</span>
    <div class="end-date">
        <input type="text" aria-label="마지막 년, 월, 일">
        <button type="button">
            <img src="../assets/images/icon/icon-link-04.png" width="21px" height="23px" alt="선택">
        </button>
    </div>
</div>

이메일 인풋 스타일

<div class="input-type e-mail">
    <div class="email">
        <input class="email-id" type="text" aria-label="이메일 아이디">
    </div>
    <div class="email">
        <input class="email-address" type="text" aria-label="이메일 주소 직접입력">
    </div>
</div>
<div class="select-box e-mail">
    <label for="email-search">직접입력</label>
    <select id="email-search">
        <option selected="selected">직접입력</option>
        <option>naver.com</option>
        <option>daum.net</option>
        <option>nate.com</option>
        <option>google.com</option>
        <option>yahoo.com</option>
    </select>
</div>

텍스트박스 스타일

<textarea class="textarea" placeholder="내용 설명" aria-label="Placeholder 내용 설명"></textarea>

Select Box

셀렉트 박스 기본 스타일

<div class="select-box">
    <label for="search-type-01">검색</label>
    <select id="search-type-01">
        <option selected="selected">검색</option>
        <option>키워드01</option>
        <option>키워드02</option>
        <option>키워드03</option>
        <option>키워드04</option>
        <option>키워드05</option>
    </select>
</div>

너비 100% 셀렉트 박스 기본 스타일

<div class="select-box full">
    <label for="search-type-02">검색</label>
    <select id="search-type-02">
        <option selected="selected">검색</option>
        <option>키워드01</option>
        <option>키워드02</option>
        <option>키워드03</option>
        <option>키워드04</option>
        <option>키워드05</option>
    </select>
</div>

select-box 클래스의 형재요소 클래스로 full 을 추가해준다.
ex) <div class="select-box full">

Check box

<div class="checkbox-type">
    <input type="checkbox" id="checkbox-id" name="test-name">
    <label for="checkbox-id">Checkbox Test</label>
</div>

Radio Button

<div class="radio-type">
    <input type="radio" id="radio-id-01" name="test-name">
    <label for="radio-id-01">Radio Button Test 01</label>
    <input type="radio" id="radio-id-02" name="test-name">
    <label for="radio-id-02">Radio Button Test 02</label>
</div>

Button Style

여러개 버튼 구성 시

btn-set-area

btn-set-area col-1

btn-set-area col-2

btn-set-area col-3

btn-set-area col-4

btn-set-area col-5

<div class="btn-set-area col-1">
    <button></button>
</div>
<div class="btn-set-area col-2">
    <button></button>
    <button></button>
</div>
<div class="btn-set-area col-3">
    <button></button>
    <button></button>
    <button></button>
</div>
<div class="btn-set-area col-4">
    <button></button>
    <button></button>
    <button></button>
    <button></button>
</div>
<div class="btn-set-area col-5">
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
</div>
두개의 이상의 버튼을 사용할 때는 "btn-set-area" class로 버튼 요소들을 감싸 줍니다.
버튼이 1개 일때 "btn-set-area col-1" class를 추가 합니다.
버튼이 2개 이상 일때 "btn-set-area col-2" class를 추가 합니다.
버튼이 3개 이상 일때 "btn-set-area col-3" class를 추가 합니다.
버튼이 4개 이상 일때 "btn-set-area col-4" class를 추가 합니다.
버튼이 5개 이상 일때 "btn-set-area col-5" class를 추가 합니다.
각 버튼은 특성에 따라 엘리먼트를 시멘틱하게 사용하고, 버튼 사이즈와 버튼 색상 class를 활용하여 디자인 합니다.
col-num을 설정 안할 경우 Tablet(760px) 이하 디바이스는 2column으로 반응형 처리되어 디자인 됩니다.
ex) class="btn-out-size btn-defult" 버튼사이즈(btn-out-size)와 버튼색상(btn-defult) class를 함께 적용합니다.

버튼 사이즈 class 설정

height: 27px, padding-left: 20px, padding-right: 20px

height: 30px, padding-left: 20px, padding-right: 20px

height: 35px, padding-left: 20px, padding-right: 20px

height: 40px, padding-left: 20px, padding-right: 20px

height: 23px, padding-left: 10px, padding-right: 10px

height: 30px, padding-left: 10px, padding-right: 10px

<button class="btn-content-size" type="button">컨텐츠 버튼</button>
<button class="btn-item-size" type="button">아이템 버튼</button>
<button class="btn-in-size" type="button">테이블 내부 버튼버튼</button>
<button class="btn-out-size" type="button">테이블 외부 버튼</button>
<button class="btn-table-view-size" type="button">테이블 상세 버튼</button>
<button class="btn-table-board-size" type="button">테이블 게시판 버튼</button>
버튼 사이즈는 6가지 타입으로 "컨텐츠 버튼, 아이템 버튼, 테이블 내부 버튼 사이즈, 테이블 외부 버튼, 테이블 상세 버튼, 테이블 게시판 버튼"이 있습니다.
컨텐츠 버튼 사이즈는 "btn-content-size" class를 적용합니다.
아이템 버튼 사이즈는 "btn-item-size" class를 적용합니다.
테이블 내부 버튼 사이즈는 "btn-in-size" class를 적용합니다. (input, select, buttom 등의 요소와 사용)
테이블 외부 버튼 사이즈는 "btn-out-size" class를 적용합니다.
테이블 상세 버튼 사이즈는 "btn-table-view-size" class를 적용합니다.
테이블 게시판 버튼 사이즈는 "btn-table-board-size" class를 적용합니다.

버튼 색상 class 설정

<button class="btn-defult" type="button">기본 색상</button>
<button class="btn-blue" type="button">활성화 색상</button>
<button class="btn-gray" type="button">더보기 색상</button>
<button class="btn-orange" type="button">테이블 상세 색상</button>
<button class="btn-green" type="button">테이블 게시판 색상</button>
버튼 사이즈는 6가지 타입으로 "컨텐츠 버튼, 아이템 버튼, 테이블 내부 버튼 사이즈, 테이블 외부 버튼, 테이블 상세 버튼, 테이블 게시판 버튼"이 있습니다.
기본 색상은 "btn-defult" class를 적용합니다.
활성화 색상은 "btn-blue" class를 적용합니다.
더보기 색상은 "btn-gray" class를 적용합니다.
테이블 상세 색상은 "btn-orange" class를 적용합니다.
테이블 게시판 색상은 "btn-green" class를 적용합니다.

아이콘&버튼 타입 설정

아이콘 버튼 
<div class="btn-set-area col-3">
    <label class="btn-out-size btn-blue">
        <span class="fa fa-search before" aria-hidden="true"></span>아이콘 버튼
        <input type="button">
    </label>
    <a href="#" class="btn-out-size btn-gray" role="button">
        아이콘 버튼<span class="fa fa-search after" aria-hidden="true"></span>
    </a>
    <button class="btn-out-size btn-blue" type="button">
        <span class="fa fa-search before" aria-hidden="true"></span>아이콘 버튼
    </button>
</div>
버튼 엘리먼트는 역할에 따라 요소를 사용하고 버튼 사이즈과 버튼 색상 class를 적절히 사용하여 디자인 하시면 됩니다.
아이콘 추가 시 버튼 요소 내부에 <span> or <img> 요소를 사용하여 아이콘(img or FontAwesome) 추가한다.
아이콘을 글자 앞쪽에 배치할 때는 글자 앞으로 아이콘 요소를 배치하고 아이콘 요소에 "before" class를 적용하면 아이콘 정렬이 됩니다.
아이콘을 글자 뒤쪽에 배치할 때는 글자 뒤로 아이콘 요소를 배치하고 아이콘 요소에 "after" class를 적용하면 아이콘 정렬이 됩니다.

더보기 버튼 설정

<button class="btn-more-size btn-gray full">
    더보기 버튼<span class="icon after" aria-hidden="true"></span>
</button>

Table Style

반응형 테이블 (List 내부 타입)

(표 제목)의 표입니다.
번호 반납예정일 소장위치 등록번호 청구기호 도서상태 서비스
1 EM0000065224 임시서고 342 안36 열람가능 2017.10.01 
<table id="data-table-num" class="table-view-type list-type">
    <caption>(표 제목)의 표입니다.</caption>
    <col width="100">
    <col width="auto">
    <col width="100">
    <col width="100">
    <col width="100">
    <thead>
        <tr>
            <th scope="col">제목1</th>
            <th scope="col">제목2</th>
            <th scope="col">제목3</th>
            <th scope="col">제목4</th>
            <th scope="col">제목5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>컬럼1</td>
            <td>컬럼2</td>
            <td>컬럼3</td>
            <td>컬럼4</td>
            <td>컬럼5</td>
        </tr>
    </tbody>
</table>

<caption>의 설명은 "(제목)의 표입니다." 와 같이 일관되고 간략하게 제목을 작성합니다.
복잡한 구조의 테이블 일 경우 청각만으로도 표의 구조가 그려질 수 있도록 요약 정보를 제공하여 표를 이해하는데 도움이 되도록 작성합니다.
각 제목(컬럼)의 너비는 <col> 요소에 width 속성으로 고정 너비를 설정하고 유동 너비는 auto로 설정하여 상대적으로 변화되도록 처리합니다.
반응형 테이블을 적용 할 경우 "table-view-type" class의 형재요소로 "list-type" class와 "data-table-num"을 id로 추가하면 중단점에 따라 리스트(list-type) 형태로 변화됩니다.
ex) <table id="data-table-num" class="table-view-type list-type">
"list-type"을 빼면 기본 테이블로 적용되고 중단점에 따라 column을 감추는 형태로 반응형 테이블을 사용하면 됩니다. (모바일에서의 column 감추기 가능)
th, td 요소의 텍스트는 기본 설정으로 영역보다 텍스트가 길어지면 말줄임 처리가 되도록 처리되어 있습니다.
말줄임 처리를 해제 하려면 "table-view-type" class의 형재요소로 "h-auto" class를 추가해주면 말줄임 처리가 해제되고 영역보다 텍스트 내용이 길어지면 줄바꿈 처리가 됩니다.

// table > th의 Column title 값을 td:before에 할당
assignTableHeading( $('#data-table-num') );

"list-type"을 적용하는 반응형 테이블일 경우 table에 id를 부여하되 "#data-table-num" 와 같이 네이밍을 고유한 id를 사용하여 " num(순차적번호)" 부분을 다르게 작성하여 js파일에서 함수로 "assignTableHeading( $('#data-table-num') );" 이와 같이 테이블 id를 호출해 줍니다.

반응형 테이블 (List 내부 column 숨김 타입)

(표 제목)의 표입니다.
이미지 자료명 저자 출판사 출판년
정밀 메커니즘 설계 : 자동화·메카트로닉스 시스템정밀 이진갑 저 문운당 2015
미식의 도시 뉴욕 : 세계의 푸디가 모이는 맛의 천국 : 뉴욕맛집 완벽가이드 제이민 지음 중앙books 2016 
<table class="table-view-type">
    <caption>(표 제목)의 표입니다.</caption>
    <col width="100">
    <col width="auto">
    <col class="col-hidden" width="100">
    <col class="col-hidden" width="100">
    <col class="col-hidden" width="100">
    <thead>
        <tr>
            <th scope="col">제목</th>
            <th scope="col">제목</th>
            <th class="col-hidden" scope="col">제목</th>
            <th class="col-hidden" scope="col">제목</th>
            <th class="col-hidden" scope="col">제목</th>
        </tr>
    </thead>
    <tbody class="align-left col-2">
        <tr>
            <td>컬럼</td>
            <td>컬럼</td>
            <td class="col-hidden">컬럼</td>
            <td class="col-hidden">컬럼</td>
            <td class="col-hidden">컬럼</td>
        </tr>
        <tr>
            <td>컬럼</td>
            <td>컬럼</td>
            <td class="col-hidden">컬럼</td>
            <td class="col-hidden">컬럼</td>
            <td class="col-hidden">컬럼</td>
        </tr>
    </tbody>
</table>

중단점에 따른 컬럼 감추기는 "col-hidden" class를 사용하여 각 <col>, <th>, <td> 요소에 적용합니다.
테이블은 기본 가운데 정렬로 처리되어 있으며, 일부 컬럼의 좌측 정렬이 필요할 경우 <tbody>요소에 "align-left col-num" class를 적용하여 사용하면 되고 -num은 column 1~10까지 적용 가능합니다.
ex) 두번째 컬럼의 좌측 정렬이 필요한 경우 : <tbody class="align-left col-2">

반응형 테이블 (Board list 타입)

(표 제목)의 표입니다.
번호 제목 첨부 등록일 조회수
5 2017년 통일부 신진연구자 정책연구 과제 공모 안내 첨부파일명.hwp 2017-09-27 174
4 북한자료센터 서비스 일정 안내 2017-09-27 174
3 북한자료센터 이사기간 휴관 안내 2017-09-27 174
2 북한자료센터 홈페이지 일시 중단 안내 2017-09-27 174
1 북한자료센터 홈페이지 일시 중단 안내 2017-09-27 174 
<table class="table-board-type-num list-type">
    <caption>(표 제목)의 표입니다.</caption>
    <col width="60">
    <col width="auto">
    <col width="70">
    <col width="100">
    <col width="80">
    <thead>
        <tr>
            <th scope="col">제목</th>
            <th scope="col">제목</th>
            <th scope="col">제목</th>
            <th scope="col">제목</th>
            <th scope="col">제목</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
assignTableHeading( $('#demo-data-table-01') );
assignTableHeading( $('#demo-data-table-02') );

반응형 중단점에 따라 리스트(list-type) 테이블로 변화를 적용할 경우 "table-board-type" class의 형재요소로 "list-type" class를 추가해 줍니다.
ex) <table class="table-board-type list-type">

반응형 테이블 (Board list column 숨김 타입)

(표 제목)의 표입니다.
번호 제목 첨부 등록일 조회수
5 2017년 통일부 신진연구자 정책연구 과제 공모 안내 첨부파일명.hwp 2017-09-27 174
4 북한자료센터 서비스 일정 안내 2017-09-27 174
3 북한자료센터 이사기간 휴관 안내 2017-09-27 174
2 북한자료센터 홈페이지 일시 중단 안내 2017-09-27 174
1 북한자료센터 홈페이지 일시 중단 안내 2017-09-27 174 
<table class="table-board-type">
    <caption>(표 제목)의 표입니다.</caption>
    <col class="col-hidden" width="60">
    <col width="auto">
    <col width="70">
    <col class="col-hidden" width="100">
    <col class="col-hidden" width="80">
    <thead>
        <tr>
            <th class="col-hidden" scope="col">제목</th>
            <th scope="col">제목</th>
            <th scope="col">제목</th>
            <th class="col-hidden" scope="col">제목</th>
            <th class="col-hidden" scope="col">제목</th>
        </tr>
    </thead>
    <tbody class="align-left col-2">
        <tr>
            <td class="col-hidden"></td>
            <td></td>
            <td></td>
            <td class="col-hidden"></td>
            <td class="col-hidden"></td>
        </tr>
        <tr>
            <td class="col-hidden"></td>
            <td></td>
            <td></td>
            <td class="col-hidden"></td>
            <td class="col-hidden"></td>
        </tr>
    </tbody>
</table>

중단점에 따른 컬럼 감추기는 "col-hidden" class를 사용하여 각 <col>, <th>, <td> 요소에 적용합니다.
테이블은 기본 가운데 정렬로 처리되어 있으며, 일부 컬럼의 좌측 정렬이 필요할 경우 <tbody>요소에 "align-left col-num" class를 적용하여 사용하면 되고 -num은 column 1~10까지 적용 가능합니다.
ex) 두번째 컬럼의 좌측 정렬이 필요한 경우 : <tbody class="align-left col-2">

반응형 테이블 (Board view 타입)

공지사항의 타이틀은 세로정렬로 되어있습니다.
제목 2017년 통일부 신진연구자 정책연구 과제 공모 안내
등록일 2017-09-27
조회수 174
첨부파일 공고문.hwp 
북한 및 통일문제에 관심이 있는 신진연구자들에게 연구 기회를 부여하고 참신한 정책 연구 결과를 수렴하기 위하여 다음과 같이 정책연구과제를 공모하오니 많은 참여 바랍니다.

 □ 사업 개요 
  o 공모를 통해 연구자(연구기관) 선정, 정책연구용역 계약 체결 
    - 연구자의 경우, 박사학위 취득일로부터 5년 以內(전공 불문)
  o 선발 예정 인원 : 10명
  o 연구비 : 1주제 당 1,000만원
    ※ 응모기관(자) 중복 응모 불가
  o 선정방법 : 내?외부 심사위원단 구성, 연구계획서 평가
 
<table class="table-board-type">
    <caption>(표 제목)의 표입니다.</caption>
    <col width="140">
    <col width="auto">
    <tbody class="align-left col-1">
        <tr>
            <th>제목</th>
            <td class="title">제목 색상</td>
        </tr>
        <tr>
            <th>제목</th>
            <td></td>
        </tr>
        <tr>
            <th>제목</th>
            <td></td>
        </tr>
        <tr>
            <th>제목</th>
            <td></td>
        </tr>
        <tr>
            <td colspan="2">
                <pre>상세 내용</pre>
            </td>
        </tr>
    </tbody>
</table>

col-num" class는 td 기준의 nth-of-type(num) 입니다.
ex) 위 표에서 두번째 컬럼(td)의 좌측 정렬이 필요한 경우 : <tbody class="align-left col-1"> 적용합니다.

목차 리스트

이전글
이전글이 없습니다.
다음글
북한자료센터 서비스 일정 안내
<div class="table-board-prev-next-area">
    <dl>
        <dt><a href="#">이전글<span class="fa fa-sort-up"></span></a></dt>
        <dd><a href="#">이전글이 없습니다.</a></dd>
    </dl>
    <dl>
        <dt><a href="#">다음글<span class="fa fa-sort-down"></span></a></dt>
        <dd><a href="#">북한자료센터 서비스 일정 안내</a></dd>
    </dl>
</div>

Paging Style

1 19
1 2 3 4 5 
<div class="paging">
    <a class="first-prev" aria-label="처음으로 이동" href role="button"></a>
    <a class="prev" aria-label="이전 페이지" href role="button"></a>
    <div class="mobile-page">
        <span class="now-page" aria-label="현재 페이지">1</span>
        <span class="all-page" aria-label="총 페이지">19</span>
    </div>
    <div class="pc-page">
        <a href role="button">1</a>
        <a href role="button">2</a>
        <!-- 선택된 버튼 class="selected"로 제어 -->
        <a href role="button" class="selected">3</a>
        <a href role="button">4</a>
        <a href role="button">5</a>
    </div>
    <a class="next" aria-label="다음 페이지" href role="button"></a>
    <a class="last-next" aria-label="끝으로 이동" href role="button"></a>
</div>

선택된 버튼은 <a> 요소에 selected 클래스를 적용합니다.
ex) <a href role="button" class="selected">

Tab Menu Area

탭 메뉴 기본 스타일

탭 메뉴 1 탭 메뉴 2 탭 메뉴 3 탭 메뉴 4 탭 메뉴 5
탭 패널 영역 입니다. 
<div class="tab-area">
    <div class="tab-menu">
        <a class="active" href="#" role="tab">탭 메뉴 1</a>
        <a href="#" role="tab">탭 메뉴 2</a>
        <a href="#" role="tab">탭 메뉴 3</a>
        <a href="#" role="tab">탭 메뉴 4</a>
        <a href="#" role="tab">탭 메뉴 5</a>
    </div>
    <div class="tab-panel">
        탭 패널 영역 입니다.
    </div>
</div>
Mobile 기준 탭 메뉴는 "2column"으로 각 폭은 1/2로 나뉘어 변화 됩니다.
Tablet 기준 탭 메뉴는 "3column"으로 각 폭은 1/3로 나뉘어 변화 됩니다.
Desktop 기준 탭 메뉴는 각 폭의 width는 자동(auto)이고, 최대 "5column"까지 추가 가능합니다.

탭 메뉴 반응형 스타일

전체
전체
탭 메뉴 1
탭 메뉴 2
탭 메뉴 3
탭 메뉴 4
탭 패널 영역 입니다. 
<div class="tab-area">
    <a href="#" class="tab-menu-select">전체</a>
    <div class="tab-menu-toggle">
        <a class="active" href="#" role="tab"><div>전체</div></a>
        <a href="#" role="tab"><div>탭 메뉴 1</div></a>
        <a href="#" role="tab"><div>탭 메뉴 2</div></a>
        <a href="#" role="tab"><div>탭 메뉴 3</div></a>
        <a href="#" role="tab"><div>탭 메뉴 4</div></a>
    </div>
    <div class="tab-panel">
        탭 패널 영역 입니다.
    </div>
</div>

탭 메뉴 2~5개 반응형 스타일 (현재 사용 X, 반응형 대비)

탭 메뉴 1 탭 메뉴 2 탭 메뉴 3 탭 메뉴 4 탭 메뉴 5
탭 패널 영역 입니다. 
<div class="tab-area">
    <div class="tab-menu col-5">
        <a class="active" href="#" role="tab">탭 메뉴 1</a>
        <a href="#" role="tab">탭 메뉴 2</a>
        <a href="#" role="tab">탭 메뉴 3</a>
        <a href="#" role="tab">탭 메뉴 4</a>
        <a href="#" role="tab">탭 메뉴 5</a>
    </div>
    <div class="tab-panel">
        탭 패널 영역 입니다.
    </div>
</div>
탭 메뉴 2개 일때 반응형 대응 "tab-menu col-2" class를 추가 합니다.
탭 메뉴 3개 일때 반응형 대응 "tab-menu col-3" class를 추가 합니다.
탭 메뉴 4개 일때 반응형 대응 "tab-menu col-4" class를 추가 합니다.
탭 메뉴 5개 일때 반응형 대응 "tab-menu col-5" class를 추가 합니다.
col-num을 설정 안할 경우 Tablet(760px) 이하 디바이스는 1column으로 반응형 처리되어 디자인 됩니다.
최대 5column까지 중단점 설정에 따른 변화가 가능하도록 제작 되었습니다.

Search Area

상단 라디오 & 체크박스 & 셀렉트박스 삽입된 검색 영역 스타일

<ul class="ul-list-type">
    <li class="text-top-area">
        <div class="fl-align">
            <div class="radio-type">
                <input type="radio" id="search-range-01" name="search-range">
                <label for="search-range-01">전체</label>
            </div>
            <div class="radio-type">
                <input type="radio" id="search-range-02" name="search-range">
                <label for="search-range-02">단행본</label>
            </div>
            <div class="radio-type">
                <input type="radio" id="search-range-03" name="search-range">
                <label for="search-range-03">연속간행물</label>
            </div>
        </div>
        <div class="fr-align">
            <div class="select-box">
                <label for="select-01">1달 전</label>
                <select id="select-01">
                    <option selected="selected">1달 전</option>
                    <option>옵션 01</option>
                    <option>옵션 02</option>
                    <option>옵션 03</option>
                </select>
            </div>
            <div class="checkbox-type">
                <input type="checkbox" id="data-type-01" name="data-type-01">
                <label for="data-type-01">결과내 검색</label>
            </div>
        </div>
    </li>
    <li>
        <div class="select-box full">
            <label for="select-01">전체</label>
            <select id="select-01">
                <option selected="selected">전체</option>
                <option>옵션 01</option>
                <option>옵션 02</option>
                <option>옵션 03</option>
            </select>
        </div>
        <div class="input-type-search full">
            <input type="text" placeholder="검색 키워드를 입력하세요" aria-label="검색 키워드를 입력하세요">
            <button type="button" class="btn-in-size btn-blue">검색</button>
        </div>
    </li>
</ul>

상단 라디오 & 체크박스 삽입된 검색 영역 스타일

<div class="sub-search-area">
    <ul class="ul-list-type">
        <li class="text-top-area">
            <div class="radio-type">
                <input type="radio" id="search-range-01" name="search-range">
                <label for="search-range-01">전체</label>
            </div>
            <div class="radio-type">
                <input type="radio" id="search-range-02" name="search-range">
                <label for="search-range-02">단행본</label>
            </div>
            <div class="radio-type">
                <input type="radio" id="search-range-03" name="search-range">
                <label for="search-range-03">연속간행물</label>
            </div>
            <div class="checkbox-type fr-align">
                <input type="checkbox" id="data-type-01" name="data-type-01">
                <label for="data-type-01">결과내 검색</label>
            </div>
        </li>
        <li>
            <div class="select-box full">
                <label for="select-01">전체</label>
                <select id="select-01">
                    <option selected="selected">전체</option>
                    <option>옵션 01</option>
                    <option>옵션 02</option>
                    <option>옵션 03</option>
                </select>
            </div>
            <div class="input-type-search full">
                <input type="text" placeholder="검색 키워드를 입력하세요" aria-label="검색 키워드를 입력하세요">
                <button type="button" class="btn-in-size btn-blue">검색</button>
            </div>
        </li>
    </ul>
</div>

셀렉트박스 1개로 구성된 검색영역 스타일

<div class="sub-search-area">
    <ul class="ul-list-type">
        <li>
            <div class="select-box full">
                <label for="select-01">전체</label>
                <select id="select-01">
                    <option selected="selected">전체</option>
                    <option>옵션 01</option>
                    <option>옵션 02</option>
                    <option>옵션 03</option>
                </select>
            </div>
            <div class="input-type-search full">
                <input type="text" placeholder="검색 키워드를 입력하세요" aria-label="검색 키워드를 입력하세요">
                <button type="button" class="btn-in-size btn-blue">검색</button>
            </div>
        </li>
    </ul>
</div>

셀렉트박스 2개로 구성된 검색영역 스타일

<div class="sub-search-area item-two">
    <ul class="ul-list-type">
        <li>
            <div class="select-box full">
                <label for="select-01">전체</label>
                <select id="select-01">
                    <option selected="selected">전체</option>
                    <option>옵션 01</option>
                    <option>옵션 02</option>
                    <option>옵션 03</option>
                </select>
            </div>
            <div class="select-box full">
                <label for="select-01">전체</label>
                <select id="select-01">
                    <option selected="selected">전체</option>
                    <option>옵션 01</option>
                    <option>옵션 02</option>
                    <option>옵션 03</option>
                </select>
            </div>
            <div class="input-type-search full">
                <input type="text" placeholder="검색 키워드를 입력하세요" aria-label="검색 키워드를 입력하세요">
                <button type="button" class="btn-in-size btn-blue">검색</button>
            </div>
        </li>
    </ul>
</div>

좌측 텍스트 포함된 검색영역 스타일

* 통일부에서 발간된 발간물입니다. 
<div class="search-select-box-area">
    <div class="fl-align">
        <span class="orange">* 통일부에서 발간된 발간물입니다.</span>
    </div>
    <div class="fr-align">
        <div class="select-box number">
            <label for="select-01">5</label>
            <select id="select-01">
                <option selected="selected">5</option>
                <option>10</option>
                <option>15</option>
                <option>20</option>
                <option>30</option>
                <option>50</option>
                <option>100</option>
            </select>
        </div>
        <button class="btn-in-size btn-gray" type="button">보기</button>
    </div>
</div>

가운데 정렬로 구성된 검색영역 스타일

~ 
<div class="sub-search-area item-canter">
    <div class="date-type">
        <div class="select-box">
            <label for="select-01">1주일</label>
            <select id="select-01">
                <option selected="selected">1주일</option>
                <option>1개월</option>
                <option>3개월</option>
                <option>6개월</option>
                <option>1년</option>
            </select>
        </div>
        <div class="input-type date">
            <div class="start-date">
                <input type="text" aria-label="시작 년, 월, 일">
                <button type="button">
                    <img src="../assets/images/icon/icon-link-04.png" width="21px" height="23px" alt="선택">
                </button>
            </div>
            <span class="and">~</span>
            <div class="end-date">
                <input type="text" aria-label="마지막 년, 월, 일">
                <button type="button">
                    <img src="../assets/images/icon/icon-link-04.png" width="21px" height="23px" alt="선택">
                </button>
            </div>
        </div>
        <button class="btn-in-size btn-blue" type="button">검색</button>
    </div>
</div>

공공누리 저작물 안내

본 저작물은 “공공누리 제 2유형 : 출처표시+상업적 이용금지” 조건에 따라 이용할 수 있습니다.

<div class="gong-gongnuli-info">
    <div class="logo">
        <img src="../assets/images/sub/gong-gongnuli-logo.png" alt="공공누리">
    </div>
    <p class="text">본 저작물은 <span class="orange">“공공누리 제 2유형 : 출처표시+상업적 이용금지”</span> 조건에 따라 이용할 수 있습니다.</p>
</div>

페이지 정보 평가

이 페이지에서 제공하는 정보에 대하여 만족하십니까?

<div class="wrap">
    <div class="page-review-star">
        <p class="message">이 페이지에서 제공하는 정보에 대하여 만족하십니까?</p>
        <div class="review-star">
            <div class="radio-type">
                <input type="radio" id="page-review-01" name="page-review">
                <label for="page-review-01">
                    <span class="fa fa-star on"></span><span class="fa fa-star on"></span><span class="fa fa-star on"></span><span class="fa fa-star on"></span><span class="fa fa-star on"></span>
                </label>
            </div>
        </div>
        <div class="review-star">
            <div class="radio-type">
                <input type="radio" id="page-review-02" name="page-review">
                <label for="page-review-02">
                    <span class="fa fa-star on"></span><span class="fa fa-star on"></span><span class="fa fa-star on"></span><span class="fa fa-star on"></span><span class="fa fa-star"></span>
                </label>
            </div>
        </div>
        <div class="review-star">
            <div class="radio-type">
                <input type="radio" id="page-review-03" name="page-review">
                <label for="page-review-03">
                    <span class="fa fa-star on"></span><span class="fa fa-star on"></span><span class="fa fa-star on"></span><span class="fa fa-star"></span><span class="fa fa-star"></span>
                </label>
            </div>
        </div>
        <div class="review-star">
            <div class="radio-type">
                <input type="radio" id="page-review-04" name="page-review">
                <label for="page-review-04">
                    <span class="fa fa-star on"></span><span class="fa fa-star on"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span>
                </label>
            </div>
        </div>
        <div class="review-star">
            <div class="radio-type">
                <input type="radio" id="page-review-05" name="page-review">
                <label for="page-review-05">
                    <span class="fa fa-star on"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span>
                </label>
            </div>
        </div>
        <button class="btn-rating btn-in-size btn-gray">평점주기</button>
    </div>
</div>

Popup Button

팝업 열기 버튼을 클릭하면 팝업을 호출 합니다. 
<a class="btn-popup-test" role="button" href>팝업 버튼 클릭</a>

팝업버튼의 class="btn-popup-name" 클래스명 클릭 시 해당 팝업의 data-id="popup-name" 와 연결되어 팝업이 띄워지도록 설정 되었습니다.
클래스의 popup-name 은 파일 네이밍과 동일하게 규칙적으로 사용합니다.

Popup Base Style

<!-- 팝업 창 data-id 설정 -->
<div class="popup" data-id="popup-test">
    <!-- [Start] 팝업 헤드라인 -->
    <header class="popup-headline">
        <h4>팝업 제목</h4>
        <button type="button" class="popup-close">창 닫기</button>
    </header>
    <!-- [End] 팝업 헤드라인 -->
    <!-- [Start] 팝업 콘텐츠 -->
    <div class="popup-content">
        <p>이 곳에 팝업 상세내용 작성하시면 됩니다.</p>
        <!-- [Start] 팝업 버튼 -->
        <div class="btn-set-area">
            <a href="#" class="btn-out-size btn-blue" role="button">저장</a>
            <!-- 닫기 or 취소 버튼 필수 (접근성) -->
            <a href="#" class="btn-out-size btn-defult popup-close" role="button">취소</a>
        </div>
        <!-- [End] 팝업 버튼 -->
    </div>
    <!-- [End] 팝업 콘텐츠 -->
</div>
// 팝업 버튼 (class="btn-popup-name")
$('.btn-popup-name').on('click', function(e) {
    e.preventDefault();
    // 팝업 찾아 열기 (data-id="popup-name")
    $.popupId($popups, 'popup-name').open();
});

팝업 제목

이 곳에 팝업 상세내용 작성하시면 됩니다.

저장 취소