생명과 태양의 땅 충북 컨텐츠 템플릿

H3 타이틀 26px, #000 H3 서브텍스트 18px, #777

H4 타이틀 22px / #026447

H5 타이틀 20px / #36aa2d

본문 기본폰트는 16px, Noto Sans, #444, letter-spacing:-1px, line-heigh:25px; 입니다. 본문 기본폰트는 16px, Noto Sans, #444, letter-spacing:-1px, line-heigh:25px; 입니다. 본문 기본폰트는 16px, Noto Sans, #444, letter-spacing:-1px, line-heigh:25px; 입니다. 본문 기본폰트는 16px, Noto Sans, #444, letter-spacing:-1px, line-heigh:25px; 입니다. 본문 기본폰트는 16px, Noto Sans, #444, letter-spacing:-1px, line-heigh:25px; 입니다. 본문 기본폰트는 16px, Noto Sans, #444, letter-spacing:-1px, line-heigh:25px; 입니다. 본문내 링크 #222 강조텍스트1 #36aa2d 강조텍스트2 #f1455a 강조텍스트3 #06895f 강조텍스트4 #000

새창으로 다운로드

목록

기본형 .bu

• 목록입니다.
  • 목록입니다.
  • 목록입니다.
    • 목록입니다
    • 목록입니다
• 컬러타이틀 : 모든 국민(법인, 단체 포함)
• 목록입니다.
• 목록입니다.
• 목록입니다.목록입니다.목록입니다.목록입니다.목록입니다.
• 목록입니다.

기본 가로형 .bu horizontal

• 목록입니다.
  • 목록입니다.
  • 목록입니다.
    • 목록입니다
    • 목록입니다
• 컬러타이틀 : 모든 국민(법인, 단체 포함)
• 목록입니다.
• 목록입니다.
• 목록입니다.목록입니다.목록입니다.목록입니다.목록입니다.
• 목록입니다.

순서형 .num

1. ol목록입니다
2. 목록입니다
3. 목록입니다
   1. ol목록입니다
   2. 목록입니다
   3. 목록입니다
      1. ol목록입니다
      2. 목록입니다
      3. 목록입니다

<ol class="num"> <li>ol목록입니다</li> <li>목록입니다</li> <li>목록입니다 <ol class="num"> <li>ol목록입니다</li> <li>목록입니다</li> <li>목록입니다 <ol class="num"> <li>ol목록입니다</li> <li>목록입니다</li> <li>목록입니다</li> </ol> </li> </ol> </li> </ol>

• 가ul목록입니다
• 나목록입니다
• 다목록입니다
  • 가ul목록입니다
  • 나목록입니다
  • 다목록입니다
    • 가ul목록입니다
    • 나목록입니다
    • 다목록입니다

<ul class="num"> <li><span class="item">가</span>ul목록입니다</li> <li><span class="item">나</span>목록입니다</li> <li><span class="item">다</span>목록입니다 <ul class="num"> <li><span class="item">가</span>ul목록입니다</li> <li><span class="item">나</span>목록입니다</li> <li><span class="item">다</span>목록입니다 <ul class="num"> <li><span class="item">가</span>ul목록입니다</li> <li><span class="item">나</span>목록입니다</li> <li><span class="item">다</span>목록입니다</li> </ul> </li> </ul> </li> </ul>

순서 가로형 .num horizontal

1. 목록입니다.
2. 컬러타이틀 : 모든 국민(법인, 단체 포함)
3. 목록입니다.
4. 목록입니다.
5. 목록입니다.목록입니다.목록입니다.목록입니다.목록입니다.목록입니다.목록입니다.목록입니다.목록입니다.목록입니다.
6. 목록입니다.

p.blt

블릿블릿

블릿 type2

블릿 type3

<p class="blt">블릿블릿</p> <p class="blt type2">블릿 type2</p> <p class="blt type3">블릿 type3</p>

테이블

<div class="table_unit"> <h5>기본가로형</h5> <div class="desc">테이블 안내 문구가 들어가면 타이틀포함된 태그 변경</div> </div>

제목없을시

<div class="table_unit type2">테이블 안내 문구가 들어가면 타이틀포함된 태그 변경</div>

테이블제목 - 순으로 정보를 제공하고 있습니다.

제목텍스트1	제목텍스트1	제목텍스트1
내용 #202435	내용 #444	내용 #444
내용 #202435	내용 #444	내용 #444

세로형 .type2

테이블제목 - 순으로 정보를 제공하고 있습니다.

내용 #202435	내용 #444	내용 #444
내용 #202435	내용 #444	내용 #444

table type3 (충북경제자유구역 용)

테이블제목 - 순으로 정보를 제공하고 있습니다.

제목텍스트1	제목텍스트1	제목텍스트1
내용 #202435	내용 #444	내용 #444
내용 #202435	내용 #444	내용 #444

가로2줄형 .tr_over

스크롤형 .table_scroll

반응형 .responsive

테이블제목 - 순으로 정보를 제공하고 있습니다.

제목텍스트1	제목텍스트1	제목텍스트1
내용 #202435	내용 #444	내용 #444
내용 #202435	내용 #444	내용 #444

반응형 .responsive - 수동

입주학교 - 연 번, 시 설 명, 주 요 기 능, 추 진 상 황

연 번	시 설 명	주 요 기 능	추 진 상 황
1	고려대학교 의생명공학연구원	의생명공학연구 및 입주기업 지원
시 설 명대학		주 요 기 능5개소	추 진 상 황

<tfoot class="text_center"> <tr class="manual"> <th colspan="2" scope="row"><span class="data_content">시 설 명</span>대학</th> <td class="text_left"><span class="data_content">주 요 기 능</span>5개소</td> <td class="text_left"><span class="data_content">추 진 상 황</span>&nbsp;</td> </tr> </tfoot>

버튼

일반버튼

일반 버튼 일반 버튼 일반 버튼 작은 버튼 작은 버튼 작은 버튼 <a href="" class="btn">일반 버튼</a> <a href="" class="btn type2">일반 버튼</a> <a href="" class="btn type3">일반 버튼</a> <a href="" class="btn small">작은 버튼</a> <a href="" class="btn type2 small">작은 버튼</a> <a href="" class="btn type3 small">작은 버튼</a>

아이콘 버튼

미리보기 새창열기 바로가기 다운로드 인쇄하기 <a href="" class="icon_btn preview_icon">미리보기</a> <a href="" target="_blank" title="새창" class="icon_btn blank_icon">새창열기</a> <a href="" target="_self" class="icon_btn link_icon">바로가기</a> <a href="" title="다운로드" class="icon_btn down_icon">다운로드</a> <button type="button" class="icon_btn print_icon">인쇄하기</button>

작은 아이콘 버튼

미리보기 새창열기 바로가기 다운로드 인쇄하기

테이블 내 파일유형

HWP PDF XLS JPG ZIP AI

박스

.box.basic (개요박스)

.box.type1

.box.type2

.box.type2.green

.box.type2.center

.box.type2.green.center

.box.point 목록 강조

포인트 텍스트 .box.point_text

게시판 상단 박스타입 .box.boardtop1

게시판 상단 박스타입 .box.boardtop2

.link_site (설명없음)

.link_site.type2(설명있음)

주의사항

.warning_box

스텝박스

.step

.step.stage5

.step.number

<div class="step"> <div class="step_wrap"> <ol class="step_list clearfix"> <li class="step_item active"> <div class="step_content"><span class="level"></span>전자민원 민원24 접속</div> </li> <li class="step_item"> <div class="step_content"><span class="level"></span>민원신청 메뉴 선택민원신청 메뉴 선택</div> </li> <li class="step_item"> <div class="step_content"><span class="level"></span>민원신청 메뉴 선택</div> </li> <li class="step_item"> <div class="step_content"><span class="level"></span>민원신청 메뉴 선택</div> </li> <li class="step_item"> <div class="step_content"><span class="level"></span>필요민원 온라인신청</div> </li> <li class="step_item"> <div class="step_content"><span class="level"></span>필요민원 온라인신청</div> </li> </ol> </div> </div>

.step.type2

<div class="step type2"> <div class="step_wrap"> <ol class="step_list clearfix"> <li class="step_item "> <div class="step_content"> <div class="title"><span class="level"></span><span class="title_text">전자민원 민원24 접속</span></div> <div class="text"> <ul class="bu"> <li>ul텍스트</li> <li>ul텍스트</li> </ul> </div> </div> </li> <li class="step_item"> <div class="step_content"> <div class="title"><span class="level"></span><span class="title_text">전자민원 민원24</span> </div> <div class="text">사전심사청구서,<br />구비서류접수 및 이송</div> </div> </li> <li class="step_item"> <div class="step_content"> <div class="text">민원신청 메뉴 선택</div> </div> </li> <li class="step_item"> <div class="step_content"> <div class="title"><span class="level"></span><span class="title_text">step first</span> </div> <div class="text">사전심사청구서,<br />구비서류접수 및 이송</div> </div> </li> <li class="step_item"> <div class="step_content"> <div class="text">민원신청 메뉴 선택</div> </div> </li> <li class="step_item"> <div class="step_content"> <div class="title"><span class="level"></span><span class="title_text">step first</span> </div> <div class="text">사전심사청구서,<br />구비서류접수 및 이송</div> </div> </li> </ol> </div> </div>

.step.type2.stage3

.step.type3

<div class="step type3"> <div class="step_wrap"> <ol class="step_list clearfix"> <li class="step_box"> <div class="clearfix"> <div class="step_item active"> <div class="step_content"> <div class="title">전화신청</div> </div> </div> <div class="step_process"> <ul class="bu"> <li>일반적인 민원에 대하여 즉시처리</li> <li>위원회에 의결이 필요한 중대한 사안에 대하여는 60일 이내에 처리(부득이한 경우 60일 연장 가능)</li> <li>관련부서에서 처리하는 것이 타당하다고 인정되는 사항은 관련부서에 이첩</li> </ul> </div> </div> </li> <li class="step_box clearfix"> <div class="clearfix"> <div class="step_item"> <div class="step_content"> <div class="title">민원접수</div> </div> </div> <div class="step_process"> <ul class="bu"> <li>일반적인 민원에 대하여 즉시처리</li> <li>위원회에 의결이 필요한 중대한 사안에 대하여는 60일 이내에 처리(부득이한 경우 60일 연장 가능)</li> <li>관련부서에서 처리하는 것이 타당하다고 인정되는 사항은 관련부서에 이첩</li> </ul> </div> </div> </li> <li class="step_box clearfix"> <div class="clearfix"> <div class="step_item"> <div class="step_content"> <div class="title">서류발급서류발급서류발급서류발급서류발급서류발급서류발급서류발급</div> </div> </div> <div class="step_process"> <ul class="bu"> <li>일반적인 민원에 대하여 즉시처리</li> </ul> </div> </div> </li> <li class="step_box clearfix"> <div class="clearfix"> <div class="step_item"> <div class="step_content"> <div class="title">확인</div> </div> </div> <div class="step_process"> <ul class="bu"> <li>일반적인 민원에 대하여 즉시처리</li> <li>위원회에 의결이 필요한 중대한 사안에 대하여는 60일 이내에 처리(부득이한 경우 60일 연장 가능)</li> <li>관련부서에서 처리하는 것이 타당하다고 인정되는 사항은 관련부서에 이첩 <ul> <li>순서가 없는 중첩 목록입니다.</li> <li>순서가 없는 중첩 목록입니다.</li> </ul> </li> </ul> </div> </div> </li> </ol> </div> </div>

사진목록(사진 배경이 흰색인경우 .img_box에 .white 추가)

이미지 확대보기

<div class="box_img"> <div class="box_img_wrap"> <div class="inner"> <img src="https://via.placeholder.com/280x190" alt=" 이미지"> <span class="img_zoom"> <a href="https://via.placeholder.com/280x190" target="_blank" title="새창 이미지 확대보기">이미지 확대보기</a> </span> </div> <div class="title">제목있을경우 현재위치 태그삽입</div> </div> </div>

컨텐츠 슬라이드

<div class="slide_type01"> <div class="img_list"> <div class="img_item"> <div class="img_wrap"> <img src="/site/solar/images/contents/sub0201_img1.jpg" alt="태양광기술지원센터 외부 사진1"> </div> </div> <div class="img_item"> <div class="img_wrap"> <img src="/site/solar/images/contents/sub0201_img2.jpg" alt="태양광기술지원센터 사진2"> </div> </div> </div> <div class="img_control"> <button type="button" class="prev" title="이전사진"></button> <button type="button" class="next" title="다음사진"></button> <div class="countbox"> <span class="current"></span> <span class="total"></span> </div> </div> </div>

셀렉트

해당 폼 태그에 label이 붙지 않는다면 반드시 title="해당 내용" 을 달아서 표시해주세요

기본

셀렉트박스 옵션 1 옵션 2 옵션 3 옵션 4 옵션 5

텍스트 인풋

기본

체크박스

체크박스1 체크박스 비활성

라디오버튼

선택1 선택 비활성

셀렉트박스

라인

<div class="line"></div> <div class="line2"></div> <div class="line3"></div> <div class="line vertical"></div> <div class="line2 vertical"></div> <div class="line3 vertical"></div>

콘텐츠 내 안내

오시는길

<div class="map_box"> <div class="map_wrap"> <div id="daumRoughmapContainer1616717678628" class="root_daum_roughmap root_daum_roughmap_landing"></div> <script class="daum_roughmap_loader_script" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script> <script> new daum.roughmap.Lander({ "timestamp": "1616717678628", "key": "252e2", "mapWidth": "", // width 값 빼주세요 "mapHeight": "" // height 값 빼주세요 }).render(); </script> </div> <div class="info_list"> <ul class="clearfix"> <li class="info01"><span>충청북도 청주시 상당구 상당로 82</span></li> <li class="info02"><span>043)220-2754</span></li> </ul> <a href="" class="map_btn" target="_blank" title="새창"><span><em>지도보기</em></span></a> </div> <div class="line margin_0"></div> </div>

오시는방법

오창IC

• 총거리 10.2km, 소요시간 약 20분
• 요금소 - 청주 · 청주공항 방면으로 좌측방향(540번 지방도) 2.34km - 오창IC 공군사관학교 · 청주 방면으로 우측방향(17번 국도) 8.15km - 좌회전 - 충북도청

청주IC

• 총거리 11.0km, 소요시간 약 19분
• 청주IC 좌측방향(36번 국도) 10.45km - 상당사거리 도청 · 도의회 방면으로 우측방향(17번 국도) 191m - 좌회전 - 충북도청