[티스토리 HTML] 글자 크기 변경, 글자색/배경색 입력 방법 총 정리

HTML을 이용할 줄 알면 그 어떤 블로그 보다도 자유롭고 예쁘게 글을 꾸밀 수 있습니다.

티스토리 에디터를 처음 사용하시는 분들은 글자 크기 설정이 따로 없고, 글자색이나 배경색은 34개밖에 없어서 당황해합니다. 기본 모드에서 HTML로 바꿔봐도 잘 모르겠어서 디자인 자체를 포기하시는 분들도 있습니다.

하지만 전공자 만큼의 지식이 아닌 HTML 사용법만 알고 있으면 글에 더 다양하고 많은 효과를 줄 수 있습니다.

1. 글자 크기 변경하기

예시)

18px: 18px 설정 완료

20px: 20px 설정 완료

글자 크기를 변경하는 법은 다음과 같습니다.

HTML로 글자 크기 설정하기

<span style="font-size: ??px">크기를 변경할 글</span>

에디터를 기본 모드에서 html로 변경한 뒤 위의 ??자리에 원하는 글자 크기(font-size)를 입력해주시면 됩니다.

사진에서와 같이 보통 기본 모드에서 html로 바꾸면 작성한 글이 <p></p>사이에 있는 것을 확인할 수 있습니다. p는 paragraph의 약자로 단순히 단락을 구분하는 역할을 합니다.

span은 본질적으로 아무것도 나타내지 않지만 보통 스타일을 적용하기 위해 사용합니다. 단순히 특정 부분을 꾸미기 위해 묶어서 구분하는 것이라고 보면 됩니다. 

2. 글자색, 배경색 코드 입력하기

티스토리 에디터 기본모드에서 선택할 수 있는 색상은 매우 한정적입니다. 따라서 아래의 색상 코드 입력 부분을 활용해야 다양한 색상을 나타낼 수 있습니다.

색상 코드 입력

아래의 사이트를 활용하면 원하는 색상을 아주 쉽게 얻을 수 있습니다.

HTML Color Codes

사이트에 들어가시면 위와 같은 색상 선택 화면이 나옵니다.

원하는 색상을 클릭하기만 하면 아래에 Color code가 뜹니다. 이를 복사하셔서 글자색이나 배경색 아래 부분에 붙여 넣기 하시면 원하는 색상으로 변경하실 수 있습니다. (예: #A9F5E1 색상)

html에서 색상은 #000000이나 #FFFFFF과 같이 16진수 (0~F)를 이용하여 나타냅니다. 색상이 어두울수록 검은 색인 #000000에 가깝고 밝을수록 흰 색인 #FFFFFF에 가까운 숫자로 표현됩니다.