CSS로 꾸민 제목 태그 서식입니다. 리본 스타일로 블로그의 글을 더욱 돋보이게 할 수 있습니다.
가독성을 높이기 위해 CSS로 H태그를 꾸민 블로그를 많이 보셨을 것입니다. 기본적으로 제목의 글자 크기가 문단의 글자 크기보다 훨씬 커서 보기 쉽지만, H태그를 조금 꾸며주면 더욱 돋보이는 글을 쓸 수 있습니다. 이 글에서는 리본 스타일로 H태그를 꾸미는 방법을 공유합니다.
리본 스타일 H태그 예시와 사용방법
아래 ↓ 제목 예시처럼 이 글에서는 리본 스타일 H태그를 사용했습니다.
H태그에 배경색이 지정되어 있어 눈에 잘 띄기 때문에 폰트 사이즈를 본문의 폰트 사이즈보다 약간 크게 설정했습니다. 만약 폰트 크기를 원래의 크기로 하려면 아래 CSS 코드에서 font-size:1.1em;를 지우면 됩니다.
구글 블로거에 적용하기
아래 리본 스타일 H태그를 꾸밀 CSS 코드와 HTML 코드를 확인해주세요.
/* 리본 스타일 H태그 - https://ottzid.com */
.Ribbon {display: inline-block;height: 40px;position: relative;background: #fcf390;}
.Ribbon::after {content: '';position: absolute;left: 100%;top: 0;border: 20px solid;border-right-color: transparent !important;}
.Ribbon::before {left: 0;border-right: 1px dashed rgba(51, 51, 51, 0.15);content: '';position: absolute;top: 0;width: 20px;height: 100%;z-index: 1;}
.Ribbon2::after {border-color: #fcf390;}
.Ribbon h2 {font-size: 1.1em;margin:0;line-height: 40px; padding:0 0 0 35px !important;}CSS 코드를 복사하고 테마의 HTML 편집 모드에서 ]]></b:skin</li> 앞에 붙여넣고 저장합니다.
<div class="Ribbon Ribbon2"><h2>여기에 제목을 입력하세요.</h2></div>
글쓰기 편집기에서 HTML 모드로 전환하고 위 HTML코드와 같이 작성합니다.
티스토리에 적용하기
이 소스에는 ::before ::after 가상요소를 사용했기 때문에 HTML 블럭을 사용합니다.
<style>/*<![CDATA[*//* 리본 스타일 H태그 - https://ottzid.com */
.Ribbon {display: inline-block;height: 40px;position: relative;background: #fcf390;}
.Ribbon::after {content: '';position: absolute;left: 100%;top: 0;border: 20px solid;border-right-color: transparent !important;}
.Ribbon::before {left: 0;border-right: 1px dashed rgba(51, 51, 51, 0.15);content: '';position: absolute;top: 0;width: 20px;height: 100%;z-index: 1;}
.Ribbon2::after {border-color: #fcf390;}
.Ribbon h2 {font-size: 1.1em;margin:0;line-height: 40px; padding:0 0 0 35px !important;}/*]]>*/</style>블로그관리홈 - 서식 - 서식쓰기 - 에디터 기본모드에서 HTML 블록을 열고 위 <style> 태그를 복사하여 붙여넣습니다.
<div class="Ribbon Ribbon2"><h2>여기에 제목을 입력하세요.</h2></div>
다음, 에디터 HTML 모드에서 HTML 코드를 복사+붙여넣고 서식에 저장하고 글을 쓸 때 불러오기하여 사용합니다.
각 스킨이나 테마에는 CSS 기본 설정이 있으므로 자신의 스킨이나 테마에 맞게 조정해야 할 수도 있습니다.