블로그스팟에서 h3태그에 CSS 입히기, 부제목 태그(h3 tag) 멋있게 꾸미는 방법

블로그스팟(blogspot)에서 가장 많이 쓰는 h태그는 아마도 h3일 것입니다. 블로그스팟에서 모든 h태그가 그렇듯이 h3 태그도 너무 밋밋해서 많은 분들이 스타일을 설정해서 사용하고 있습니다. 이 글에서는 h3 태그를 쓰면 자동으로 미리 정해진 스타일이 적용되도록 하는 방법을 알려드리겠습니다.

블로그스팟에서 h3태그에 CSS 입히기, 부제목 태그(h3 tag) 멋있게 꾸미는 방법

블로그스팟(블로거)에서 글을 작성할 경우 대부분 주제목을 h1 태그로 하고, h2는 제목으로, 부제목은 h3를 사용합니다. 위에 있는 그림의 왼쪽이 전형적인 블로그스팟 포스팅 형태인데 보시다시피 상당히 밋밋하기 때문에 많은 블로거가 오른쪽과 같이 스타일을 적용해서 보기 좋게 꾸미고 있습니다. 이 글에서는 h태그중 가장 많이 사용하는 h3를 미리 설정해 놓은 스타일이 적용될 수 있도록 하는 방법에 대해서 상세히 알아보도록 하겠습니다.

1. 블로그스팟에서 h3 태그 가독성 향상 방법

블로그스팟을 시작하고 글을 작성할 경우 보통 아래와 같은 구조를 사용합니다. 그런데 보시다 시피 중제목과 본문을 구분하는 것이 글자의 크기와 굵기입니다. 그래서 가독성을 좋게 하고 보기 좋게 하기 위해서는 수작업으로 일일히 스타일을 정해줘야 합니다.

아래는 위의 그림의 "1.중제목(단락제목)"을 이 포스팅의 첫번째 그림의 오른쪽과 같이 조그만 블럭과 밑줄이 보이도록 스타일을 적용하는 코드입니다.

<h3 style="border-bottom-color: rgb(142, 142, 142); 
          border-bottom-style: solid; 
          border-left-color: rgb(94, 77, 121); 
          border-left-style: solid; 
          border-width: 1px 10px; 
          box-sizing: border-box; 
          line-height: 1.3; 
          margin: 5px 0px; 
          padding: 5px; 
          font-family: 'Noto Sans Demilight'; 
          color: #4c4c4c; 
          font-size: 23px; 
          letter-spacing: -1px;">
    1.중제목(단락제목)
</h3>

그런데 이 코드를 중제목을 사용할 때마다 매번 추가해 준다면 매우 번거로울 뿐 아니라, 효율도 떨어집니다. 이러한 비효율을 해결하기 위한 방법은 2가지가 있습니다.

첫번째는 style로 되어 있는 코드를 아래와 같이 CSS 코드로 추가한 후 <h3 class="h3style">1. 중제목(단락제목)</h3> 으로 사용하는 방법입니다. 하지만 이 방법도 일일히 h3태크에 class="h3style"를 추가해 줘야 합니다.

.h3style {
    border-bottom-color: rgb(142, 142, 142);
    border-bottom-style: solid;
    border-left-color: rgb(94, 77, 121);
    border-left-style: solid;
    border-width: 1px 10px;
    box-sizing: border-box;
    line-height: 1.3;
    margin: 5px 0px;
    padding: 5px;
    font-family: 'Noto Sans Demilight';
    color: #4c4c4c;
    font-size: 23px;
    letter-spacing: -1px;
}

두번째는 오늘 소개해 드릴 h3 태크의 스타일을 미리 설정해 놓고 h3를 사용하면 자동으로 스타일이 적용되도록 하는 방법입니다. 이 방법을 사용하면 사용자가 별도로 class 코드를 추가하지 않아도 되기 때문에 매우 편리합니다. 다만, 주의하셔야 할 점은 이 방법은 h3코드를 사용하는 모든 곳에 적용이 되기 때문에 h3 태그의 스타일을 각각 설정하기 원하신다면 첫번째 방법을 사용하시는 것이 좋습니다.

2. h3 태그 기본 스타일 적용 방법

h3 태그의 기본 스타일 설정을 위해서는 블로그스팟 테마에 해당 코드를 추가해 놓아야 합니다.

블로그스팟에 로그인 한 후 테마 → 맞춤설정을 클릭합니다.

고급을 클릭합니다.

고급에서 스크롤바를 아래로 내려 “CSS 추가”를 클릭합니다.

아래 코드를 복사하여 다음의 그림과 같이 붙여넣기 한 후에 오른쪽 아래에 있는 디스켓 모양을 클릭하여 저장하면 h3 태그의 스타일이 테마에 추가됩니다.

h3 {
    border-bottom-color: rgb(142, 142, 142);
    border-bottom-style: solid;
    border-left-color: rgb(94, 77, 121);
    border-left-style: solid;
    border-width: 1px 10px;
    box-sizing: border-box;
    line-height: 1.3;
    margin: 5px 0px;
    padding: 5px;
    font-family: 'Noto Sans Demilight';
    color: #4c4c4c;
    font-size: 23px;
    letter-spacing: -1px;
}