본문 바로가기

미동산 수목원 템플릿

MIDONGSAN
홈으로

템플릿(컨텐츠 내에서 변칙적인 모양은 별도로 깰 것)

컨텐츠 탭메뉴 꼭 버튼태그로만 사용할 것

H3 타이틀 30pt, S-Core Dream 5 Medium, #242424

H4 타이틀 26pt, S-Core Dream 5 Medium, #0a9361

H5 타이틀 22pt, S-Core Dream 5 Medium, #068f8b
H6 타이틀 20pt, S-Core Dream 5 Medium, #926f0f

본문 p태그는 common.css에서 body 태그에 상속받습니다 font-size:16px;color:#242424;line-height:28px;letter-spacing:-0.03em;font-weight:200;font-family:'Score';

본문 p태그는 common.css에서 body 태그에 상속받습니다 font-size:16px;color:#242424;line-height:28px;letter-spacing:-0.03em;font-weight:200;font-family:'Score';

본문 p태그는 common.css에서 body 태그에 상속받습니다 font-size:16px;color:#242424;line-height:28px;letter-spacing:-0.03em;font-weight:200;font-family:'Score';

본문 p태그는 common.css에서 body 태그에 상속받습니다 font-size:16px;color:#242424;line-height:28px;letter-spacing:-0.03em;font-weight:200;font-family:'Score';

본문 p태그는 common.css에서 body 태그에 상속받습니다 font-size:16px;color:#242424;line-height:28px;letter-spacing:-0.03em;font-weight:200;font-family:'Score';


강조글씨1 #0a9361 강조글씨2 #3b82e7 강조글씨3 #e5440c 강조글씨4 #dc650d
강조글씨1 #0a9361 bold 강조글씨2 #3b82e7 bold 강조글씨3 #e5440c bold 강조글씨4 #dc650d bold
[강조글씨5]

ul.bu / ul.bu.type2

순서 없는 목록(1차 - 2차 - 3차)

  • 1차 텍스트
  • 1차 텍스트
  • 1차 텍스트
  • 1차 텍스트
    • 2차 텍스트
    • 2차 텍스트
      • 3차 텍스트
      • 3차 텍스트

순서 없는 목록 type2 (1차를(2차모양으로) - 2차를(3차모양으로))

  • type2 1차 텍스트
  • type2 1차 텍스트
  • type2 1차 텍스트
  • type2 1차 텍스트
    • type2 2차 텍스트
    • type2 2차 텍스트

ul.title_type / ul.title_type2

타이틀형 순서 없는 목록1

  • 대상 : 20세이상
    • 부가설명2차
    • 부가설명2차
  • 대상 : 20세이상
    • 부가설명2차
      • 부가설명3차
    • 부가설명2차

타이틀형 순서 없는 목록2

  • 대상 : 20세이상
    • 부가설명2차
    • 부가설명2차
  • 대상 : 20세이상
    • 부가설명2차
      • 부가설명3차
    • 부가설명2차

ul.num

순서 없는데 모양만 숫자 목록

  • 11차 텍스트
  • 21차 텍스트
  • 31차 텍스트
  • 41차 텍스트
    • 1.2차 텍스트
    • 2.2차 텍스트
    • 3.2차 텍스트
    • 4.2차 텍스트

ol.num

순서 있는 목록

  1. 11차 텍스트
  2. 21차 텍스트
  3. 31차 텍스트
  4. 41차 텍스트
    1. 1.2차 텍스트
    2. 2.2차 텍스트
    3. 3.2차 텍스트
    4. 4.2차 텍스트

.blt ( .type2 , .type3 )

blt
blt type2
blt type3

.warning ( .type2 , type3 , (기본값 gray) , 컬러지정(red, blue)

강조warning
강조warning red
강조warning blue
강조warning type2
강조warning type2 red
강조warning type2 blue
강조warning type3
강조warning type3 red
강조warning type3 blue

.warning_box > .warning

강조warning

박스 기본 ( .box > .box_inner )

주말 산림체험교실 운영 26pt #0a9361

수목은 우리에게 꼭 필요한 산림자원이며 자연을 아름답게 꾸며주고 있는 나무들을 심고 가까이 하면서, 누구나 쉽게 조용히 쉬면서 자연을 공부할 수 있도록 하고 있습니다. 또한 중부내륙 산림연구의 메카로서 그 역할을 다하기 위하여 선진 임업기술을 적극 활용하여 연구 및 개발 하여 보급하고, 임업생산성 향상과 산림환경 생태보전에 이바지하고 있습니다. 우리에게 필요한 나무의 신품종 개발과 시험 및 숲을 이용하는데 필요한 연구를 하고 있으며, 각종 수목과 야생초화류를 종류별로 전시하여 볼거리를 제공하고 있습니다.

아이콘 박스 ( .box.icon_type > .box_inner > .icon(아이콘추가시.type2부터) )

주말 산림체험교실 운영 26pt #0c7774

수목은 우리에게 꼭 필요한 산림자원이며 자연을 아름답게 꾸며주고 있는 나무들을 심고 가까이 하면서, 누구나 쉽게 조용히 쉬면서 자연을 공부할 수 있도록 하고 있습니다. 또한 중부내륙 산림연구의 메카로서 그 역할을 다하기 위하여 선진 임업기술을 적극 활용하여 연구 및 개발 하여 보급하고, 임업생산성 향상과 산림환경 생태보전에 이바지하고 있습니다.

그라데이션 박스 ( .box.gra_type > .box_inner )

설명 박스 ( .box.info_type > .box_inner )

수강신청이 완료되었습니다.
[신청자] 님께서 신청하신 [강좌명] 수강신청이 완료되었습니다. 수강신청 내역은 [마이페이지]에서 확인하실 수 있습니다.

테이블 // colgroup > col 은 내부스타일로 width %쓰기

기본테이블(.table)

강조테이블 유닛 .table_unit > .warning 사용 , 필요 없으면 삭제할 것
기본테이블 - 캡션은 필수작성
제목1 제목2 제목3
제목2-1 제목2-2
제목2-1-1 제목2-2-1 제목3-1
tbody th font-size:17px; tbody td font-size:16px; tbody td font-size:16px; tbody td font-size:16px;
tbody th font-size:17px; tbody td font-size:16px; tbody td font-size:16px; tbody td font-size:16px;

세로형테이블(.table.type2)

강조테이블 유닛 .table_unit > .warning 사용 , 필요 없으면 삭제할 것
세로형테이블(제목) - tbody의 th 값 나열
제목1 내용1
제목2 내용2
제목3 내용3

반응형테이블은 colspan, rowspan 있으면 작동 X

반응형테이블(.table.responsive)

강조테이블 유닛 .table_unit > .warning 사용 , 필요 없으면 삭제할 것
반응형테이블(제목) - 캡션은 필수작성
제목1 제목2 제목3
내용1-1 내용2-1 내용3-1
내용1-2 내용2-2 내용3-2

세로형반응형테이블(.table.type2.responsive)

강조테이블 유닛 .table_unit > .warning 사용 , 필요 없으면 삭제할 것
세로형반응형테이블(제목) - 캡션은 필수작성
제목 내용
제목 내용

스크롤테이블( .table_scroll > table ) // 반응형(responsive)불가

강조일반테이블
테이블(제목) - 캡션은 필수작성
제목 제목
내용 내용
강조세로형테이블
세로형테이블(제목) - 캡션은 필수작성
제목 내용
제목 내용

본문링크버튼

기본링크(.midong_link)

기본링크

다운링크(.midong_link.down)

다운로드링크

링크/버튼/인풋(기본형) , .btn의 min-width 값으로 너비 조절

기본버튼(.temp_midong > .btn)

기본버튼

기본버튼type2(.temp_midong.type2 > .btn)

기본버튼

기본버튼type3(.temp_midong.type3 > .btn)

기본버튼

기본버튼small(.temp_midong.small > .btn) // type2, type3 다 가능

기본버튼

링크/버튼/인풋(아이콘형) , .btn의 padding으로 너비 조절

아이콘버튼(.temp_midong.icon_type > .btn // .icon.type1~.type6)

아이콘버튼

아이콘버튼(.temp_midong.type2.icon_type > .btn // .icon.type1~.type6)

아이콘버튼

아이콘버튼(.temp_midong.type3.icon_type > .btn // .icon.type1~.type6)

아이콘버튼

아이콘버튼small(.temp_midong.small.icon_type > .btn // .icon.type1~.type6) // type2, type3 다 가능

아이콘버튼 아이콘버튼 아이콘버튼 아이콘버튼 아이콘버튼 아이콘버튼

인풋(.temp_form > input[type="text"]) // .temp_form의 width로 너비 조절

체크박스(.temp_form.check > input[type="checkbox"])

라디오박스(.temp_form.radio > input[type="radio"])

미동산 셀렉트박스(.temp_select > select.real_select // .fake_select)

select.real_select > option 갯수와 .fake_select > .fake_select_list > .fake_select_item 개수 맞출것
select.real_select > option 의 텍스트는 비워둬도 .fake_select > .fake_select_list > .fake_select_item > .fake_select_btn의 텍스트가 로딩시 스크립트로 자동으로 들어오게 짜여져있음
select.real_select > option 의 selected(접근성 고려 옵션값 선택)는 .fake_select_item 에 active 클레스 준 곳과 매칭되어 자동으로 들어옴
.fake_select_item 에 active 클레스 달려있는 곳 안에 있는 .fake_select_btn 에는 title="선택됨" 꼭 줄것
.selected_text 값 비워두면 .fake_select_item.active 안에 있는 .fake_select_btn 의 텍스트 값 자동으로 들어감