본문 바로가기

해당 메뉴명 개발 필요

제목 (h3 ~ h6, .h3 ~ .h6)

H3 타이틀 26pt, Noto Sans CJK KR, Bold #4c4949

H4 타이틀 24pt, Noto Sans CJK KR, Medium #6279cc

H5 타이틀 22pt, Noto Sans CJK KR, #109d6e
H6 타이틀 20pt, Noto Sans CJK KR, #dea200
<h3 class="h3"></h3> <h4 class="h4"></h4> <h5 class="h5"></h5> <h6 class="h6"></h6>

본문 텍스트

17pt #474747 이 곳은 콘텐츠 내용이 들어갑니다. 17pt #474747 이 곳은 콘텐츠 내용이 들어갑니다. 17pt #474747 이 곳은 콘텐츠 내용이 들어갑니다. 17pt #474747 이 곳은 콘텐츠 내용이 들어갑니다. 17pt #474747 이 곳은 콘텐츠 내용이 들어갑니다. 17pt #474747 이 곳은 콘텐츠 내용이 들어갑니다. 17pt #474747 이 곳은 콘텐츠 내용이 들어갑니다. 17pt #474747 이 곳은 콘텐츠 내용이 들어갑니다. 17pt #474747 이 곳은 콘텐츠 내용이 들어갑니다. 17pt #474747 이 곳은 콘텐츠 내용이 들어갑니다. 17pt #474747 이 곳은 콘텐츠 내용이 들어갑니다. 17pt #474747 이 곳은 콘텐츠 내용이 들어갑니다. 17pt #474747 이 곳은 콘텐츠 내용이 들어갑니다. 17pt #474747 이 곳은 콘텐츠 내용이 들어갑니다. 17pt #474747 이 곳은 콘텐츠 내용이 들어갑니다. 17pt #474747 이 곳은 콘텐츠 내용이 들어갑니다. 17pt #474747 이 곳은 콘텐츠 내용이 들어갑니다. 17pt #474747 이 곳은 콘텐츠 내용이 들어갑니다.

<p>콘텐츠 내용</p>

강조

강조글자색상1#ea535d 강조글자색상2#17538c 강조글자두께 Regular 강조글자두께 Medium 강조글자두께 Bold <em class="em_red"></em> <em class="em_blue"></em> <em class="regular"></em> <em class="medium"></em> <em class="bold"></em>

안내, 주의

강조안내사항은 이렇게 들어갑니다. 16px #4c80bd

강조주의사항은 이렇게 들어갑니다. 16px #ea535d

<p class="warning"><span class="skip">강조</span>안내사항</p> <p class="warning type2"><span class="skip">강조</span>주의사항</p>

순서 없는 목록 ul.bu

  • 순서가 없는 목록입니다.
  • 순서가 없는 목록입니다.
    • 순서가 없는 중첩 목록입니다.
    • 순서가 없는 중첩 목록입니다.
      • 순서가 없는 중첩 목록입니다.
      • 순서가 없는 중첩 목록입니다.
<ul class="bu"> <li></li> <li></li> </ul> <!--//bu-->

순서 없는 목록 ul.bu.type2

  • 순서가 없는 목록.type2 입니다.
  • 순서가 없는 목록.type2 입니다.
    • 순서가 없는 중첩 목록입니다.
    • 순서가 없는 중첩 목록입니다.
      • 순서가 없는 중첩 목록입니다.
      • 순서가 없는 중첩 목록입니다.
<ul class="bu type2"> <li></li> <li></li> </ul> <!--//bu type2-->

순서없는 목록 ul.bu.type3

  • 순서가 없는 목록.type3 입니다.
  • 순서가 없는 목록.type3 입니다.
    • 순서가 없는 중첩 목록입니다.
    • 순서가 없는 중첩 목록입니다.
      • 순서가 없는 중첩 목록입니다.
      • 순서가 없는 중첩 목록입니다.
<ul class="bu type3"> <li></li> <li></li> </ul> <!--//bu type3-->

목록없는 불릿 .blt

리스트가 아닌 불릿 텍스트

리스트가 아닌 불릿 텍스트.type2

리스트가 아닌 불릿 텍스트.type3

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

순차목록 ol.num

  1. 1순서가 있는 목록입니다.
  2. 2순서가 있는 목록입니다.
  3. 3순서가 있는 목록입니다.
<ol class="num"> <li><i>1</i></li> <li><i>2</i></li> <li><i>3</i></li> </ol> <!--//num-->

순차목록 ol.num.type2

  1. 1.순서가 있는 목록입니다.
  2. 2.순서가 있는 목록입니다.
  3. 3.순서가 있는 목록입니다.
<ol class="num type2"> <li><i>1.</i></li> <li><i>2.</i></li> <li><i>3.</i></li> </ol> <!--//num type2-->

목록 제목

  • 타이틀 : 순서가 없는 목록입니다.
  • 타이틀 : 순서가 없는 목록입니다.
  • 타이틀 : 순서가 없는 목록입니다.

타이틀 : 목록없는 불릿

<ul class="bu"> <li> <div class="fac_flexbox"> <em class="title">타이틀 :</em> <span class="desc">내용</span> </div> </li> <li> <div class="fac_flexbox"> <em class="title">타이틀 :</em> <span class="desc">내용</span> </div> </li> </ul> <!--//bu--> <p class="blt"> <span class="fac_flexbox"> <em class="title">타이틀 :</em> <span class="desc">목록없는 불릿</span> </span> </p>

목록 교차 사용

  • 불릿 타입1

    목록없는 불릿1

    • 불릿 타입1

      목록없는 불릿1

      • 불릿 타입1
  • 제목 : 내용

    제목 : 내용

    1. 99제목 : 내용

      제목 : 내용

      • 제목 : 내용

        제목 : 내용

  • 불릿 타입1

    목록없는 불릿2

    1. 43불릿 타입1

      목록없는 불릿2

      1. 68불릿 타입1
  • 불릿 타입1

    목록없는 불릿3

    • 불릿 타입1

      목록없는 불릿3

      • 불릿 타입1
  1. 1넘버 타입1
    1. 1넘버 타입1
      1. 1넘버 타입1
  1. 1.넘버 타입1
    1. 1.넘버 타입1
      1. 1.넘버 타입1

테이블 유닛 .table_unit

강조테이블 상단의 내용
<div class="table_unit"><span class="skip">강조</span>내용</div>

기본 테이블

강조테이블 상단의 내용
기본 타이틀1 기본 타이틀2 기본 타이틀3 기본 타이틀4
테이블 내용 작성 테이블 내용 작성 테이블 내용 작성 테이블 내용 작성
테이블 내용 작성 테이블 내용 작성 테이블 내용 작성 테이블 내용 작성
테이블 내용 작성 테이블 내용 작성 테이블 내용 작성 테이블 내용 작성
<table class="table"> <caption></caption> <colgroup> <col style="width:25%;"/> <col style="width:25%;"/> <col style="width:25%;"/> <col style="width:25%;"/> </colgroup> <thead> <tr> <th scope="col"></th> <th scope="col"></th> <th scope="col"></th> <th scope="col"></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> <!--//table-->

세로 테이블

타이틀 테이블 내용 작성 테이블 내용 작성
타이틀 테이블 내용 작성 테이블 내용 작성
타이틀 테이블 내용 작성 테이블 내용 작성
<table class="table type2"> <caption></caption> <colgroup> <col style="width:25%;"/> <col style="width:37.5%;"/> <col style="width:37.5%;"/> </colgroup> <tbody> <tr> <th SCOPE="row">타이틀</th> <td>내용</td> <td>내용</td> </tr> </tbody> </table> <!--//table type2-->

병합 테이블

타이틀1 타이틀2 타이틀3 타이틀4
타이틀 타이틀 타이틀
세로 타이틀1 테이블 내용 작성 테이블 내용 작성 테이블 내용 작성
세로 타이틀2 테이블 내용 작성 테이블 내용 작성 테이블 내용 작성
세로 타이틀3 테이블 내용 작성 테이블 내용 작성 테이블 내용 작성
<table class="table"> <caption></caption> <colgroup> <col style="width:25%;"/> <col style="width:25%;"/> <col style="width:25%;"/> <col style="width:25%;"/> </colgroup> <thead> <tr> <th scope="col"></th> <th scope="col" colspan="2"></th> <th scope="col"></th> </tr> </thead> <tbody> <tr> <th scope="row"></th> <td></td> <td></td> <td></td> </tr> </tbody> </table> <!--//table-->

반응형 테이블 .table.responsive

기본 타이틀1 기본 타이틀2 기본 타이틀3 기본 타이틀4
테이블 내용 작성 테이블 내용 작성 테이블 내용 작성 테이블 내용 작성
테이블 내용 작성 테이블 내용 작성 테이블 내용 작성 테이블 내용 작성
테이블 내용 작성 테이블 내용 작성 테이블 내용 작성 테이블 내용 작성
<table class="table responsive"> <caption></caption> <colgroup> <col style="width:25%;"/> <col style="width:25%;"/> <col style="width:25%;"/> <col style="width:25%;"/> </colgroup> <thead> <tr> <th scope="col"></th> <th scope="col"></th> <th scope="col"></th> <th scope="col"></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> <!--//table responsive-->

스크롤 테이블

타이틀1 타이틀2 타이틀3 타이틀4
타이틀 타이틀 타이틀
세로 타이틀1 테이블 내용 작성 테이블 내용 작성 테이블 내용 작성
세로 타이틀2 테이블 내용 작성 테이블 내용 작성 테이블 내용 작성
세로 타이틀3 테이블 내용 작성 테이블 내용 작성 테이블 내용 작성
<div class="table_scroll"> <table class="table"> <caption></caption> <colgroup> <col style="width:25%;"/> <col style="width:25%;"/> <col style="width:25%;"/> <col style="width:25%;"/> </colgroup> <thead> <tr> <th scope="col"></th> <th scope="col" colspan="2"></th> <th scope="col"></th> </tr> </thead> <tbody> <tr> <th scope="row"></th> <td></td> <td></td> <td></td> </tr> </tbody> </table> <!--//table--> </div> <!--//table_scroll-->

데코 박스

개요정보 타이틀

성동구민대학은 성동구를 대표하는 평생학습기관으로서 2008년 서울시교육청 평생학습기관으로 지정된 이래 현재까지 지정평생학습 프로그램을 운영하고 있습니다. 지역주민을 위한 다채로운 평생학습 프로그램과 학습동아리를 발굴, 지원하여 지역사회 복지 증진에 기여하고 있습니다.

<div class="fac_box type_deco"> <div class="fac_box_inner"> <div class="box_title">타이틀</div> <p class="box_text">내용</p> </div> <!--//fac_box_inner--> </div> <!--//fac_box type_deco-->

텍스트 박스

개요정보 타이틀

성동구민대학은 성동구를 대표하는 평생학습기관으로서 2008년 서울시교육청 평생학습기관으로 지정된 이래 현재까지 지정평생학습 프로그램을 운영하고 있습니다. 지역주민을 위한 다채로운 평생학습 프로그램과 학습동아리를 발굴, 지원하여 지역사회 복지 증진에 기여하고 있습니다.

<div class="fac_box type_text"> <div class="fac_box_inner"> <div class="box_title">타이틀</div> <p class="box_text">내용</p> </div> <!--//fac_box_inner--> </div> <!--//fac_box type_text-->

안내 박스

강조안내사항

  • 순서가 없는 목록입니다.
  • 순서가 없는 목록입니다.

강조주의사항

  • 순서가 없는 목록입니다.
  • 순서가 없는 목록입니다.
<div class="fac_box type_warning"> <div class="fac_box_inner"> <p class="warning"><span class="skip">강조</span>안내사항</p> <div class="box_text"> <ul class="bu type3"> <li></li> <li></li> </ul> <!--//bu type3--> </div> <!--//box_text--> </div> <!--//fac_box_inner--> </div> <!--//fac_box type_warning--> <div class="fac_box type_warning type2"> <div class="fac_box_inner"> <p class="warning type2"><span class="skip">강조</span>주의사항</p> <div class="box_text"> <ul class="bu type3"> <li></li> <li></li> </ul> <!--//bu type3--> </div> <!--//box_text--> </div> <!--//fac_box_inner--> </div> <!--//fac_box type_warning type2-->

이미지 박스

이미지 이미지 확대보기
<div class="fac_box type_img"> <div class="fac_box_inner"> <img src="https://via.placeholder.com/500x500" alt="이미지" /> <div class="skip">대체텍스트</div> <span class="img_zoom"> <a href="https://via.placeholder.com/500x500" target="_blank" title="새창 이미지 확대보기">이미지 확대보기</a> </span> <!--//img_zoom--> </div> <!--//fac_box_inner--> </div> <!--//fac_box type_img-->

이미지 분할박스 박스 .fac_box.type_img.divide2 ~ 5

이미지 이미지 확대보기
이미지 이미지 확대보기
<div class="fac_box type_img divide2"> <div class="fac_box_inner"> <img src="https://via.placeholder.com/500x500" alt="이미지" /> <div class="skip">대체텍스트</div> <span class="img_zoom"> <a href="https://via.placeholder.com/500x500" target="_blank" title="새창 이미지 확대보기">이미지 확대보기</a> </span> <!--//img_zoom--> </div> <!--//fac_box_inner--> <div class="fac_box_inner"> <img src="https://via.placeholder.com/500x500" alt="이미지" /> <div class="skip">대체텍스트</div> <span class="img_zoom"> <a href="https://via.placeholder.com/500x500" target="_blank" title="새창 이미지 확대보기">이미지 확대보기</a> </span> <!--//img_zoom--> </div> <!--//fac_box_inner--> </div> <!--//fac_box type_img-->

컨텐츠 탭메뉴

<div class="tab_wrap"> <ul class="tab_list"> <li class="tab_item active"><button type="button" title="선택됨" class="tab_link"><span></span></button></li> <!--//tab_item--> <li class="tab_item"><button type="button" class="tab_link"><span></span></button></li> <!--//tab_item--> <li class="tab_item"><button type="button" class="tab_link"><span></span></button></li> <!--//tab_item--> <li class="tab_item"><button type="button" class="tab_link"><span></span></button></li> <!--//tab_item--> <li class="tab_item"><button type="button" class="tab_link"><span></span></button></li> <!--//tab_item--> </ul> <!--//tab_list--> <div class="tab_con_list"> <div class="tab_con_item active"></div> <!--//tab_con_item--> <div class="tab_con_item"></div> <!--//tab_con_item--> <div class="tab_con_item"></div> <!--//tab_con_item--> <div class="tab_con_item"></div> <!--//tab_con_item--> <div class="tab_con_item"></div> <!--//tab_con_item--> </div> <!--//tab_con_list--> </div> <!--//tab_wrap-->

링크

본문링크 : https://www.sdfac.or.kr/kor/sdfac/sub/contents.do?gotoMenuNo=02010200

<p>본문링크 : <a href="" target="_blank" title="새창" rel="noopener noreferrer" class="fac_link blank"></a></p>

버튼

기본 버튼

<div class="fac_btn_wrap"> <span class="fac_btn"><a href="" class="btn">기본 스타일1</a></span> <span class="fac_btn type2"><a href="" class="btn">기본 스타일2</a></span> <span class="fac_btn type3"><a href="" class="btn">기본 스타일3</a></span> </div> <!--//fac_btn_wrap--> <div class="fac_btn_wrap"> <span class="fac_btn small"><a href="" class="btn">작은버튼1</a></span> <span class="fac_btn type2 small"><a href="" class="btn">작은버튼2</a></span> <span class="fac_btn type3 small"><a href="" class="btn">작은버튼3</a></span> </div> <!--//fac_btn_wrap-->

아이콘 버튼

<div class="fac_btn_wrap"> <span class="fac_btn type_icon icon01"><a href="" class="btn">기본 스타일</a></span> <span class="fac_btn type_icon icon02"><a href="" class="btn">기본 스타일</a></span> <span class="fac_btn type_icon icon03"><a href="" class="btn">기본 스타일</a></span> <span class="fac_btn type_icon icon04"><a href="" class="btn">기본 스타일</a></span> <span class="fac_btn type_icon icon05"><a href="" class="btn">기본 스타일</a></span> <span class="fac_btn type_icon icon06"><a href="" class="btn">기본 스타일</a></span> </div> <!--//fac_btn_wrap--> <div class="fac_btn_wrap"> <span class="fac_btn small type_icon icon01"><a href="" class="btn">작은버튼</a></span> <span class="fac_btn small type_icon icon02"><a href="" class="btn">작은버튼</a></span> <span class="fac_btn small type_icon icon03"><a href="" class="btn">작은버튼</a></span> <span class="fac_btn small type_icon icon04"><a href="" class="btn">작은버튼</a></span> <span class="fac_btn small type_icon icon05"><a href="" class="btn">작은버튼</a></span> <span class="fac_btn small type_icon icon06"><a href="" class="btn">작은버튼</a></span> </div> <!--//fac_btn_wrap-->

폼요소

텍스트 영역

<span class="fac_form"> <input type="text" title="작성시 입력" class="fac_input" placeholder="인풋박스 활성화"> </span> <!--//fac_form--> <span class="fac_form"> <input type="text" title="작성시 입력" class="fac_input" placeholder="인풋박스 비활성화" disabled> </span> <!--//fac_form-->

셀렉트 박스

기본 셀렉트
<div class="fac_real_select_box"> <select title="셀렉트박스" class="fac_select"> <option>Select1</option> <option>Select2</option> <option>Select3</option> </select> <!--//fac_select--> </div> <!--//fac_real_select_box--> <div class="fac_real_select_box"> <select title="셀렉트박스" class="fac_select" disabled> <option>Select1</option> <option>Select2</option> <option>Select3</option> </select> <!--//fac_select--> </div> <!--//fac_real_select_box-->
가짜 셀렉트
<div class="fac_fake_select_box"> <select title="셀렉트박스" class="real_select"> <option></option> <option></option> <option></option> </select> <!--//real_select--> <div class="fac_fake_select"> <button type="button" title="하위메뉴 열기" class="fac_select_open_btn"> <span>Select1</span> </button> <!--//fac_select_open_btn--> <ul class="fake_select_list"> <li class="fake_select_item active"> <button type="button" title="선택됨" class="fake_select_btn">Select1</button> </li> <!--//fake_select_item--> <li class="fake_select_item"> <button type="button" class="fake_select_btn">Select2</button> </li> <!--//fake_select_item--> <li class="fake_select_item"> <button type="button" class="fake_select_btn">Select3</button> </li> <!--//fake_select_item--> </ul> <!--//fake_select_list--> </div> <!--//fac_fake_select--> </div> <!--//fac_fake_select_box-->

체크박스

<span class="fac_form"> <input type="checkbox" id class="fac_checkbox"> <label for>체크박스</label> </span> <!--//fac_form--> <span class="fac_form"> <input type="checkbox" id class="fac_checkbox" disabled> <label for>체크박스 비활성</label> </span> <!--//fac_form-->

라디오 버튼

<span class="fac_form"> <input type="radio" id name class="fac_radio"> <label for>라디오버튼</label> </span> <!--//fac_form--> <span class="fac_form"> <input type="radio" id name class="fac_radio" disabled> <label for>라디오버튼 비활성</label> </span> <!--//fac_form-->

라인

<div class="fac_line"></div> <div class="fac_line type2"></div> <div class="fac_line type3"></div> <div class="fac_line type4"></div> <div class="fac_line type5"></div> <span class="fac_line vertical type2"></span> <span class="fac_line vertical type4"></span> <span class="fac_line vertical type5"></span>