티스토리 제목, 테두리 점선, 하이퍼링크 꾸미기 서식 만들기 및 설명

2019/04/22 - 티스토리 서식 만들기

서식 만들기는 위의 링크를 이용하세요.

 

설명이 필요 없으면

 

태그를 그냥 복사해서 사용하시면 됩니다.

 

제목 입력하는 태그

 

제목 입력

제목 서식

<h3 style="border-left: 10px solid black; border-bottom: 2px solid black; padding-left: 7px; padding-bottom: 1px; margin: 0px;">제목 입력</h3>

 

가운데 정렬하는 태그

가운데 정렬

<p style="text-align: center;">가운데 정렬하는 태그</p>

 

점선안에 글쓰는 태그

 

내용

점선안에 글쓰는 태그

<div style="border: 2px dashed black; background-color: white; padding: 7px;">내용</div>

 

하이퍼 링크 꾸미는 태그

 

내용

하이퍼 링크 꾸미는 태그

<div style="border: 1px solid black; border-width: 2px; padding: 7px; background-color: #dddddd; color: blue; font-size: 13pt;">내용</div>

 

위의 태그를 서식으로 만들어서

 

글쓰는데 약간의 도움이 되었으면 좋겠습니다.

 

 

제목 서식 중

<h3 style="border-left: 10px solid black; border-bottom: 2px solid black; padding-left: 7px; padding-bottom: 1px; margin: 0px;">제목 입력</h3>

 

h3 - 글자 크기, 숫자가 작아질수록 글자는 커짐

border-left: 10px solid black; - 왼쪽 10픽셀, 실선, 검은색으로 표시

border-bottom: 2px solid black; - 아래쪽, 2픽셀, 실선, 검은색으로 표시

padding-left: 7px; - 글자가 왼쪽에서 7픽셀 떨어져서 써지게

padding-bottom: 1px; - 글자가 아래에서 1픽셀 떨어져서 써지게

margin: 0px; - 여백 없음

 

border에서 px 앞의 숫자를 수정하면 두깨가 수정되고,

 

black를 수정하면 색상이 수정 됩니다.

 

white, blue, red 등

 

rgb를 사용하셔도 되는데 이부분은 패스 하겠습니다.

 

padding은 글자의 위치를 수정하는 것으로

 

숫자가 커질수록 border부분에서 떨어져서 글자가 입력 됩니다.

 

 

 

가운데 정렬 태그

<p style="text-align: center;">가운데 정렬하는 태그</p>

 

티스토리 도구모음에도 있지만

 

단축키가 없어서 

 

처음에 지정하고 사요하면 편리합니다.

 

text-align: center; - 글자의 위치를 센터(중앙)에 위치하게 함

 

 

점선안에 글쓰는 태그

<div style="border: 2px dashed black; background-color: white; padding: 7px;">내용</div>

 

border: 2px dashed black; - 2픽셀, 점섬, 검은색으로 표시

숫자를 변경하면 점선의 두깨 변경

background-color: white; - 글자의 배경색을 흰색으로 표시

black, gray, blue, red, #000000, rgb(255,255,255) 등으로 변경 가능

padding: 7px; - 점선과의 거리를 7픽셀 띄움

 

 

 

하이퍼링크 꾸미는 태그

<div style="border: 1px solid black; border-width: 2px; padding: 7px; background-color: #dddddd; color: blue; font-size: 13pt;">내용</div>

 

border-width: 2px; - 테두리 선의 두깨를 2픽셀로

color: blue; - 글자 색상을 파랑색으로

font-size: 13pt; - 글자 크기를 13포인트로

숫자가 커질수록 글자가 커짐

 

 

서식을 개인 취향에 맞게 변경이 가능하도록

 

간략한 설명을 덧붙였습니다.