[HTML/CSS] 티스토리 hELLO 스킨 본문의 제목 폰트 스타일 변경 및 선 추가

1. 문제 발견

  hELLO 스킨을 사용하는 중, 글쓰기 수정 페이지에서 본문의 스타일을 변화하면 제대로 적용이 되지만, 제목의 스타일 변화는 적용되지 않는 현상을 파악하였습니다.

글 수정 페이지

 

  ⚠ 위와 같이 글을 수정할 때 제목과 본문에 볼드 처리를 하였습니다. 하지만 이러한 적용이 본문 글에만 적용되고 제목에는 적용되지 않는 현상을 볼 수 있는데요. 다음 사진을 보시면 알 수 있습니다.

글 제목에 변경사항 적용 X

 

  위 사진을 보시면 제목 부분에 볼드 처리가 되지 않은 것을 볼 수 있습니다. 이는 hELLO 스킨의 CSS의 해당 부분의 스타일이 고정되어 있기 때문입니다. 따라서 해당 부분의 CSS를 수정해야 합니다. 

 

2. CSS 수정

1) 기존 설정 확인

   hELLO 스킨의 제목 설정은 1~3까지 있으며 이는 CSS에서 h2~h4로 설정 되어 있습니다. (h1은 블로그 글의 대제목에 사용됩니다.) 아래는 CSS 해당 코드문입니다. 

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

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

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

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

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

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

 

2) 설정 변경

  이제 해당 폰트 사이즈를 변경해야 합니다. 아래는 변경 값을 정리해놓은 표입니다.

	변경 전 값	변경 후 값
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
h2 (1100px 이상)	1.125rem	1.25rem

 

  또한 제목1(h2) 경우, 가독성을 높이기 위해 굵기와 아래의 밑줄을 추가하려 합니다. 

  font-weight: 700;
  --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;

 

3. 결과

  아래는 수정 후 CSS 코드 입니다.

#content .contents_style h2 {
  font-size: 1.5rem;
  font-weight: 700;
  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
  }
}

 

변경된 본문 제목

 

  티스토리 블로그는 일반 사용자들이 수정하기에 불편한 점들이 있지만 개발자가 되기 위한 공부에는 확실히 유익한 것 같습니다.