티스토리 제목 편집, 모바일 편집
티스토리를 운영하다 보면 제목이나 본문 크기 등을 변경하고 싶은 경우가 있습니다. 티스토리는 html과 css를 기반으로 하기 때문에, 관련 지식이 있으면 원하는 대로 글자 크기나 디자인 등을 변경할 수 있습니다.
여기서는 간단하게 티스토리 제목 서식, 디자인을 변경하는 방법에 대해 알아보겠습니다. 티스토리 스킨 가운데 북클럽을 기준으로 설명하겠습니다.
우선, 티스토리 제목을 편집하려면 티스토리 관리로 들어가셔야 합니다.
관리에서 <스킨 편집>을 클릭하시면 스킨 편집 창으로 들어갈 수 있습니다.
스킨 편집 창에서 <html 편집>을 클릭합니다.
그러면 아래와 같이 코딩 문서를 보실 수 있습니다.
코딩 문서에는 html, CSS, 파일 업로드 카테고리가 보일 텐데요. 여기서 다시 CSS를 클릭합니다. CSS에 대해 간략히 설명하자면, 티스토리에 구현되는 UI나 텍스트를 디자인해주는 코딩 문서라고 이해하시면 됩니다.
따라서 CSS를 클릭하시면, 디자인과 관련된 코딩 내용과 주석들을 볼 수 있습니다.
CSS 앞 부분을 보시면 CSS CONTENS(목차)가 나옵니다. 이 목차는 어떤 순서로 티스토리 북클럽 스킨을 디자인했는지 알려주는 주석(설명)입니다. 이 가운데 저희가 관심을 가질 부분은 붉은 박스로 표시한 두 영역입니다.
- 06. Entry Content
- 12. Media Screen
간단하게 설명드리면 Entry Content는 본문 텍스트 디자인을 말하는 것이고, Media Screen은 뷰어 사이즈에 따른 디자인을 말하는 것입니다. Media Screen에 관심을 두는 이유는, 모바일 뷰어에서 제목을 변경할 때 이 부분을 건드려야 하기 때문입니다.
일단 컴퓨터상에서 제목 서식을 수정하는 방법을 알아보겠습니다.
티스토리에서 문서를 작성할 때 제목 서식이 존재합니다.
제목1, 제목2, 제목3, 본문1, 본문2, 본문3 형태로 선택이 가능하죠.
우리가 알아야 할 것은 제목1, 제목2 등과 대칭되는 CSS 코딩 구문입니다.
해당하는 CSS 코딩을 수정하면 제목 글자나 색깔, 서식 등을 변경할 수 있습니다.
CSS 편집 창에서 Ctrl + f 키를 눌러 entry_content 를 검색해 보세요.
자, 그러면 위와 같은 구문이 보일 겁니다.
옆에 보이는 1418, 1420 등의 줄 위치는 코딩을 수정하고 안 했느냐에 따라 차이가 있으니 신경 쓰지 마시기 바랍니다.
붉은 박스로 제가 표시한 entry-content h2와 entry-content h3가 보이시나요?
바로 이 entry-content h2와 entry-content h3가 제목 디자인을 관리하는 영역입니다.
entry-content h2 = 제목1
entry-content h3 = 제목2
제목1, 제목2는 이렇게 매칭이 됩니다. 즉 entry-content h3 구문을 수정하면 제목2의 글자 크기와, 디자인, 서식 등을 변경할 수 있습니다.
간단하게 예를 들어 보겠습니다.
entry-content h3을 수정해 보겠습니다.
.entry-content h3 {
clear: both;
margin: 29px 0 22px;
font-size: 1.3125em;
line-height: 1.5;
color: #000;
}
위와 같이 되어 있는 h3 구문에 다음 내용을 추가해 줍니다.
.entry-content h3 {
clear: both;
margin: 29px 0 22px;
font-size: 1.3125em;
line-height: 1.5;
color: #000;
font-weight: bold;
border-left: solid 0.5em #04beb8;
border-bottom: solid 1px #04beb8;
padding-left: 1em;
text-indent: 0;
margin-bottom: 0.4em;
}
붉은색 텍스트가 제가 추가한 코딩 내용입니다.
그러면 제목2의 서식이 다음처럼 변화합니다.
제목에 녹색의 바와 언더라인이 생긴 것을 볼 수 있습니다.
추가한 구문을 간략하게 설명하면 다음과 같습니다.
font-weight: bold; //글자에 볼드를 입힌다
border-left: solid 0.5em #04beb8; // 텍스트 왼쪽에 크기 0.5em, 색깔 #04beb8 형태로 바를 하나 만든다.
border-bottom: solid 1px #04beb8; // 텍스트 아래에 크게 1px, 색깔 #04beb8 형태로 줄을 만든다.
padding-left: 1em;
text-indent: 0; // 글자 들여쓰기 관련
margin-bottom: 0.4em; // 제목과 다음 줄 텍스트 사이에 0.4em만큼 거리를 둔다.
만약 제목의 크기와 색을 수정하고 싶으면 다음처럼 수정하면 됩니다.
.entry-content h3 {
clear: both;
margin: 29px 0 22px;
font-size: 2em;
line-height: 1.5;
color: #04beb8;
}
font-size는 폰트의 크기는 말하는 것이고,
color는 폰트의 글자색을 의미합니다.
조금씩 조절해 보면서 자신에게 맞는 크기와 색을 찾아보시면 됩니다.
자, 이런 식으로 제목을 수정하고 서식을 변경할 수 있습니다.
문제는 바로 이 변경이 모바일에서는 적용이 안 된다는 점입니다.
이유는 바로 스크린 뷰어 크기에 따라 CSS 서식이 달리 적용되기 때문입니다.
그래서 위에서 언급한 Media Screen을 찾아봐야 합니다.
CSS 창에서 Ctrl + f를 눌러 media screen을 찾아보세요.
두어 번 검색하다 보면 다음 부분을 확인하실 수 있습니다.
@media screen and (max-width:767px) 라고 써져 있고 그 옆에 ' { ' 가 보이실 겁니다. 이게 무슨 의미인가 하면, 가로 뷰어 767px 이하인 뷰어에서는 아래 { } 안의 내용을 적용시킨다, 하는 그런 의미입니다.
여는 괄호 ' { '가 보이면 이에 대칭되는 닫는 괄호 ' } ' 가 필요한데, 닫는 괄호를 찾아보면 한참 밑으로 내려야 확인할 수 있습니다.
보이시나요? 2400대에서 시작된 여는 괄호가, 3100대에 이르러서 닫는 괄호가 생겼습니다.
즉 두 괄호 사이에 적힌 다양한 코딩 내용이, 모바일 뷰어에서 적용되는 디자인 서식이라는 뜻입니다.
이해가 되셨는지 모르겠네요.
다시 설명하면, 바로 이 media screen 아래에 포함된 여는 괄호와 닫는 괄호 사이에 제목 서식을 추가로 넣어야 모바일에서도 제목 디자인 서식이 적용된다는 말입니다.
저는 다음과 같은 위치에 추가로 .entry-content h3를 추가했습니다.
위 그림에서 붉은 박스 위치에 .entry-content h3 구문을 새로 만들어서 넣었습니다.
동일한 구문을 모바일 용으로 하나 더 추가한 것입니다.
그러면 모바일에서도 제목2의 서식과 디자인이 변경된 것을 확인할 수 있습니다.
다 아시겠지만, CSS를 변경하면 적용 버튼을 클릭해야 변경 내용이 반영됩니다.
그리고 위험을 대비해서 CSS를 수정하기 전에는 코딩 내용을 복사해서 메모장 등에 저장해 두시기 바랍니다.
지금까지 티스토리 스킨을 변경하는 법과, 제목 서식을 수정하는 법을 알아보았습니다.
처음에는 본문과 매칭되는 CSS 구간을 찾는 게 처음에는 어렵습니다.
해당하는 구문을 확인하셨으면, 조금씩 수정해 보면서 자기만의 디자인을 적용해 보시기 바랍니다.
티스토리 스킨 제목 편집 CSS 서식
티스토리 스킨 제목 편집 CSS 서식 티스토리는 스킨 편집을 이용해서 제목 폰트나 디자인을 변경할 수 있습니다. html과 CSS를 아시는 분이라면 다양한 디자인 변경도 가능합니다. 이번 포스팅
goroletter.com
티스토리 스킨 썸네일, 관련글 사이즈 수정하는 법
티스토리를 운영하다 보면 은근히 거슬리는 부분이 있습니다. 바로 관련글과 메일에 나오는 썸네일입니다. 사이즈도 정사각형이 아니고, 그림 이미지도 짤리는 경우가 많아서 지저분해 보입니
goroletter.com
구글이 좋은 블로그를 판단하는 조건
구글은 어떻게 좋은 문서 순위를 매기는가? 구글 검색 엔진은 자체 AI 시스템을 도입하여 문서의 품질을 검사합니다. 적합성과 연관성, 그리고 문서의 품질을 검사하여 최적의 조건을 만족시키
goroletter.com
'블로그' 카테고리의 다른 글
| 티스토리 스킨 썸네일, 관련글 사이즈 수정하는 법 (0) | 2022.10.23 |
|---|---|
| 티스토리 스킨 제목 편집 CSS 서식 (0) | 2022.10.21 |
| 구글이 좋은 블로그를 판단하는 조건 (0) | 2022.10.06 |
댓글