Frontend/CSS

티스토리 본문 가독성을 높이는 CSS 커스텀 팁 (H태그, 인용구)

미니임 2026. 2. 28. 23:07

 

티스토리 기본 스킨을 사용하다 보면 제목(H2, H3)이나 인용구가 다소 심심하게 느껴질 때가 있습니다. 가독성이 좋은 블로그는 독자가 정보를 훨씬 빠르게 습득하게 하며, 이는 체류 시간 증가로 이어집니다. 이번 포스팅에서는 간단한 CSS 수정만으로 블로그의 완성도를 높이는 방법을 소개합니다.

1. 제목 태그(H2, H3) 커스텀하기

제목은 글의 뼈대입니다. 독자가 스크롤을 내릴 때 "여기서부터 새로운 내용이 시작된다"는 것을 명확히 인지시켜야 합니다.

스타일 1: 왼쪽 강조 바(Bar) 스타일

가장 깔끔하면서도 전문적인 느낌을 주는 스타일입니다. border-left를 활용해 포인트 컬러를 줍니다.

[적용 예시]

/* 본문 내 H2 태그 스타일 */
.entry-content h2 {
    padding: 10px 15px;
    border-left: 8px solid #3498db; /* 포인트 컬러 */
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 20px;
    font-size: 1.4em;
    font-weight: bold;
    color: #2c3e50;
}

스타일 2: 하단 밑줄 강조 스타일

심플한 디자인을 선호한다면 하단에 두꺼운 선을 넣는 방식이 좋습니다.

[적용 예시]

/* 본문 내 H3 태그 스타일 */
.entry-content h3 {
    padding-bottom: 8px;
    border-bottom: 3px solid #e74c3c;
    display: inline-block; /* 텍스트 길이에 맞춰 선이 그어짐 */
    margin: 30px 0 15px 0;
    font-size: 1.25em;
    color: #333;
}

2. 인용구(Blockquote) 커스텀하기

인용구는 강조하고 싶은 문장이나 핵심 요약을 보여줄 때 사용합니다. 기본 디자인보다 박스 형태를 강조하면 시선 분산 방지에 효과적입니다.

스타일 1: 모던한 박스 스타일

배경색과 옅은 테두리를 사용하여 본문과 확실히 구분되게 만듭니다.

[적용 예시]

/* 인용구 스타일 1 */
.entry-content blockquote {
    padding: 20px;
    background-color: #fcfcfc;
    border: 1px dashed #ced4da;
    border-left: 5px solid #2ecc71;
    color: #555;
    font-style: italic;
    line-height: 1.8;
    margin: 20px 0;
}

스타일 2: 큰 따옴표 강조 스타일

상단에 큰 따옴표 아이콘(또는 가상 요소)을 넣어 "누군가의 말"임을 강조하는 클래식한 스타일입니다.

[적용 예시]

/* 인용구 스타일 2 */
.entry-content blockquote.style2 {
    position: relative;
    padding: 30px 20px 20px 20px;
    background-color: #fff;
    text-align: center;
    border: none;
}

.entry-content blockquote.style2::before {
    content: '"';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 40px;
    color: #bdc3c7;
    font-family: serif;
}

3. 적용 방법 (Tistory 설정)

작성한 CSS를 블로그에 적용하는 방법은 아주 간단합니다.

  1. 티스토리 관리자 페이지 진입
  2. '꾸미기' > '스킨 편집' 클릭
  3. 우측 상단의 'html 편집' 버튼 클릭
  4. 상단 탭에서 'CSS' 선택
  5. 맨 아래쪽으로 스크롤하여 위에서 복사한 코드를 붙여넣기
  6. '적용' 버튼을 눌러 저장

주의사항

  • 사용 중인 스킨에 따라 본문 클래스명(.entry-content)이 다를 수 있습니다. 스킨 소스 보기를 통해 정확한 클래스명을 확인하세요. (보통 .tt_article_usr 혹은 .article_view 등을 사용하기도 합니다.)
  • 색상 코드(#3498db 등)는 본인의 블로그 테마 색상에 맞춰 변경하면 더욱 일체감 있는 디자인이 됩니다.

가독성이 좋아지면 글을 끝까지 읽는 완독률이 높아집니다. 오늘 소개한 간단한 코드들로 여러분의 소중한 콘텐츠를 더욱 돋보이게 만들어 보세요.

반응형