[티스토리 블로그 꾸미기] 제목 1, 2, 3 스타일링 (h2, h3, h4)

이전 글인 커버 이미지 변경하기에 이어, 이번에는 본문 제목 1, 2, 3 스타일링 방법에 대해 소개해드리겠습니다. 다양한 스타일링 방법이 있지만, 이번 글에서는 각 제목을 다르게 스타일링을 하는 방법을 안내해드리겠습니다.

티스토리 '북클럽' 스킨을 기준으로 진행합니다.

 

스킨 편집 들어가기

관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다. 새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다.

꾸미기 탭 안에 스킨 편집을 누른 후 새로운 창이 열리면 오른쪽 상단에 html 편집을 클릭합니다.

 

CSS 코드 바꾸기

우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다.

html 편집 창에서 우측 상단에 HTML ❘ CSS ❘ 파일업로드 중에 CSS를 클릭합니다.

 

제목 1 (h2)

 

제목 1의 기본 설정을 확인합니다. 폰트 크기 외에 다른 스타일은 적용되지 않은 것을 확인할 수 있습니다.

제목 1의 기본 설정을 확인합니다.

CSS 파일 내에서 아무 곳이나 클릭한 후, Ctrl+F를 눌러 검색창에 '#article-view h2[data-ke-size]'를 입력합니다. 보통 3674번째 줄에 있습니다.

#article-view h2[data-ke-size]

CSS 파일에서 검색창에 '#article-view h2[data-ke-size]'를 검색합니다.

아래 코드를 복사하여 '#article-view h2[data-ke-size]'에 붙여 넣으세요.

#article-view h2[data-ke-size] {
  font-size: 24px; /* 글자 크기 */
  line-height: 1.5; /* 줄 간격 */
  border-style: solid; /* 선 스타일 */
  border-width: 0 0 3px 10px; /* 아래쪽 선 굵기, 왼쪽 선 굵기 */
  border-image: linear-gradient(to right, #00BFFF, #FFD700) 1; /* 그라데이션 효과 (왼쪽에서 오른쪽으로) */
  padding: 7px; /* 텍스트와 선 사이의 여백 */
  margin: 30px 0; /* 제목 1의 위아래 여백 */
  width: 100%; /* 선이 너무 길면 %만 조정하면 됩니다. */
}

코드를 복사하여 붙여 넣습니다.

변경 후 미리보기로 제목 1의 스타일을 확인하고 저장합니다.

제목 1의 적용된 스타일링을 확인합니다.

 

제목 2 (h3)

 

제목 2의 기본 설정을 확인합니다. 폰트 크기만 다를 뿐, 다른 스타일은 적용되지 않은 것을 확인할 수 있습니다.

제목 2의 기본 설정을 확인합니다.

CSS 파일 내에서 아무 곳이나 클릭한 후, Ctrl+F를 눌러 검색창에 '#article-view h3[data-ke-size]'를 입력합니다. 제목 1의 스타일을 변경했다면 보통 3685번째 줄에 있습니다.

#article-view h3[data-ke-size]

CSS 파일에서 검색창에 '#article-view h3[data-ke-size]'를 검색합니다.

아래 코드를 복사하여 '#article-view h3[data-ke-size]'에 붙여 넣으세요.

#article-view h3[data-ke-size] {
  font-size: 22px; /* 글자 크기 */
  line-height: 1.5; /* 줄 간격 */
  font-weight: bold; /* 글자 굵기 */
  display: table; /* 테이블 형식으로 표시 */
  border-left: 10px solid #00BFFF; /* 왼쪽 선 스타일과 색상 */
  background: linear-gradient(to right, #FFA500, #FFD700); /* 오른쪽으로 향하는 그라데이션 배경 색상 */
  padding: 7px 20px 7px 7px; /* 텍스트와 선 사이의 여백 (위, 오른쪽, 아래, 왼쪽) */
  margin: 30px 0; /* 제목 2의 위아래 여백 */
  border-radius: 0 20px 20px 0; /* 배경색 오른쪽 위와 아래 모서리 둥글게 */
}

코드를 복사하여 붙여 넣습니다.

변경 후 미리보기로 제목 2의 스타일을 확인하고 저장합니다.

제목 2의 적용된 스타일링을 확인합니다.

 

제목 3 (h4)

 

제목 3의 기본 설정을 확인합니다. 폰트 크기만 다를 뿐, 다른 스타일은 적용되지 않은 것을 확인할 수 있습니다.

제목 3의 기본 설정을 확인합니다.

CSS 파일 내에서 아무 곳이나 클릭한 후, Ctrl+F를 눌러 검색창에 '#article-view h4[data-ke-size]'를 입력합니다. 제목 1과 제목 2의 스타일을 변경했다면 보통 3697번째 줄에 있습니다.

#article-view h4[data-ke-size]

CSS 파일에서 검색창에 '#article-view h4[data-ke-size]'를 검색합니다.

아래 코드를 복사하여 '#article-view h4[data-ke-size]'에 붙여 넣으세요.

#article-view h4[data-ke-size] {
  font-size: 20px; /* 글자 크기 */
  line-height: 1.5; /* 줄 간격 */
  font-weight: bold; /* 글자 굵기 */
  display: table; /* 테이블 형식으로 표시 */
  background-color: #FFD700; /* 배경 색상 */
  padding: 7px 15px; /* 텍스트와 선 사이의 여백 (위, 오른쪽과 왼쪽, 아래) */
  margin: 30px 0; /* 제목 3의 위아래 여백 */
  border-radius: 20px; /* 모든 모서리 둥글게 */
}

코드를 복사하여 붙여 넣습니다.

변경 후 미리보기로 제목 3의 스타일을 확인하고 저장합니다.

제목 3의 적용된 스타일링을 확인합니다.

똑같은 스타일로 적용해도 괜찮지만, 각 제목 별로 다른 스타일을 적용해서 구분을 주는 것이 읽을 때 더 명확하여 이해하기 좋습니다. 이 스타일들은 구글링을 통해 더 많은 스타일을 예제를 찾아볼 수 있으니, 마음에 드는 스타일을 적용해보세요. 단, 블로그의 컨셉과 잘 어울려야 하며, 과하지 않은 것이 중요합니다.

참고한 사이트는 여기입니다. 다양한 스타일을 확인해보세요!

궁금한 점이나 문제가 있으면 댓글로 알려주세요!

 

다음 글 예고

다음 글에서는 굵은 글꼴 밑줄 효과 주는 방법에 대해 소개해드리겠습니다.