코딩가이드
블릿 스타일
단과대학 총 23개 .title-dth2
폰트 컬러
공통
포인트컬러01 / .font-point1M / #128fdc
포인트컬러02 / .font-point2M / #00467f
포인트컬러03 / .font-point3M / #11bead
FONT
1depth / .font-dth1M / #333333
2depth / .font-dth2M / #333333
고정 text / .font-fixedM / #666666
input 데이터 정보 / .font-inputM / #ee4d42
ICON
전체메뉴 ICON
1Depth Menu
2Depth Menu
BUTTON
1. button태그 사용 (예 : 의사결정 버튼, 게시판 일반 등 사용)
.confirm-base
.confirm-white
.confirm-ivory
.confirm-sky
.confirm-gray
.confirm-sm-gray .confirm-gray
.common-input-text .search-box + .search-confirm
.confirm-base .confirm-okay
a태그 사용 (예 : 다운로드, 링크)
상세보기 .confirm-base
목록 .confirm-white
글쓰기 .confirm-ivory
다운로드 .confirm-sky
홈페이지 바로가기 .confirm-gray
번호 .confirm-sm-gray .confirm-gray
검색 .common-input-text .search-box + .search-confirm
확인 .confirm-base .confirm-okay
기타 기능버튼
- 체크박스 on, off, disable, disable check로 구성
- 라이오버튼 on, off 구성
- 기간조회버튼 간격사이즈 고정, 버튼 사이즈 가변적
Check Box .checks-wrap > input[type="checkbox"]
Radio Button .radio-wrap > input[type="radio"]
Select Box .select-wrap > <select>
TAB
1Depth Tab Menu
페이지링크형 탭
탭 2개
[탭 3개]
[탭 4개]
[탭 5개]
2Depth Tab Menu .tab-dth2 > ul.nav.nav-tab #baseTab2
3depth
3Depth Tab Menu .tab-dth3 > ul.nav.nav-tab #baseTab3
1Depth Tab Menu .tab-dth1 > ul.nav.nav-tab #baseTab
id와 탭메뉴의 링크는 설정 가변.
탭 2개
[탭 3개]
[탭 4개]
[탭 5개]
2Depth Tab Menu .tab-dth2 > ul.nav.nav-tab #baseTab2
3depth
3Depth Tab Menu .tab-dth3 > ul.nav.nav-tab #baseTab3
페이지링크형과 동일페이지내 숨김/보이기 기능형 중 사용되는 타입의 탭구조에 div태그에는 다중클래스로 tab-ui가, ul태그에는 row가, li태그에는 span3가 각각 추가 되어야 함(소스보기로 확인).
[용례] 한양대표 영문사이트 Home > About Hanyang > Symbol, Emblem & UI > Logo & UI (http://www.hanyang.ac.kr/web/eng/logo-ui)
탭 가이드 변경, 폰트 크기 12px, 탭 높이 35px, 탭 가로 최소 2개, 최대 4개, 세로는 적층 가능합니다.
BOARD
게시판 테이블(th background-color) .tables-board-wrap > .tables-board .board-list .back-color
| 번호 | 제목 | 작성자 |
|---|---|---|
| 왼쪽정렬 | 가운데정렬 | 오른쪽정렬 |
| 기본 중앙 | 기본 왼쪽 | 기본 왼쪽 |
| 기본 중앙 | 기본 왼쪽 | 기본 왼쪽 |
게시판 테이블 .tables-board-wrap > .tables-board .board-list
| 번호 | 제목 | 작성자 |
|---|---|---|
| 왼쪽정렬 | 가운데정렬 | 오른쪽정렬 |
| 기본 중앙 | 기본 왼쪽 | 기본 왼쪽 |
| 기본 중앙 | 기본 왼쪽 | 기본 왼쪽 |
게시판 상세 .tables-board-wrap > .tables-board .board-view .back-color
| 제목 | 가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하 |
|---|---|
| 내용 |
가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하 가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하 가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하 가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하 가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하 |
테이블 셀병합 용례
colgroup의 col의 width=""는 데이터에따라 개별 설정(반응형을 고려 %단위로)
| 항목1 | 항목2 | 상위항목3 | 항목4 | |
|---|---|---|---|---|
| 하위항목3-1 | 하위항목3-2 | |||
| 데이타1-1 | 데이타1-2 | 데이타1-3 | 데이타1-4 | 데이타1-5 |
| 데이타2-1 | 데이타2-2 | 데이타2-3 | 데이타2-4 | 데이타2-5 |
| 데이타3-1 | 데이타3-2 | 데이타3-3 | 데이타3-5 | |
| 데이타4-2 | 데이타4-3 | 데이타4-4 | 데이타4-5 | |
| 데이타5-2 | 데이타5-3 | 데이타5-4 | 데이타5-5 | |
| 항목1 | 데이터1-1 | 데이터1-2 | |
|---|---|---|---|
| 항목2 | 항목2-1 | 데이터2-1 | 데이터2-2 |
| 항목2-2 | 데이터2-2-1 | 데이터2-2-2 | |
| 항목3 | 데이터3 | ||
게시판 상세 Prev/Next
Left align .tables-board-arrow .text-left
Center align .tables-board-arrow .text-center
Right align .tables-board-arrow .text-right
자주하는질문 .tables-board-wrap > .accordion .accordion-faq
가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하
가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하
가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하
가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하