메인/입학/학과 공통CSS

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

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

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

기본 font

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

h1

좌측 로고 설정

h2

h2h2h2h2h2h2

h3

h3

h4

h4h4h4h4h4h4

h5

h5h5h5h5h5h5

기본 btn ( a태그 )

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

버튼색상 및 크기

<a href="#set-btn" class="ui-btn sky small">하늘</a> <a href="#set-btn" class="ui-btn bgreen big">청록</a>  <a href="#set-btn" class="ui-btn  bigx2">두번째 큰</a> <a href="#set-btn" class="ui-btn  bigx3">세번째 큰</a>

링크 btn

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

다운로드 btn

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

흰색 배경색 btn

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

회색 배경색 pdf btn

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

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>

box01_한줄형식

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

box01_한줄형식

<div class="info_box alim">
	<p>알림입니다.</p>
</div>

box01_여러줄

 <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

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

box03

<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 로 감싸주면 모바일에서 가록 스크롤이 가능해진다.

<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>

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