'서식' 태그의 글 목록 :: yongs

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

 

설명이 필요 없으면

 

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

 

제목 입력하는 태그

 

제목 입력

제목 서식

<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포인트로

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

 

 

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

 

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

 

 

서식 만들기

 

위의 제목과 같은 서식을 만들어 보겠습니다.

 

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

 

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

 

티스토리 관리자 화면에서 서식관리를 클릭 합니다.

 

화면 오른쪽에 서식쓰기를 클릭 합니다.

 

 

그럼 예전 글쓰기 에디터가 나오는데

 

여기서 발행은 티스토리 글발행이 아니고,

 

서식으로 발행이 되는거라 본인만 볼 수 있습니다.

 

 

 

 

서식의 제목을 작성하고

 

본문을 작성 합니다.

 

본문을 작성할 때 HTML에 체크를 꼭 해야 합니다.

 

본문은 위에 적어 놓았던 제목 서식을 사용하면 됩니다.

 

 

미리보기 화면 입니다.

 

제목입력 이라는 글자와

 

왼쪽에 검은색 칸이, 아래는 밑줄이 있습니다.

 

사용된 html, style은 다음포스팅에 설명하겠습니다.

 

 

다 작성했으면 발행을 눌르고,

 

팝업창의 저장버튼을 눌러 완료 합니다.

 

 

서식 관리에

 

본문 제목이라는 서식이 

 

만들어 진것을 확인 할 수 있습니다.

 

 

글쓰기 에디터에서 적용해보겠습니다.

 

글쓰기 버튼을 클릭합니다.

 

 

에디터 도구모음 오른쪽에 ... 을 클릭 합니다.

 

아래 리스트가 나오는데 서식을 클릭 합니다.

 

 

방금 만들었던 본문 제목을 클릭합니다.

 

 

제목을 입력하면 됩니다.

 

 

서식을 사용하면

 

포스팅 할 때 조금 더 빠르고 편리하게 

 

사용이 가능하니 참고하시기 바랍니다.

 

+ Recent posts