강동대학교 > 메인스타일시트
본문바로가기 메인메뉴바로가기

변화와 도약을 실현하는 대학교 강동대학교

The chief Director of the Gangdong University

메인스타일시트

강동대학교 홈페이지 가이드

!!!!! 강동대학교 url 셋팅 (http://gangdongmain.eznic.co.kr) 후 가이드가 제대로 표시 됨

css 위치

메인/입학/학과 공통CSS

  • 공통 레이아웃 reset시키는 css :/resources/css/common/site_style.css
  • 게시판 css:/resources/css/common/site_board.css

메인 CSS 격납 폴더

/resources/css/main

입학 CSS 격납 폴더

/resources/css/ipsi

전 학과 공통CSS

/resources/css/common/common_dep.css

실사이트 옮길경우 필요한 수정작업

홈페이지별 분기한 sub-layout 부분 url 수정 필요

  • 서브레이아웃 분기:/WebContent/home/Page.jsp
  • 게시판 분기:/combine/board/index.jsp

기본css

기본 font

font-size: 15px
font-family: Noto Sans KR, sans-serif
font-weight: 300
line-height: 1
letter-spacing: -1px
※ font-size 설정시 em 단위로 사용 ※ 각홈페이지별 font색상은 해당 홈페이지 common.css 내 수정

h 제목

h1

좌측 로고 설정

h2

h2h2h2h2h2h2

h3

h3

h4

h4h4h4h4h4h4

h5

h5h5h5h5h5h5

버튼스타일

기본 btn ( a태그 )

ui-btn
<a href="#" class="ui-btn">ui-btn</a>

버튼색상 및 크기

파랑 초록 초록
<a href="#set-btn" class="ui-btn blue small">파랑</a> <a href="#set-btn" class="ui-btn green big">초록</a>

링크 btn

재증명서 바로가기
<a class="ui-btn green " href="#">재증명서 바로가기 <span class="link_icon"></span></a>

다운로드 btn

hwp 다운로드
<a class="ui-btn blue " href="#">hwp 다운로드 <span class="down_icon"></span></a>

흰색 배경색 btn

ui-btn white
<a href="#" class="ui-btn white">ui-btn white</a>

회색 배경색 pdf btn

ui-btn gray
<a href="#" class="ui-btn gray">ui-btn gray</a>

list형태

list01

  • list01 1줄
  • list01 1줄
<ul class="list_li01">
	<li>list01 1줄 </li>
	<li>list01 1줄 </li>
</ul>
                

list02

  • list02 1줄
  • list02 1줄
    • 리스트안에 리스트
    • 리스트안에 리스트
<ul class="list_li02">
<li>list02 1줄 </li>
<li>list02 1줄
<ul>
<li>리스트안에 리스트</li>
<li>리스트안에 리스트</li>
</ul>
</li>
</ul>

목록 타이틀1개 내용 여러개 dl스타일

제목
내용
내용
<dl class="list_dl last">
<dt>제목</dt>
<dd>내용</dd>
<dd>내용</dd>
</dl>

list-num

  • 01.내용
  • 02.내용
<ul class="list-num">
<li><span class="num">01.</span>내용</li>
<li><span class="num">02.</span>내용</li>
</ul>

box형태

box01_한줄형식

info_box class명에 call이라는 class명 추가로 이미지를 넣어줌

<div class="info_box call">
<p>강동대학교 행정부서 연락처 안내입니다.</p>
</div>

box01_여러줄

내용 p나 div 등등 아무 형식을 써주면 됨
 <div class="info_box ">
<div>내용 p나 div 등등 아무 형식을 써주면 됨</div>
</div>

box01_여러줄 아이콘 넣기(dl 클래스을 붙여서 아이콘 변경)

제목
내용
내용
 <div class="info_box ">
<dl>
<dt>제목</dt>
<dd>내용</dd>
<dd>내용</dd>
</dl>
</div>

box02

내용 p나 div 등등 아무 형식을 써주면 됨
 <div class="box_st02 ">
내용 p나 div 등등 아무 형식을 써주면 됨
</div>

box03

내용 p나 div 등등 아무 형식을 써주면 됨
<div class="box_st03">
내용 p나 div 등등 아무 형식을 써주면 됨
</div>

box04

제목
내용
<dl class="box_st04">
<dt>제목</dt>
<dd>내용</dd>
</dl>

컬러

강동파랑 : gd_blue

강동하늘 : gd_sky

강동연두 : gd_green

강동초록강 : gd_green2

테이블

리스트형

테이블의 내용이 많은 경우 div table_Scroll 로 감싸주면 모바일에서 가록 스크롤이 가능해진다.

ㅇ표
thead 제목 제목
tbody 내용 내용
tfoot 내용 내용
<div class="table_scroll">
<table class="table-detail" summary="ㅇ표 입니다">
<caption>
ㅇ표
</caption>
<colgroup>
<col style="width:*" />
<col style="width:*" />
<col style="width:*" />
</colgroup>
<thead>
<tr>
<th scope="col">thead</th>
<th scope="col">제목</th>
<th scope="col">제목</th>
</tr>
</thead>
<tbody>
<tr>
<th class="th01">tbody</th>
<td align="center">내용</td>
<td align="center">내용</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="th01">tfoot</th>
<td align="center">내용</td>
<td align="center">내용</td>
</tr>
</tfoot>
</table>
</div>

보기형

ㅇ표
머리글 내용 내용
머리글 내용 내용
<table class="ui-view white" summary="ㅇ표 입니다.">
<caption>ㅇ표</caption>
<colgroup>
<col style="width:*" />
<col style="width:*" />
<col style="width:*" />
</colgroup>
<tbody>
<tr>
<th>머리글</th>
<td>내용</td>
<td>내용</td>
</tr>
<tr>
<th>머리글</th>
<td>내용</td>
<td>내용</td>
</tr>
</tbody>
</table>

다운로드할때

증명서 발급 류 버튼 만들때 참조
http://gangdongipsi.eznic.co.kr/Home/Contents.mbz?action=MAPP_1805110169

다운로드할때_위치 \WebContent\upload\down

hwp 다운로드
<a href="/File/Download.do?dir=down&amp;savename=파일명.hwp&amp;realname=파일명.hwp" class="ui-btn blue" target="_blank">다운로드</a>