티스토리 블로그 인용구 만들기 html서식만들기

▣티스토리 블로그 인용구를 만들어보자(HTML 서식만들기)

네이버 블로그를 사용하다 티스토리 에디터를 사용하니 정말 인용구가 너무 없습니다. 새로 서식을 만들어 인용구처럼 사용해야 하는데 HTML에 기초도 모르는 저로써는 정말 답이 없더군요.. 그래서 조금씩 공부해서 인용구를 만들어 봤습니다.

 

 

 

▶<P>와 <H> 태그

<p>태그는 문단을 나타내는 코드이고 <H>태그는 제목을 나타내는 코드입니다.

<h1>인용구 만들기 </h1>

<p>인용구는 이렇게 만드는 겁니다</p>

이런 식으로 작성하여 사용하고 <H>태그의 경우 <h1>,<h2>,<h3>....이렇게 사용할 수 있는데 여기서는 크게 중요하지 않으니 넘어가도록 하겠습니다.

 

▶인용구는 <h2 style>를 사용해서 꾸며보자

인용구의 경우 보통 소제목으로 많이 사용하기 때문에 <h2>코드를 사용해보겠습니다. <h2>또는 <h3>를 사용할지는 본인 취향대로 사용하시면 됩니다.

<h2 style=";"></h2> 태그의 형태는 이렇게 사용하시면 됩니다. 이제 태그의 내용을 채워 꾸며주시면 되는데 어떻게 꾸며야 할까요? [style="여기를 채워주면 됩니다"]

 

▶인용구를 만들어보자

티스토리 [인용1]을 이용해서 사용할 수 있지만 색상변경 등이 처음 접할 경우 또는 HTML을 잘 모를 경우 너무 어렵습니다. [인용1]과 같이 만드는 방법은 다음 코드와 같습니다.

 

◁이렇게 말이지요

 

만드는 방법은 다음과 같습니다.

<p style="border-left: #494848 10px solid;">◁이렇게 말이지요</p>

태그의 구조는 [테두리 왼쪽 : 색상 크기 실선] 이렇게 이루어집니다. 여기서 "border"는 테두리를 만드는 태그이고 "border"뒤에 "left"는 방향을 말합니다. "border"의 방향은 아래와 같습니다.

- border-top 위쪽 테두리

- border-bottem 아래쪽 테두리

- border-left 왼쪽 테두리

- border-right 오른쪽 테두리

 

색상의 경우 red 나 blue 등으로 해도 상관없고 코드로 해도 됩니다. HTML 색상 코드는

- HTML 컬러 코드 : https://html-color-codes.info/Korean/

여기서 확인하실 수 있습니다.

 

테두리의 방향과 색상을 결정하셨다면 이제 어떻게 구성될지를 정하는 건데 실선 또는 점선 등은 아래와 같습니다.

- solid 실선

- dotted 점선

- double 이중선(실선)

 

이외에도 더 있지만 여기까지만 적겠습니다. 응용을 해보자면

 

◁이렇게 말이지요

<p style="border-left: #01DFD7 30px solid;">◁이렇게 말이지요</p>

◁이렇게 말이지요

<p style="border-left: red 10px double;">◁이렇게 말이지요</p>

◁이렇게 말이지요

<p style="border-left: #FF00FF 10px dotted;">◁이렇게 말이지요</p>

이렇게 만들어 볼 수 있습니다.

 

▶글자도 꾸며보자

인용구에 들어갈 글자크기와 색상 또는 글씨체를 바꿔보려고 합니다. 과연 어떤 태그가 들어가야 할까요?

- font-size 글자 크기

- <b></b> 굵게

- font-family 글씨체(맑은 고딕, San-serif(고딕체)) 등

 

◁이렇게 말이지요

<p style="border-left: #FF00FF 10px solid;">
<b><span style ="font-size: 12pt; font-family:'궁서체';">◁이렇게 말이지요</span></b></p>

 

 

▶응용해보자

여기까지 만들었다면 이제 응용을 해보고자 합니다. 아래쪽에 실선도 넣고 글씨체도 바꾸고 해서 요렇게 한번 만들어 보고자 합니다.

 

 

 

border-left를 먼저 만들어 주세요.

<h2 style="borer-left: #494848 10px solid;"></h2>

borer-left를 만들었다면 이제 아래쪽 선도 만들어야겠죠?

<h2 style="border-left: #494848 10px solid; border-bottom:#494848 3px solid;"></h2>

   

여기까지 코드가 작성되면 위와 같이 보이게 되는데 이것을 이제 여백도 조정하면서 크기를 조정해야 합니다. 마찬가지로 여백의 경우 pading-bottom(아래),pading-top(위),margin(바깥쪽여백)을 사용하여 조정하면 됩니다.

- pading : 본문과 border 사이의 여백

- margin : border 바깥쪽의 여백

- line-height : 글 줄 간격

- line-

 

<h2 style="border-left: #494848 10px solid;padding-right: 10px; border-bottom: #494848 3px solid;
pading-bottom: 2px; padding-top: 0px; margin: 10px 0px 5px;
line-height: 30px;"></h2>

 

텍스트는 이렇기 때문에

여기까지 완료되었다면 이제 위에서 했듯이 텍스트를 꾸며주시면 됩니다.

<span style ="font-size: 12pt; font-family:'궁서체';"><b></b></span>

</h2>앞부분에 위와 같은 코드를 넣어 주시면 됩니다.