여러가지/티스토리

티스토리 들여쓰기 / 글씨체 추가 하는 법

소금간장_ 2021. 12. 2.

도움받은 사이트

https://homzzang.com/b/css-104

홈짱닷컴

홈페이지 제작, 그누보드 강의, 웹코딩, HTML, CSS, JAVASCRIPT, JQUERY, PHP, SQL

homzzang.com

이전버전에서의 티스토리 글쓰기 에디터에선 탭키로 들여쓰기가 가능했지만 새로운 에디터로 바뀌면서 그 기능이 사라졌다.

새 에디터에서도 들여쓰기를 하기 위해선 HTML을 이용해야 한다.

0. 들어가기 전에

*<a>는 태그, 태그들을 이용하여 구체적인 기능을 구현한 것을 편의상 코드라고 부름(보다보면 뭔소린지 이해감. 근데 야매라 이런 표현이 맞는 표현인지 아닌지는 나도 모름 알못임(아마 99% 틀린표현일거임) )

1. 을 기준으로 들여쓰기 하는 방법

이 방법을 이용하여 위의 글을 HTML을 사용하여 티스토리에 쓴다면 아래와 같이 크게 세가지로 나눌 수 있음
(HTML 내에서의 엔터는 실제 글에 영향을 미치지 않으므로 자유롭게 써도 된다)

들여쓰기를 어느정도로 할지 설정하는 코드 / 글씨 크기를 포함한 각종 본문 설정 / 태그를 포함한 본문 내용

㉮ 들여쓰기 코드 (span의 스타일 지정)

<style>
span {
padding-left: 15px;
}
</style>

이 코드를 복사해서 HTML 내 아무곳에나 붙여넣으면 해당 글 전체의 들여쓰기 설정을 정할 수 있음.

숫자부분을 바꿔서 어느정도로 들여쓰기를 할 것인지 정할 수 있다.
이 들여쓰기 코드는 위치에 상관없이 HTML 내에 입력되어 있기만 하면 무조건적으로 적용이 됨. 다른 말로 하자면 한번 15px로 고정하면 다음 단락에선 40px로 들여쓰기하고 이러는건 불가능하단 이야기임. 그냥 그 글의 전체적인 기본 서식을 부여하는 거라고 생각하면 편할 듯.

주의사항: 이 방법을 사용하면 코드를 붙여넣은 후에 기본모드로 돌아가 글을 작성하면 안됨. 기본모드로 돌아갈 시 아래에서 설명할 태그를 포함하여 작성해놓은 코드가 날라가서 들여쓰기가 사라지기 때문. 글을 모두 마무리 한 후에 코드를 붙여넣는 것을 추천.

㉯ 글 내용 코드

"어쩌면 아주 훌륭할 수도 있죠! 생각해 보세요.마침내 모든 갈등이 완전히 끝나고, 슈퍼 컴퓨터 혼자 무한한 힘을 발휘하게 되었으니까요!" 석영 뒤에서 타오르던 불은 완전히 꺼지고, 한 줄기 연기만 남아 불타던 자리를 가리키고 있었다. -피할 수 있는 갈등(아이작 아시모프)

태그는 엔터를 의미함. 문장 앞 뒤에 를 입력하면 완성된 글을 볼 때 를 기준으로 문장이 나눠져 있는 걸 확인할 수 있다. 개수에 따라 엔터를 몇번칠지를 결정할 수 있음.

중요한건 태그. 얘를 문장의 시작점마다 적어주질 않으면 그 문장은 들여쓰기가 적용이 안됨.

은 으로 시작한 문장을 끝내는 태그.(* <a>는 해당 기능을 여는 태그, </a>는 닫는 태그인 형식임)

이 여기서부터 지정한 스타일을 적용해 달라는 표시라면 은 스타일 적용을 여기까지만 해달라는 표시.

따라서 글의 단락에 들여쓰기를 하고 싶을 때에는 그 단락 맨 첫 문장의 앞에 태그를 붙여줘야함.

참고로 은 굳이 하나하나 안써도 글 업로드 하면 티스토리가 알아서 붙여줌

㉰ 각종 서식(정렬, 글자크기, 폰트 등) 코드

순서대로 문자정렬 / 글씨 크기 / 폰트를 설정함.

이 부분은 코드를 직접 작성하기보단 빈 글쓰기를 하나 연 후 기본모드에서 원하는 서식을 지정한 다음에 HTML을 들어가 거기서 보이는 코드를 복사하는게 마음 편함.
그래도 기본적인 것만 한번 정리해보자면,

글자크기 data-ke-size=	제목 1 "size26"	제목 2 "size23"	제목 3 "size20"	본문 1 "size18"	본문 2 "size16"	본문3 "size14"
폰트 style="font-family:	기본서체 AppleSDGothicNeo-Regular;"	본고딕R 'Noto Sans Demilight';"	본고딕L 'Noto Sans Light';"	나눔고딕 'Nanum Gothic';"	본명조 'Noto Serif KR';"	궁서 GungSeo, serif;"
정렬 style="text-align:	왼쪽	가운데 center;"	오른쪽 right;"	양쪽 justify;"
이 외	굵게 <b>문장</b>	기울임꼴 <i>문장</i>	밑줄 <u>문장</u>	취소선 <s>문장</s>	글자색 color: #컬러코드;"	배경색 background-color: #컬러코드;"

응용하면 이럼

"어쩌면 아주 훌륭할 수도 있죠! 생각해 보세요.마침내 모든 갈등이 완전히 끝나고, 슈퍼 컴퓨터 혼자 무한한 힘을 발휘하게 되었으니까요!" 석영 뒤에서 타오르던 불은 완전히 꺼지고, 한 줄기 연기만 남아 불타던 자리를 가리키고 있었다.
 

-피할 수 있는 갈등(아이작 아시모프)