횡성군 템플릿사이트

H3타이틀 위(마진15px) 아래(마진15px)

H4타이틀 위(마진15px) 아래(마진15px)

H5타이틀 위(마진15px) 아래(마진15px)

H6타이틀 위(마진15px) 아래(마진15px)

ul.bu(순서 없을때)

• .bu li 리스트1차
  • .bu li 리스트2차
    • .bu li 리스트3차

ol.bu(순서 있을때)

1. 1.ol.li 리스트1차
   1. 1.ol.li 리스트2차
      1. 1.ol.li 리스트3차

ul.bu, ol.bu 혼합사용 예시

• ul.li 리스트1차
  1. 1.ol.li 리스트2차
     • ul.li 리스트3차

1. 1.ol.li 리스트1차
   • ul.li 리스트2차
     1. 1.ol.li 리스트3차

ul.bu.ol_bu (순서없는 목록이면서 ol.bu 모양 사용)

• 1.ul.bu.ol_bu 리스트1차
  • 1.ul.bu.ol_bu 리스트2차
    • 1.ul.bu.ol_bu 리스트3차

.num(순서 없을때(ul) , 순서 있을때(ol) 혼합사용 예시)

• 1ul.num 리스트1차
  • ul.bu 리스트2차
    1. 1.ol.bu 리스트3차
  1. 1.ol.bu 리스트2차
     • ul.bu 리스트3차
  • 1.ul.bu.ol_bu 리스트2차
    • ul.bu 리스트3차
• 2ul.num 리스트1차
• 3ul.num 리스트1차
• 50ul.num 리스트1차

.num.type2(순서 없을때(ul) , 순서 있을때(ol) 혼합사용 예시)

• ㄱul.num.type2 리스트1차
  • ul.bu 리스트2차
    1. 1.ol.bu 리스트3차
  1. 1.ol.bu 리스트2차
     • ul.bu 리스트3차
  • 1.ul.bu.ol_bu 리스트2차
    • ul.bu 리스트3차
• ㄴul.num.type2 리스트1차
• ㄷul.num.type2 리스트1차
• ㅎul.num.type2 리스트1차

ul.title_list(순서 없을때) 혼합사용 예시

• 타이틀1 : ul.title_list 리스트1차
  • ul.bu 리스트2차
    • ul.bu 리스트3차
  1. 1.ol.bu 리스트2차
     1. 1.ol.bu 리스트3차
  • 1.ul.bu.ol_bu 리스트2차
    • 1.ul.bu.ol_bu 리스트3차
• 타이틀2 : ul.title_list 리스트1차

기본테이블(.table)

기본테이블 - 제목1, 제목2, 제목3

제목1	제목2	제목3
내용1	내용2	내용3

반응형테이블(.table.responsive) (colspan, rowspan 있을때 X)

반응형테이블 - 제목1, 제목2, 제목3

제목1	제목2	제목3
내용1-1	내용2-1	내용3-1
내용1-2	내용2-2	내용3-2

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

세로형테이블 - 제목1, 제목2

제목1	내용1
제목2	내용2

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

세로형반응형테이블 - 제목1, 제목2

제목1	내용1
제목2	내용2

스크롤테이블(.table_scroll > .table)

.warning(~type3) (마크업 따라 block , inline-block 사용요청)

강조warning

강조warning type2

.warning_box > .warning(~type3)

.em_red

색상 #af0d34

기본형 박스(.hsg_box)

아이콘형 박스(.hsg_box.icon_type) / .icon_bg > .icon(추가시 type5부터 지정해서 사용)

이미지형 박스(.hsg_box.img_type1)

이미지형 박스(.hsg_box.img_type2)

텍스트형 박스

주의사항 박스(.hsg_box.text_type.warning_type)

좌/우배치 리스트형 박스

횡성링크 hsg_link(.blank , .down)

본문용 링크스타일 본문용 새창스타일 본문용 다운로드스타일

횡성버튼(.hsg_btn > a.btn , button.btn , input[type="submit"].btn)(마크업 유지)

크기조절 hsg_btn(.small, .max_small)

색상반전 hsg_btn(.reverse)

a button
a button
a button

아이콘여부 hsg_btn(.arrow, .down, .blank, .search, .print)

a a a a a
button button button button button

횡성버튼type2(.hsg_btn > a.btn , button.btn , input[type="submit"].btn)(마크업 유지)

크기조절 hsg_btn(.small, .max_small)

색상반전 hsg_btn(.reverse)

a button
a button
a button

아이콘여부 hsg_btn(.arrow, .down, .blank, .search, .print)

a a a a a
button button button button button

횡성의미있는버튼 hsg_btn.icon > .deco(.pdf , .hwp , .excel , .ppt , .img , .psd , .ai , .word , .etc)

pdf파일 a hwp파일 a excel파일 a ppt파일 a img파일 a psd파일 a ai파일 a word파일 a 그 외 파일 a
pdf파일 a hwp파일 a excel파일 a ppt파일 a img파일 a psd파일 a ai파일 a word파일 a 그 외 파일 a
pdf파일 a hwp파일 a excel파일 a ppt파일 a img파일 a psd파일 a ai파일 a word파일 a 그 외 파일 a

횡성의미있는버튼type2 hsg_btn.type2.icon > .deco(.pdf , .hwp , .excel , .ppt , .img , .psd , .ai , .word , .etc)

pdf파일 a hwp파일 a excel파일 a ppt파일 a img파일 a psd파일 a ai파일 a word파일 a 그 외 파일 a
pdf파일 a hwp파일 a excel파일 a ppt파일 a img파일 a psd파일 a ai파일 a word파일 a 그 외 파일 a
pdf파일 a hwp파일 a excel파일 a ppt파일 a img파일 a psd파일 a ai파일 a word파일 a 그 외 파일 a

사이트 링크 박스(기본)

(모니터 모양(deco_box) 안에 이미지텍스트(deco_text_img) 유동적으로 사용 , 텍스트있는 이미지일때 텍스트 넣기)

사이트 링크 박스(리스트타입)

배너모음

스텝박스(타입별로 .item_height 의 기본 height 값 다름 참고)
혼합형은 .item_inner 의 min-height 조절

타이틀형(.step_box.title_type)

내용형(.step_box.desc_type)

혼합형(.step_box.mix_type)

세로형(.step_box.verti_type) (기존 스텝박스와 구조 다름)

바로가기 // .link_inner.blank

단일사용

다수사용

다운로드 // .link_inner.down

단일사용

다수사용

콘텐츠정보 // hsg_info_box.con

기본

담당자 // .con_inner.person

전화 // .con_inner.call

이미지박스

단일(.box_img)

단일 데코X(.box_img.basic)

다수(.img_list_box > .box_img) // .inner 의 min-height 유동적으로 사용

폼요소 인풋(.hsg_form > input)(마크업 유지)

크기조절 hsg_form(.small, .max_small)

셀렉트(.hsg_form.select > select)

기본1 기본2 기본3 small1 small2 small3 max_small1 max_small2 max_small3

체크박스(.hsg_form > input[type="checkbox"].hsg_checkbox)

체크박스1 체크박스2

라디오(.hsg_form > input[type="radio"].hsg_radio)

라디오박스1 라디오박스2

캘린더사용(한신마크업구조사용)

주소검색사용

검색박스사용예시1

프로그램예시1(테이블형식)

상하수도요금 입력폼

상하수도요금 입력 테이블 - 상수업종 , ~~~~

상수업종	가정용 가정용2 가정용3 다른 업종과 겸업
가구수	세대
.hsg_form_cell > .hsg_form	라디오1 라디오2 텍스트.hsg_form_text.small 강조강조표시
주소검색 .hsg_form_cell.address	주소검색
파일업로드 모양(한신) .hsg_form_cell.file	선택한 0번 첨부 제거 0번째 파일선택

프로그램예시2(상단검색)

이미지가 있는 연혁(ul.history, 순서없을때)

• 
  상고시대

  • 마한의 영역
• 
  삼국시대

  • 235-374 : 백제의 영역이 됨

이미지가 있는 연혁(ol.history, 순서있을때)

1. 1
   
   상고시대

   • 마한의 영역
2. 2
   
   삼국시대

   • 235-374 : 마한의 영역

이미지가 없는 연혁(ul.history.nonimg, 순서없을때)

• 1964.

  • 보건소 건립
• 1970.

  • 보건소 건립

이미지가 없는 연혁(ol.history.nonimg, 순서있을때)

1. 1
   1964.

   • 보건소 건립
2. 2
   1970.

   • 보건소 건립