HTML/CSS 뜻과 티스토리 글자 색 변경, 글자 크기, 글자 간격 변경하는 방법

티스토리는 네이버 블로그와 달리, 구글 애드센스 적용 등 블로그 운영에 대한 자유도가 높습니다.

그러나 자유도가 높은 만큼, 운영하는 방법도 일반인들에겐 다소 생소할 수 있습니다.

 

네이버 블로그는 글을 꾸미는 도구가 티스토리보다 친절하고 사용하기 편리합니다.

각종 서식, 표 그리기 도구 등 접근성이 쉽다는 장점이 있습니다.

 

그러나 티스토리는 서식을 변경하는 것이 초보자들에게는 매우 까다로울 수 있습니다.

티스토리는 HTML/CSS 문법으로 사용자가 직접 컨트롤해야 하기 때문입니다.

 

HTML과 CSS 그리고 JS

조금이라도 웹개발에 관심이 많으신 분들은 HTML 이라는 말은 많이 들어보셨을 것입니다.

HTML은 Hyper Text Markup Language의 약자로써, 웹페이지 내의 제목, 표, 이미지, 문단, 동영상 등을 정의하는 구조를 의미합니다.

정적 언어로써 웹 구조의 기본이라고 할 수 있겠습니다.

건물로 비유하자면 주요골조를 의미하고, 사람의 몸으로 비유하자면 뼈라고 볼 수 있겠습니다.

따라서 HTML로 페이지를 예쁘게 만드는 것은 다소 어불성설이라 할 수 있겠습니다.

합리적이고 효율적인 "구조"를 담당하는 언어라 볼 수 있겠습니다.

 

 

CSS는 Cascading Style Sheets의 약자로써, Markup 언어(HTML, XML ...)가 실제로 화면상에 어떻게 표시되는 지(색, 크기, 간격, 글꼴, 레이아웃 등)를 정의하는 정적 언어입니다.

웹의 시각적인 구조를 담당합니다.

건물로 비유하자면 마감을 의미하는 것이고, 사람의 몸으로 비유하자면 피부라고 볼 수 있겠습니다.

따라서 웹을 예쁘게 만들기 위해선 바로 이 CSS 쪽은 건드려 주셔야 합니다.

 

티스토리는 위의 2가지 언어를 기반으로 자신의 블로그를 어떻게 효율적으로 배치하는 지(HTML), 그리고 그 위치를 어떻게 예쁘게 꾸미는 지(CSS)를 사용자가 직접 컨트롤 해주셔야 합니다.

 

네이버 블로그는 이 기능을 모두 UI에 담아 마치 MS office를 쓰는 것 처럼 사용자가 HTML/CSS 언어를 건드리지 않고도 블로그를 꾸밀 수 있게 도와주지만요!

 

추가 참고사항!

 

 

티스토리에서는 크게 다룰 일이 없지만, 개인 웹/홈페이지를 구성하는 분들, 그리고 웹페이지를 전문적으로 다루시는 분들은 아마 이 JS(Java Script)를 다루게 되실 겁니다.

 

JS는 주로 웹페이지 내용들을 변경하고 움직이게 하는 등의 동적인 기능을 정의하는 것을 담당합니다.

이 이유로, 위의 2가지 언어(정적 언어)와는 다르게 동적 언어로 정의가 됩니다.

사람의 몸으로 비유하자면, 어떠한 동작을 정의하는 것이고, 건물은... 일단은 움직이지 않으니까 지진과 바람/진동에 대한 동적응답..? 과 비슷해질까요?

 

웹페이지에서 3가지 언어가 담당하는 role을 시각적으로 표현하면 아래와 같습니다.

 

그렇다면 티스토리에선 무엇을 바꿔야 하나요?

티스토리 글 작성 페이지로 들어가시면, 우측 상단에 "기본모드", "마크다운", "HTML" 이 존재합니다.

따라서 글 안에서의 세부적인 서식을 변경하기 위해선 저 메뉴에서 HTML 을 건드려야 한다는 것을 유추할 수 있습니다.

 

이와는 반대로 블로그의 일반적인 서식을 변경하고 싶다면, (ex. 기본 글꼴) 아래와 같이 CSS 를 건드려야 한다는 것을 유추할 수 있습니다. (HTML은 블로그의 기본구성을 바꾸는 언어임)

 

정리하자면, 

• 블로그의 일반적인 서식을 변경하고 싶다. → <스킨 편집> 메뉴에서 CSS 내용을 변경.
• 포스팅 내의 세부적인 서식을 변경/적용하고 싶다. → 글쓰기 메뉴에서 HTML 내용을 변경.

 

티스토리에서 글자색, 글자 크기, 글자 간격 바꾸는 법

짧게 끝내려고 했지만, 어쩌다보니 서론이 길었습니다.

소제목은 "티스토리에서 글자 색 바꾸는 법" 이라 하였지만, 사실은 HTML/CSS 문법을 활용하여 글자 색을 바꾸는 법이라고 이해하시면 더 좋을 것 같습니다.

 

1. 블로그 내의 기본 글자색, 글자 크기, 글자 간격 바꾸기

기본 글자색을 변경하는 방식은 본인이 적용하고 있는 스킨에 따라 적용방식이 다소 상이할 수 있습니다.

저는 가장 대중적으로 사용되고 있는 "북클립" 스킨을 사용하고 있습니다.

 

1. <스킨 편집> → <HTML편집> → <CSS> 를 선택합니다.

2. Ctrl+f 를 눌러, "entry-content p" 를 검색합니다. (여기서 p 태그는 본문을 의미합니다.)

3. font-size는 폰트크기, line-height는 글자 간격, color는 글자 색을 의미합니다.

4. 폰트 크기에서 "em"단위는 동적으로 변경되는 사이즈를 의미하며, 기본 폰트는 16px 입니다. 

ex. 1em = 16px, 2em = 32px

5. "em" 단위 외에 "%" 와 "px"를 적용할 수 있습니다.

6. 글자 색은 "헥스(16진수) 색상 코드" 로써 아래 URL을 참고 바랍니다.

https://namu.wiki/w/%ED%97%A5%EC%8A%A4%20%EC%BD%94%EB%93%9C

본문 폰트 변경부분(CSS)

참고로 entry-content p 외에 그 위에 entry-content h1 ~ h4 도 존재합니다.

p 태그를 포함한 h1 ~ h4 태그 영역은 아래와 같습니다.

 

p = 티스토리 포스팅 본문 부분

h1 = 티스토리 포스팅 제목 부분

h2 = 제목1

h3 = 제목2

h4 = 제목3

2. 포스팅 내의 글자색 바꾸기

포스팅 내에서의 글자색을 변경하기 위해선 두 가지 방법이 있습니다.

1. 티스토리 글쓰기에서 제공하는 기본 서식 기능 활용

2. 티스토리 글쓰기 페이지에서 HTML 페이지로 이동하여 수정

왜 쉬운 1번 방법을 두고 2번 방법을 활용하나 생각이 드시겠지만, 티스토리 서식도구는 상당히 불친절합니다.

예를 들면 표 도구를 활용하여 각각의 배경색, 글자색, 글자간격/정렬 등을 변경하려 할 때 내 맘대로 되지 않는 것을 발견할 수 있을 것입니다.

 

HTML 문법을 모두 이해하면 좋겠지만, 우리는 시간이 없으므로... 아래 예시를 들어 설명을 간단하게 해보겠습니다.

 

<변경 전>

<p style="text-align: left;" data-ke-size="size16">예를 들면 표 도구를 활용하여 각각의 배경색, 글자색, 글자간격/정렬 등을 변경하려 할 때 내 맘대로 되지 않는 것을 발견할 수 있을 것입니다.</p>

 

<변경 후>

<p style="text-align: left; color:#009933;" data-ke-size="size16">예를 들면 표 도구를 활용하여 각각의 배경색, 글자색, 글자간격/정렬 등을 변경하려 할 때 내 맘대로 되지 않는 것을 발견할 수 있을 것입니다.</p>

앞서, 스킨 편집에서 기본글꼴 등을 변경할 때, p 태그가 본문 태그라는 것을 배웠었죠?

기본적인 p 태그의 속성을 정의하고, 이 페이지에서 각 p 태그별로 세세한 속성을 정의하는 것입니다.

 

p 태그 안의 style 은 직관적으로 이해할 수 있듯이, 서식(style)의 속성을 의미합니다.

text-align 은 문자정렬을 정의하는 공간으로 유추할 수 있겠습니다.

text-align:left 는 정의된 p 태그 안의 문자들의 정렬을 왼쪽정렬로 하라는 것도 유추할 수 있습니다.

 

글자 색은 color 로써 정의합니다.

그리고 각 속성별로 ; 로 구분하여 줍니다. (마지막 속성도 반드시 ; 를 넣어줍니다.)

색상코드는 위에 말씀드린 것과 같이 헥스(16진수) 색상코드를 넣어줍니다.

 

위의 글자 색 이외의 속성 변경은 아래와 같습니다.

태그	속성	값
text-align	글자 정렬	left, right, center
color	글자 색	헥스(16진수) 색상 코드, red, blue, ...
font-size	글자 크기	em, %, px
background-color	글자 배경색	헥스(16진수) 색상 코드, red, blue, ...

글자 크기는 아래와 같이 정의할 수 있습니다.

 

 

 

마치며

이렇게 복잡한 문법을 왜 다룰까? 라고 생각이 드실 수도 있습니다.

저도 티스토리를 처음 할 때 어차피 서식도구가 있는데 이걸 굳이..? 라고 생각했었기 때문입니다.

 

하지만, 직접 써보시면 알게 되실 것입니다.

특히, 표 도구 안에서 서식을 적용하려 하면 내가 의도한대로 절대 되지 않습니다.

티스토리 서식도구는 정말 불친절한 도구이기 때문입니다.

 

간단한 서식 변경은 되도록 티스토리 서식도구를 활용하되,

도표 내의 서식 변경 등의 복잡한 서식 변경을 적용하기 위해선 반드시 HTML 언어를 적용하여 변경하여야 합니다.

 

다행히... HTML 코드는 다른 여타 프로그래밍언어보다 난이도가 쉬운 것에 위안을 삼아봅니다.