[기타_블로그]2. 글자양식 종류(결론)

[기타_블로그][2. 글자양식 종류(결론)-블로그 요약]

티스토리에서 제공하는 글자양식에 대해서 전부 비교 설명함.

 

[기타_블로그]2. 글자양식 종류(결론)

티스토리에서 제공하는 에디터의 글자 양식에 대해서 분석한 결과입니다.

글을 작성하는데 크기도 안 맞고, 간격도 안맞아서 글자 양식에 대해서 확인을 해 보았습니다.

하기와 같이, 티스토리 에디터에는 글자크기를 변경할 수 있는 부분을 제공하지 않고, 6 가지의 스타일을 제공합니다.

 

[결론]티스토리 글자양식

결론적으로는 하기에 명시되어 있는 기본 스타일에서 필요한 부분을 변경해서 사용 가능합니다.

1. 기본형(기본모드에서의 표시 및 HTML형태)

<h2 data-ke-size="size26">제목1-h2</h2>

<h3 data-ke-size="size23">제목2-h3</h3>

<h4 data-ke-size="size20">제목3-h4</h4>

<p data-ke-size="size18">본문1-size18</p>

<p data-ke-size="size16">본문2-size16</p>

<p data-ke-size="size14">본문3-size14</p>

 

 

 

 

2. 추가형(기본모드에서의 표시 및 HTML형태)

    1) 기본 + 정렬 추가

<p style="text-align: left;" data-ke-size="size16">기본 + 정렬</p>

 

    2) 기본 + 들여쓰기

<p style="margin-left: 2em;" data-ke-size="size16">기본 + 들여쓰기</p>

 

    3) 기본 + 정렬 + 글자크기(%)

-. 콸호"<>"를 두개를 쓰느냐, 한개를 쓰느에 따라서 두가지 방법으로 나누어 보았습니다.

(차이를 확인하지 않았지만, 두개의 콸호를 쓰는게 더 깔끔해 보입니다.)

* 콸호를 하나를 사용한 경우

<p style="text-align: center; font-size: 100%;" data-ke-size="size16">

    기본 + 정렬 + 글자 크기(%)</p>

* 콸호를 두개를 사용한 경우

<p style="text-align: center;" data-ke-size="size16">

    <span style="font-size: 150%;">

        (New)기본 + 정렬 + 글자 크기(%)</span></p>

 

    4) 기본 + 정렬 + 글자크기(px)

* 콸호를 하나를 사용한 경우

<p style="text-align: center; font-size: 50px;" data-ke-size="size16">

    기본 + 정렬 + 글자 크기(px)</p>

* 콸호를 두개를 사용한 경우

<p style="text-align: center;" data-ke-size="size16">

    <span style="font-size: 50px;">

        (New)기본 + 정렬 + 글자 크기(px)</span></p>

 

5) 기본 + 정렬 + 글자크기(%) + 색상

<p style="text-align: center;" data-ke-size="size16">

    <span style="font-size: 150%;"><span style="color: #ee2323;">

        (New)기본 + 정렬 + 글자 크기(%) + 색상</span></span></p>

 

6) 기본 + 정렬 + 글자크기(%) + 색상 + 글간격

<p style="text-align: center;" data-ke-size="size16">

    <span style="font-size: 150%; color: #5733b1;">

        <span style="line-height: 100%;">

            (New)기본 + 정렬 + 글자 크기(%) + 색상 + 글간격</span></span></p>

 

7) 기본 + 정렬 + 글자크기(%) + 색상 + 글간격 + 백그라운드

<p style="margin-left: 2em;" data-ke-size="size16">

    <span style="font-size: 150%; color: #5733b1; background-color: #c6e0b4;">

        <span style="line-height: 100%;">

            (All)기본 + 정렬 + 글자 크기(%) + 색상 + 백그라운드 + 글간격</span></p>

 

*** Your memories make your destiny ***