font

글꼴관련 클래스입니다.

font-family .font-family-1 .font-family-2 .font-family-3
font-size .font-size-1 .font-size-2 .font-size-3 .font-size-4 .font-size-5 .font-size-6 .font-size-7 .font-size-8 .font-size-9 .font-size-10 .font-size-11
font-weight .font-weight-100 .font-weight-200 .font-weight-300 .font-weight-400 .font-weight-500 .font-weight-600 .font-weight-700 .font-weight-800 .font-weight-900
font-style .italic
text-decoration .underline .overline .line-through
line-height .line-height-100 .line-height-110 .line-height-120 .line-height-130 .line-height-140 .line-height-150 .line-height-160 .line-height-170 .line-height-180 .line-height-190 .line-height-200
text-align .text-align-left .text-align-right .text-align-center .justify
title-style .title-style-1 .title-style-2 .title-style-3
text-strike-1 .text-strike-1 .text-strike-2 .text-strike-3

font-family

코드

<div>
    <li class="font-family-1">명조체가 적용된 텍스트입니다.</li>
    <li class="font-family-2">Arial폰트가 적용된 텍스트입니다.</li>
    <li class="font-family-3">Roboto폰트가 적용된 텍스트입니다.</li>
</div>
설명

취향에 맞게 추가,변경해서 사용할 수 있습니다.

결과화면CSS code

  • 명조체가 적용된 텍스트입니다.
  • Arial폰트가 적용된 텍스트입니다.
  • Roboto폰트가 적용된 텍스트입니다.

    • font-size

    코드1

    <div>
    <p class="font-size-1">font-size-1</p>
    <p class="font-size-2">font-size-2</p>
    <p class="font-size-3">font-size-3</p>
    <p class="font-size-4">font-size-4</p>
    <p class="font-size-5">font-size-5</p>
    <p class="font-size-6">font-size-6</p>
    <p class="font-size-7">font-size-7</p>
    <p class="font-size-8">font-size-8</p>
    <p class="font-size-9">font-size-9</p>
    <p class="font-size-10">font-size-10</p>
    <p class="font-size-11">font-size-11</p>
</div>

    코드2

    <div>
    <p class="size-12">font-size-1</p><!-- font-size:12px -->
    <p class="size-14">font-size-2</p><!-- font-size:14px -->
    <p class="size-16">font-size-3</p><!-- font-size:16px -->
    <p class="size-18">font-size-4</p><!-- font-size:18px -->
    <p class="size-21">font-size-5</p><!-- font-size:21px -->
    <p class="size-24">font-size-6</p><!-- font-size:24px -->
    <p class="size-32">font-size-7</p><!-- font-size:32px -->
    <p class="size-48">font-size-8</p><!-- font-size:48px -->
    <p class="size-64">font-size-9</p><!-- font-size:64px -->
    <p class="size-80">font-size-10</p><!-- font-size:80px -->
    <p class="size-96">font-size-11</p><!-- font-size:96px -->
</div>
    설명

    코드1과 코드2의 결과화면은 같습니다.

    결과화면CSS code

    font-size-1

    font-size-2

    font-size-3

    font-size-4

    font-size-5

    font-size-6

    font-size-7

    font-size-8

    font-size-9

    font-size-10

    font-size-11

    font-size (Editor)

    코드

    <div>
    <p class="f-xsmall">f-xsmall</p>
    <p class="f-small">f-small</p>
    <p class="f-size">f-size</p>
    <p class="f-large">f-large</p>
    <p class="f-xlarge">f-xlarge</p>
    <p class="f-xxlarge">f-xxlarge</p>
    <p class="f-xxxlarge">f-xxxlarge</p>
    <p class="f-big">f-big</p>
    <p class="f-huge">f-huge</p>
</div>
    설명

    에디터상에서 적용되는 폰트 사이즈입니다.

    에디터상의 아이콘과 글자크기CSS code

  • f-xsmall

  • f-small

  • f-size

  • f-large

  • f-xlarge

  • f-xxlarge

  • f-xxxlarge

  • f-big

  • f-huge

    • m-font-size (Editor)

    Markup code

    <div>
    <p class="m-f-xsmall">f-xsmall</p>
    <p class="m-f-small">f-small</p>
    <p class="m-f-size">f-size</p>
    <p class="m-f-large">f-large</p>
    <p class="m-f-xlarge">f-xlarge</p>
    <p class="m-f-xxlarge">f-xxlarge</p>
    <p class="m-f-xxxlarge">f-xxxlarge</p>
    <p class="m-f-big">f-big</p>
    <p class="m-f-huge">f-huge</p>
</div>
    설명

    모바일 옆으로보기 화면에 적용되는 폰트 클래스입니다.

    CSS code

    
@media screen and (max-width:683px){
.m-f-xsmall{font-size:0.75em !important}
.m-f-small{font-size:0.875em !important}
.m-f-size{font-size:1em !important}
.m-f-large{font-size:1.16em !important}
.m-f-xlarge{font-size:1.45em !important}
.m-f-xxlarge{font-size:1.75em !important}
.m-f-xxxlarge{font-size:2.25em !important}
.m-f-big{font-size:4.5em !important}
.m-f-huge{font-size:6em !important}
}

    e-font-size (Editor)

    Markup code

    <div>
    <p class="e-f-xsmall">f-xsmall</p>
    <p class="e-f-small">f-small</p>
    <p class="e-f-size">f-size</p>
    <p class="e-f-large">f-large</p>
    <p class="e-f-xlarge">f-xlarge</p>
    <p class="e-f-xxlarge">f-xxlarge</p>
    <p class="e-f-xxxlarge">f-xxxlarge</p>
    <p class="e-f-big">f-big</p>
    <p class="e-f-huge">f-huge</p>
</div>
    설명

    모바일 바로보기 화면에 적용되는 폰트 클래스입니다.

    CSS code

    
@media screen and (max-width:439px){
.e-f-xsmall{font-size:0.75em !important}
.e-f-small{font-size:0.875em !important}
.e-f-size{font-size:1em !important}
.e-f-large{font-size:1.16em !important}
.e-f-xlarge{font-size:1.45em !important}
.e-f-xxlarge{font-size:1.75em !important}
.e-f-xxxlarge{font-size:2.25em !important}
.e-f-big{font-size:4.5em !important}
.e-f-huge{font-size:6em !important}
}

    font-weight

    코드

    <div>
    <li class="font-weight-100">font-weight 100이 적용된 텍스트</li>
    <li class="font-weight-200">font-weight 200이 적용된 텍스트</li>
    <li class="font-weight-300">font-weight 300이 적용된 텍스트</li>
    <li class="font-weight-400">font-weight 400이 적용된 텍스트</li>
    <li class="font-weight-500">font-weight 500이 적용된 텍스트</li>
    <li class="font-weight-600">font-weight 600이 적용된 텍스트</li>
    <li class="font-weight-700">font-weight 700이 적용된 텍스트</li>
    <li class="font-weight-800">font-weight 800이 적용된 텍스트</li>
    <li class="font-weight-900">font-weight 900이 적용된 텍스트</li>
</div>
    설명

    글꼴의 두께로 100~900 사이의 숫자를 통해 설정합니다. 기본값은 normal입니다.

    결과화면CSS code

  • font-weight 100이 적용된 텍스트
  • font-weight 200이 적용된 텍스트
  • font-weight 300이 적용된 텍스트
  • font-weight 400이 적용된 텍스트
  • font-weight 500이 적용된 텍스트
  • font-weight 600이 적용된 텍스트
  • font-weight 700이 적용된 텍스트
  • font-weight 800이 적용된 텍스트
  • font-weight 900이 적용된 텍스트

    • font-style

    코드

    <div>
    <li class="italic">font-style italic이 적용된 텍스트</li>
</div>
    설명

    글꼴을 기울여 표시할때 사용합니다.

    결과화면CSS code

  • font-style italic이 적용된 텍스트

    • text-decoration

    코드

    <div>
    <li class="underline">텍스트 하단라인</li>
    <li class="overline">텍스트 상단라인</li>
    <li class="line-through">텍스트 중간라인</li>
</div>
    설명

    텍스트에 선을 생성합니다.

    결과화면CSS code

  • 텍스트 하단라인
  • 텍스트 상단라인
  • 텍스트 중간라인

    • line-height

    코드

    <div class="line-height-100">글자크기의 1배 줄높이</div>
<div class="line-height-110">글자크기의 1.1배 줄높이</div>
<div class="line-height-120">글자크기의 1.2배 줄높이</div>
<div class="line-height-130">글자크기의 1.3배 줄높이</div>
<div class="line-height-140">글자크기의 1.4배 줄높이</div>
<div class="line-height-150">글자크기의 1.5배 줄높이</div>
<div class="line-height-160">글자크기의 1.6배 줄높이</div>
<div class="line-height-170">글자크기의 1.7배 줄높이</div>
<div class="line-height-180">글자크기의 1.8배 줄높이</div>
<div class="line-height-190">글자크기의 1.9배 줄높이</div>
<div class="line-height-200">글자크기의 2.0배 줄높이</div>
    설명

    줄높이를 정하는 속성입니다.
    ex)글자크기가 30px일때 line-height의 값을 1.5로 하면 줄 높이는 30의 1.5배인 45px이 됩니다.

    결과화면CSS code

    글자크기의 1배 줄높이
    글자크기의 1.1배 줄높이
    글자크기의 1.2배 줄높이
    글자크기의 1.3배 줄높이
    글자크기의 1.4배 줄높이
    글자크기의 1.5배 줄높이
    글자크기의 1.6배 줄높이
    글자크기의 1.7배 줄높이
    글자크기의 1.8배 줄높이
    글자크기의 1.9배 줄높이
    글자크기의 2.0배 줄높이

    text-align

    코드

    <div class="text-align-left">텍스트 좌측정렬</div>
<div class="text-align-center">텍스트 중앙정렬</div>
<div class="text-align-right">텍스트 우측정렬</div>
<div class="text-align-justify">텍스트 양끝정렬</div>
    설명

    텍스트의 정렬 방향을 지정합니다.

    결과화면

    텍스트를 좌측으로 정렬합니다.텍스트를 좌측으로 정렬합니다.텍스트를 좌측으로 정렬합니다.
    텍스트를 중앙으로 정렬합니다.텍스트를 중앙으로 정렬합니다.텍스트를 중앙으로 정렬합니다.
    텍스트를 우측으로 정렬합니다.텍스트를 우측으로 정렬합니다.텍스트를 우측으로 정렬합니다.
    텍스트를 좌우 양끝으로 정렬합니다.텍스트를 좌우 양끝으로 정렬합니다.텍스트를 좌우 양끝으로 정렬합니다.텍스트를 좌우 양끝으로 정렬합니다.

    title-style-1

    코드

    <div class="title-style-1">
    <h4>title-style-1이 적용된 제목글입니다.</h4>
</div>

    결과화면

    title-style-1이 적용된 제목글입니다.

    title-style-2

    코드

    <div class="title-style-2">
    <h4>title-style-2가 적용된 제목글입니다.</h4>
</div>

    결과화면

    title-style-2가 적용된 제목글입니다.

    title-style-3

    코드

    <div class="title-style-3">
    <h4>title-style-3이 적용된 제목글입니다.</h4>
</div>

    결과화면

    title-style-3이 적용된 제목글입니다.

    text-strike-1

    코드

    <div class="overflow-hidden">
    <h4 class="text-strike-1">text-strike-1이 적용된 제목글입니다.</h4>
</div>

    결과화면

    text-strike-1이 적용된 제목글입니다.

    코드

    <div class="overflow-hidden text-align-center">
    <h4 class="text-strike-1">text-strike-1이 적용된 제목글입니다.</h4>
</div>
    설명

    텍스트 양쪽에 라인을 생성합니다. 부모요소에 overflow:hidden 속성이 포함되어야 합니다.

    결과화면

    text-strike-1이 적용된 제목글입니다.

    text-strike-2

    코드

    <div class="overflow-hidden">
    <h4 class="text-strike-2">text-strike-2가 적용된 제목글입니다.</h4>
</div>

    결과화면

    text-strike-2가 적용된 제목글입니다.

    코드

    <div class="overflow-hidden text-align-center">
    <h4 class="text-strike-2">text-strike-2가 적용된 제목글입니다.</h4>
</div>
    설명

    텍스트 양쪽에 점선라인을 생성합니다. 부모요소에 overflow:hidden 속성이 포함되어야 합니다.

    font-size

    font-size정의
    
/* font-size */
.font-size-1,.size-12{font-size:12px}
.font-size-2,.size-14{font-size:14px}
.font-size-3,.size-16{font-size:16px}
.font-size-4,.size-18{font-size:18px}
.font-size-5,.size-21{font-size:21px}
.font-size-6,.size-24{font-size:24px}
.font-size-7,.size-32{font-size:32px}
.font-size-8,.size-48{font-size:48px}
.font-size-9,.size-64{font-size:64px}
.font-size-10,.size-80{font-size:80px}
.font-size-11,.size-96{font-size:96px}

    font-size(Editor)

    에디터상의 font-size정의
    
/* 글꼴크기(editor) */
.f-xxxsmall{font-size:0.563em}
.f-xxsmall{font-size:0.688em}
.f-xsmall{font-size:0.75em}
.f-small{font-size:0.9em}
.f-size{font-size:1em} 
.f-large{font-size:1.16em}
.f-xlarge{font-size:1.45em}
.f-xxlarge{font-size:1.75em}
.f-xxxlarge{font-size:2.25em}
.f-big{font-size:4.5em}
.f-huge{font-size:6em}

    line-height

    line-height정의
    
/* line-height */
.line-height-100{line-height:1}
.line-height-110{line-height:1.1}
.line-height-120{line-height:1.2}
.line-height-130{line-height:1.3}
.line-height-140{line-height:1.4}
.line-height-150{line-height:1.5}
.line-height-160{line-height:1.6}
.line-height-170{line-height:1.7}
.line-height-180{line-height:1.8}
.line-height-190{line-height:1.9}
.line-height-200{line-height:2}

    font-family

    font-family정의
    
/* 글꼴 */
.font-family-1{font-family:'Nanum Myeongjo',Gulim,sans-serif;} /*명조*/
.font-family-2{font-family:Arial; font-weight:600;} /*숫자전용*/
.font-family-3{font-family:'Roboto Condensed',sans-serif;} /*영문전용*/

    text-decoration

    text-decoration 정의
    
/* text-decoration */
.text-decoration-underline,.underline{text-decoration:underline} 
.text-decoration-overline,.overline {text-decoration:overline} 
.text-decoration-line-through,.line-through {text-decoration:line-through}

    font-weight

    font-weight 정의
    
/* font-weight */
.font-weight-100,.weight-100{font-weight:100}
.font-weight-200,.weight-200{font-weight:200}
.font-weight-300,.weight-300{font-weight:300}
.font-weight-400,.weight-400{font-weight:400} /* normal */
.font-weight-500,.weight-500{font-weight:500}
.font-weight-600,.weight-600{font-weight:600}
.font-weight-700,.weight-700,.bold{font-weight:700} /* bold */
.font-weight-800,.weight-800{font-weight:800}
.font-weight-900,.weight-900{font-weight:900}

    font-style

    font-style 정의
    
/* font-style */
.font-italic,.italic{font-style:italic}