많은 티스토리 블로그 사용자들이 메인 페이지 제목의 크기, 글꼴, 색상을 바꾸고 싶어 하지만, 초보자는 그 방법을 찾아도 적용하기 어려워 합니다. 저도 처음에는 제목 크기를 바꾸려 했지만, 검색을 통해 h1 태그를 수정해야 된다고 해서 h1 태그 찾으려 해도 찾을 수가 없어서 상당히 혼란스러웠어요. 결국, 다양한 방법을 적용해본 결과 헤더 p 태그가 수정하는 부분이라는 것을 알게 되었습니다. 이 경험을 바탕으로 초보자도 쉽게 기본기능으로 블로그 제목크기,글꼴,색상을 바꾸는 법을 따라 할 수 게 설명해 드리겠습니다.
메인페이지 제목 크기, 글꼴, 색상 수정 직접해보기
h1 태그와 p 태그란?
h1 태그는 HTML에서 가장 중요한 제목을 나타내는 태그로, 보통 페이지의 주제를 대표하는 내용에 사용됩니다. SEO에서 매우 중요한 역할을 하죠. 예를 들어, 페이지의 제목이나 가장 중요한 제목에 사용됩니다.
p 태그는 일반적으로 문단을 나타내는 태그입니다. 블로그의 제목이 p 태그로 설정되어 있을 경우, 그 제목은 페이지에서 문단처럼 다뤄집니다. 티스토리 블로그에서 헤더 p 태그로 제목을 설정해두면, 그 부분을 수정하여 제목 스타일을 변경할 수 있습니다.
소스 코드 수정준비 하기
제목 크기, 글꼴, 색상을 수정하려면 CSS 코드를 수정해야 해요. 우선, 티스토리 블로그 관리 화면(기어아이콘클릭)에서 왼쪽목록의 꾸미기 ㅡ> 스킨편집 -> HTML 편집을 클릭하고 -> html 옆 CSS 를 클릭해서 소스코드 수정을 준비합니다.
헤더 p 태그 찾기
처음에는 h1 태그를 찾으려고 했지만, 실제로는 헤더 p 태그가 제목을 담당하고 있다는 것을 알아냈어요. 많은 분들이 h1 태그가 메인 제목을 수정하는 부분이라고 생각할 수 있지만, 최신 티스토리 블로그에서는 p 태그가 적용된 경우가 많답니다.
색상과 글꼴을 변경하려면 CSS 코드를 추가하거나 수정해주면 됩니다. 이제부터 잘 따라해주세요
Ctrl + F를 눌러 검색란에 header p 부분을 찾습니다. 그러면 현재 기본 설정의 header p 를 볼 수 있습니다. 내 블로그의 기본 설정이 다음과 같았습니다.
수정전 메인페이지상단
상단배경색상을 바꾸는 부분
header와 header p 를 아래와 같이 수정하기
먼저 소스에서 가장 중요한 점은 다음과 같습니다.
- font-size: 제목의 크기를 조정합니다.
- font-family: 글꼴을 설정하는 부분입니다.
- header의 background-color : 배경색상을 지정합니다.
수정후 메인페이지상단
수정후 사실 그리 엄청나게 큰 변화는 아니지만 그래도 내 블로그를 내가 꾸며 본다는 즐거움은 있었습니다. 특히 초보자들은 쉽지 않은 작업일 수도 있습니다. 아래는 위 소스의 /*글꼴 바꾸는 부분*/ 에 적용하면 쓸만한 글꼴을 알려드립니다.
복사해서 소스의 글꼴 바꾸는 부분에 적용하면 다양한 글꼴로 쉽게 변경 가능합니다.
자주 쓰는 추천 한글 웹폰트
| 폰트 이름 | font-family | 예시분위기 |
| Noto Sans KR | 'Noto Sans KR', sans-serif | 깔끔, 모던 |
| Nanum Gothic | 'Nanum Gothic', sans-serif | 부드럽고 정돈됨 |
| Nanum Myeongjo | 'Nanum Myeongjo', serif | 전통적, 신뢰감 |
| IBM Plex Sans KR | 'IBM Plex Sans KR', sans-serif | 깔끔하고 전문적 |
| SUIT | 'SUIT', sans-serif (모던 UI용) | 심플, 스타트업 느낌 |
마무리
이제 티스토리 블로그 제목 크기, 글꼴, 색상을 변경하는 방법을 알게 되었으니, 자신의 블로그를 원하는 스타일로 꾸밀 수 있을 것입니다. h1 태그가 아니라 헤더 p 태그를 수정해야 한다는 점, 그리고 CSS를 활용한 간단한 스타일 변경 방법을 기억하세요. 위 방법대로 잘 따라한다면 이제 더 이상 제목 크기를 변경하는데 어려움이 없을 거예요!
이 글이 도움이 되셨다면, 직접 자신의 블로그 디자인에 적용해 보세요. 초보자도 쉽게 따라 할 수 있는 방법으로 작성된 이 포스팅이 티스토리 블로그를 꾸미는 데 큰 도움이 되기를 바랍니다.
컴퓨터 활용팁 더보기
1. 엑셀창 여러개 띄우는 레지스트리 편집 방법 직접해보기
'바로응용상식과지식' 카테고리의 다른 글
| 망원 수동레벨기로 기초석을 정밀하게 동레벨로 맞추는 실전 기술 (0) | 2025.05.01 |
|---|---|
| 항생제는 발명인가 발견인가? — 항생제의 기원과 인류를 구한 대량생산의 역사 (1) | 2025.04.29 |
| 실업급여 신청, 막막하셨나요? – 2025년 최신 실업급여 신청 방법과 조건 총정리 (2) | 2025.04.25 |
| 최신 조달청 입찰 내역 작성 프로그램 V8 사용 및 작성법 메뉴얼제공 (0) | 2025.04.25 |
| 윈도우 오류 해결 방법 – 블루스크린, 부팅 오류, 시스템 충돌 시 해결 방법 (4) | 2025.04.24 |
