Inspiring Future, Grand Challenge

Search
Close
Search
 

페이지 샘플

텍스트기본

<p> 내용 </p>

 

 

폰트 크기 / 색상 / 백그라운드

p-type01

p-type02

p-type03

p-type04

p-type05

 

white

red

blue

green

lgreen

bold

 

bg-gray

bg-dark

bg-blue

bg-green

bg-orange

 

<p class="p-type01">성균관대학교</p>

p-type01 blue 조선 성균관의 전통을 계승한 세계 최고(最古)의 역사


<p class="p-type02"><span class="red">유학사상</span>에 기초한 <span class="orange">전인교육</span>과 문명연구에 매진</p>

p-type02 유학 사상에 기초한 orange 전인교육과 문명연구에 매진


<p class="p-type03 "><span class="green">본학부의</span> 장학기관인 양현재에서는 양현재생을 선발</p>

p-type03  본 학부의 장학기관인 양현재에서는 양현재생을 선발


<p class="p-type04">장학기관 양현재</p>

p-type04  장학기관 양현재


<p class="p-type05">성균관대학교</p>

p-type05 성균관대학교

 

<p class="p-quote">성균관대학교</p>

p-quote 성균관대학교

 

<div class="middle">

<p class="p-quote green">성균관대학교</p>

</div>

성균관대학교


<p class="mark01">성균관대학교</p>

mark01 성균관대학교

 

<p class="mark02">전자부품은 전자전기,소재,화학,기계등 다양한 기술분야의 융복합산업</p>

mark02 전자부품산업은 전자전기, 소재, 화학, 기계 등 다양한 기술분야의 융복합산업

 

 

내용강조-박스

<div class="remark-box">
내용페이지
<div>

 
(사용예시)
 
<div class="remark-box">
<p class="p-type04 bg-dark ">
국가공인자격증</p>
<p>
발달재활사(놀이심리분야-보건복지부), 보육교사2급(보건복지부-필수과목이수, 기관실습), 유치원 정교사2급(교육부-2학년2학기, 11월중 신청/필수과목이수, 기관실습), 청소년상담사3급(보건복지부)</p>
<p>
&nbsp;</p>
<p class="p-type04 bg-dark">
민간자격증</p>
<p>
그림책통합교육지도사(한국직업능력평가원), 발달심리사(한국발달심리학회), 아동상담사(한국아동학회)</p>
</div>

 

국가공인자격증

발달재활사(놀이심리분야-보건복지부), 보육교사2급(보건복지부-필수과목이수, 기관실습), 유치원 정교사2급(교육부-2학년2학기, 11월중 신청/필수과목이수, 기관실습), 청소년상담사3급(보건복지부)

 

민간자격증

그림책통합교육지도사(한국직업능력평가원), 발달심리사(한국발달심리학회), 아동상담사(한국아동학회)

 

여백

<p class="mg-b10">텍스트문구</p>

mg-b10 : 10픽셀 아래 여백
mg-b20  : 20픽셀 아래 여백

mg-b30 : 30픽셀 아래 여백

mg-b45 : 45픽셀 아래 여백

mg-b60 : 60픽셀 아래 여백

mg-b90 : 90픽셀 아래 여백

mg-left : 1폰트 만큼 왼쪽 여백 

mg-left30: 30픽셀 왼쪽여백

 

 

제목 타이틀

<h4 class="h4-tit00">제목</h4>

h4-tit00

 

<h4 class="h4-tit01">제목</h4>

h4-tit01

<h4 class="h4-tit02">제목</h4>

h4-tit02

 

<h4 class="h4-tit03">제목</h4>

h4-tit03

 

 

<h5 class="h5-tit00">제목</h5>

h5-tit00

<h5 class="h5-tit01">제목</h5>

h5-tit01

<h5 class="h5-tit02">제목</h5>

h5-tit02

 

 

목록 ul

<ul class="ul-type01">

     <li>목록1</li>

     <li>목록2</li>
</ul>

 

 

<ul class="ul-type02">

     <li>목록1</li>

     <li>목록2</li>
</ul>

 

 

 

<ul class="ul-type03">

     <li>목록1</li>

     <li>목록2</li>
</ul>

 

 

 

<ul class="ul-type04">

     <li>목록1</li>

     <li>목록2</li>
</ul>

 

 

 

<ul class="ul-type05">

     <li>목록1</li>

     <li>목록2</li>
</ul>

 

 

<ul class="ul-bg">

     <li><span class="p-type02 blue">01</span> 유학대학</li>

     <li><span class="p-type02 blue">02</span> 문과대학</li>
</ul>

 

 

 

타이틀 작성법 예시 h4-tit01, h5-tit01

 

<h4 class="h4-tit01">특별프로그램</h4>

<h5 class="h5-tit01">삼성전자 사업장 견학</h5>

 <p> 신입생 및 우수학생은 매년 실리콘 밸리 방문</p>

 

 

특별프로그램

삼성전자 사업장 견학

신입생은 및 우수학생은 매년 실리콘 밸리 방문

 

<h5 class="h5-tit02">삼성전자 인턴십 운영</h5>

 <p class="mg-left"> 하계 및 동계방학에 삼성전자 반도체 사업장에서 다년간 연구경험을 가진 전문가가 직접 현장교육을 담당</p>

 

삼성전자 인턴십 운영

하계 및 동계방학에 삼성전자 반도체 사업장에서 다년간 연구경험을 가진 전문가가 직접 현장교육을 담당

 

ul-type01 ,  ul-type02 활용 예시

<ul class="ul-type01">

    <li>

      <ul class="ul-type02">

        <li></li>

       <li></li>

      </ul>

    </li>

   <li>

   </li>

</ul>

 

 

ul-type03 ,  ul-type04 활용 예시

 

 

 

 

h5-tit01,  ul-type01 활용 예시

<h5 class="h5-tit03">h5-tit01 제목내용</h5>

   <ul class="ul-type01">

     <li></li>

     <li></li>

   </ul>

 

h5-tit01 제목내용

 

<h5 class="h5-tit03">h5-tit01 제목내용</h5>

   <ul class="ul-type01 mg-left">

     <li></li>

     <li></li>

   </ul>

 

h5-tit01 제목내용 ul-type01 들여넣기

 

 

list-num

<ul class="list-num">

<li class="blue">

 

<ul class="list-num">

<li class="green">