글 본문의 Headings 글꼴 크기 수정 (feat. 밑줄 넣기)

결과물 미리보기

Headings 글꼴 크기 수정

티스토리에서 글쓰기를 할 때 제목1, 제목2, 제목3 은 나중에 발행했을 때 각각 h2, h3, h4 가 된다. 여기에서 h1 이 빠진 이유는 글 제목 = h1 이기 때문이다. 수정 전 (Before) 과 후 (After) 의 Headings 글꼴 크기 값은 아래 표에서 보는 바와 같다. 기존 값보다 적게는 0.125rem 많게는 0.25rem 을 크게 수정하였다.

	Before	After
h2	1.25rem	1.5rem
h2 (1100px 이상)	1.5rem	1.625rem
h3	1.125rem	1.25rem
h3 (1100px 이상)	1.25rem	1.375rem
h4	1rem	1.125rem
h4 (1100px 이상)	1.125rem	1.25rem

H2 아래에 밑줄 넣기

결과물 미리보기에서 확인할 수 있듯이, h2 는 단순히 글꼴 크기만 수정한 것이 아니라 아래에 밑줄을 넣고, padding 과 margin 도 넣어주었다 (아래 CSS 코드 참조).

  --tw-border-opacity: 0.7;
  border-bottom: 1px solid rgb(230 230 233 / var(--tw-border-opacity)) !important;
  padding-bottom: 0.5rem;
  margin-top: 3em;
  margin-bottom: 1rem;

수정된 CSS 코드 확인

Headings 글꼴 크기와 h2 아래에 밑줄 넣기 등을 모두 포함하여 수정이 완료된 CSS 코드는 아래와 같다.

#content .contents_style h2 {
  font-size: 1.5rem;
  line-height: 1.75rem;
  --tw-border-opacity: 0.7;
  border-bottom: 1px solid rgb(230 230 233 / var(--tw-border-opacity)) !important;
  padding-bottom: 0.5rem;
  margin-top: 3em;
  margin-bottom: 1rem;
}

@media (min-width: 1100px) {
  #content .contents_style h2 {
    font-size: 1.625rem;
    line-height: 2rem
  }
}

#content .contents_style h3 {
  font-size: 1.25rem;
  line-height: 1.75rem
}

@media (min-width: 1100px) {
  #content .contents_style h3 {
    font-size: 1.375rem;
    line-height: 1.75rem
  }
}

#content .contents_style h4 {
  font-size: 1.125rem;
  line-height: 1.5rem
}

@media (min-width: 1100px) {
  #content .contents_style h4 {
    font-size: 1.25rem;
    line-height: 1.75rem
  }
}