티스토리 블로그, 제목 스타일 확 살리는 2가지 방법! (서식 vs CSS)

 

안녕하세요, 블로그 이웃 여러분! 😊 오늘은 우리 티스토리 블로그의 '얼굴'이라고 할 수 있는 글 제목에 예쁜 옷을 입혀주는 방법, 즉 제목 스타일 넣는 방법에 대해 알아보려고 해요.

 

밋밋한 기본 제목 대신, 내 블로그 콘셉트에 맞게 디자인된 제목을 사용하면 글의 가독성도 높이고 전체적인 분위기도 확 살릴 수 있답니다! ✨ 방법은 크게 두 가지가 있는데요, 코드를 잘 몰라도 쉽게 따라 할 수 있는 '서식' 기능을 이용하는 방법과, 블로그 전체에 일관된 스타일을 적용하는 **'스킨 편집(CSS)'**을 이용하는 방법이에요.

자, 그럼 하나씩 차근차근 알아볼까요? 😉

티스토리 블로그, 제목 스타일 확 살리는 2가지 방법! (서식 vs CSS)

 

🎨 방법 1: '서식' 기능을 이용한 제목 스타일 적용

이 방법은 미리 만들어둔 제목 디자인을 필요할 때마다 글쓰기 화면에서 불러와 사용하는 방식이에요. 특정 글에만 특별한 제목 디자인을 적용하고 싶거나, 여러 종류의 제목 디자인을 만들어두고 골라 쓰고 싶을 때 유용합니다.

1. 관리 페이지 접속: 먼저 내 티스토리 블로그 관리자 페이지에 로그인합니다.
2. 서식 관리 이동: 왼쪽 메뉴 바에서 **[콘텐츠] > [서식 관리]**를 클릭해주세요.
3. 서식 쓰기: 오른쪽 상단에 있는 [서식 쓰기] 버튼을 눌러 새로운 서식 작성 화면으로 이동합니다.
4. HTML 모드 변경: 서식 작성 화면 오른쪽 상단의 [기본모드 ▼] 를 클릭하여 [HTML] 모드로 변경합니다. (여기에 디자인 코드를 넣을 거예요!)
5. 원하는 서식 코드 입력: 이제 HTML과 CSS 코드를 이용해서 원하는 제목 디자인을 만듭니다. 아래는 간단한 예시에요. (이 코드를 그대로 쓰거나, 웹디자인 지식이 있다면 자유롭게 수정/변경해보세요!)
   • 위 예시는 <h2> 태그(보통 소제목으로 많이 사용) 왼쪽에 #ff6f61 색상의 5px 두께 테두리를 넣고, 안쪽 여백(padding), 글자색, 글자 크기, 아래쪽 여백(margin)을 조절한 코드입니다.
   • 여기에 제목을 입력하세요 부분은 나중에 실제 글 쓸 때 지우고 제목을 넣을 자리예요.

6. <h2 style="border-left: 5px solid #ff6f61; padding-left: 10px; color: #333; font-size: 1.5em; margin-bottom: 20px;">
       여기에 제목을 입력하세요
   </h2>
   
   <!-- 또는 클래스를 이용하는 방법 (CSS는 스킨 편집 CSS에 미리 정의) -->
   <!-- <h2 class="my-title-style-1">여기에 제목을 입력하세요</h2> -->

7. 미리보기: 코드를 입력했다면, 화면 왼쪽 아래의 [미리보기] 버튼을 클릭해서 디자인이 어떻게 보이는지 확인합니다.
8. 서식 저장: 미리보기에서 디자인이 마음에 들면, 서식 제목(예: '핑크 포인트 제목 스타일')을 입력하고 오른쪽 상단의 [완료] 버튼을 눌러 서식을 저장합니다.
9. 글쓰기에서 서식 불러오기: 이제 실제 글을 쓸 때, 제목을 넣고 싶은 위치에서 에디터 상단 오른쪽의 [...] (더보기) 아이콘을 클릭한 후 **[서식]**을 선택합니다.
10. 서식 선택: 내가 저장해 둔 서식 목록이 나타나면, 방금 만든 제목 서식을 클릭합니다.
11. 제목 내용 입력: 글쓰기 화면에 서식이 적용된 제목 코드가 삽입될 거예요. HTML 모드로 잠깐 변경해서 여기에 제목을 입력하세요 부분을 지우고 실제 제목 내용을 넣거나, 기본모드에서 해당 텍스트를 드래그하여 새 제목으로 바꿔 입력하면 됩니다!

👍 장점: 여러 디자인을 저장해두고 골라 쓸 수 있어요. 특정 글에만 다른 디자인 적용이 쉬워요.
👎 단점: 매번 글 쓸 때마다 서식을 불러와서 적용하고 내용을 수정해야 해서 조금 번거로울 수 있어요.

 

🚀 방법 2: 스킨 편집(CSS)을 이용한 자동 제목 스타일 적용

이 방법은 블로그 스킨의 CSS 코드를 직접 수정해서 특정 제목 태그(예: 제목1(H2), 제목2(H3))에 자동으로 스타일이 적용되도록 하는 방식이에요. 블로그 전체의 제목 디자인을 일관되게 유지하고 싶을 때 가장 효과적입니다.

1. 관리 페이지 접속: 내 티스토리 블로그 관리자 페이지에 로그인합니다.
2. 스킨 편집 이동: 왼쪽 메뉴 바에서 **[꾸미기] > [스킨 편집]**을 클릭합니다.
3. HTML 편집 클릭: 스킨 편집 화면 오른쪽 상단의 [html 편집] 버튼을 눌러주세요.
4. CSS 탭 클릭 & 코드 추가: HTML, CSS, 파일업로드 탭 중에서 [CSS] 탭을 선택합니다. 그리고 CSS 편집 창의 가장 아래쪽에 원하는 제목 스타일 코드를 추가합니다. 아래는 예시 코드예요. (블로그 스킨 구조에 따라 클래스명(.entry-content) 등은 달라질 수 있어요.)
   • 위 예시는 글 본문 영역(.entry-content) 안에 있는 <h2> 태그와 <h3> 태그에 각각 다른 스타일(글자 크기, 색상, 테두리, 여백 등)을 적용하는 코드입니다. 원하는 디자인에 맞춰 속성값을 자유롭게 변경해보세요.

5. /* 글 본문 안의 제목 2 (h2 태그) 스타일 예시 */
   .entry-content h2 {
       font-size: 1.6em; /* 글자 크기 */
       color: #2a7ae2; /* 글자 색상 */
       border-bottom: 2px solid #eee; /* 아래쪽 테두리 */
       padding-bottom: 10px; /* 테두리와 글자 사이 여백 */
       margin-top: 40px; /* 제목 위 여백 */
       margin-bottom: 25px; /* 제목 아래 여백 */
       font-weight: bold; /* 글자 굵게 */
   }
   
   /* 글 본문 안의 제목 3 (h3 태그) 스타일 예시 */
   .entry-content h3 {
       font-size: 1.3em;
       color: #555;
       margin-top: 30px;
       margin-bottom: 20px;
       /* 필요한 다른 스타일 추가 */
   }

6. CSS 적용: 코드를 추가했다면, 오른쪽 상단의 [적용] 버튼을 꼭 눌러 변경 사항을 저장합니다.
7. 글쓰기에서 확인: 이제 글쓰기 화면으로 가서 제목으로 사용할 텍스트를 입력하고, 해당 텍스트를 블록 지정한 뒤 상단의 [문단 모양] 드롭다운 메뉴에서 '제목 1'(H2) 또는 '제목 2'(H3) 등을 선택해보세요. 그리고 [미리보기] 를 클릭하면!
8. 스타일 자동 적용 확인: CSS 코드에서 스타일을 지정한 제목 태그(예: '제목 1')에만 방금 설정한 디자인이 자동으로 적용된 것을 확인할 수 있습니다! 앞으로 해당 문단 모양을 선택하기만 하면 자동으로 스타일이 입혀져요.

👍 장점: 한 번 설정해두면 글 쓸 때마다 해당 제목 태그를 사용하기만 하면 자동으로 스타일이 적용되어 매우 편리해요. 블로그 전체 디자인 통일성을 높일 수 있어요.
👎 단점: CSS 코드를 직접 수정해야 해서 초보자에게는 조금 어려울 수 있어요. 모든 글에 일괄 적용되므로 특정 글만 다르게 하려면 추가 작업이 필요해요.

 

📌 마무리하며: 어떤 방법이 가장 좋을까?

두 방법 모두 장단점이 있어서 어떤 것이 절대적으로 좋다고 말하기는 어려워요.

• 다양한 디자인을 수동으로 골라 쓰고 싶다면 → '서식' 기능 활용!
• 블로그 전체의 제목 스타일을 통일하고 자동으로 적용하고 싶다면 → '스킨 편집(CSS)' 활용!

개인적으로는 CSS로 기본적인 제목 스타일을 잡아두고, 특별히 강조하고 싶은 글이나 다른 디자인이 필요할 때만 '서식' 기능을 보조적으로 활용하는 것을 추천해 드려요.

 

오늘 알려드린 팁으로 이웃님들의 블로그가 더욱 예쁘고 개성 넘치게 바뀌길 바랍니다! 😊 궁금한 점이 있다면 언제든 댓글 남겨주세요!