태그를 이용한 본문 글 안에 소제목 꾸미기
2012.11.09 22:12
태그를 이용한 본문 글 안에 소제목 꾸미기
광고 차단 플러그인을 꺼 주시면 블로그 운영에 도움이 됩니다. ^^

예전에 이미지를 이용한 본문 글 안에 소제목 꾸미기(http://anikorea.tistory.com/197 ) 올려드렸습니다. 이번 글은 HTML태그를 이용해서 꾸미기를 해보겠습니다.

 

본문 글 안에 소제목 이란

 

블로그에 글을 읽다 보면 예쁘게 강조된 주제 글 제목이 있습니다.

그냥 폰트 키우고 찐하게 보이게 하는것 보다 이미지를 이용하든 html을 이용한 꾸미기를 하든 읽는 입장에서 눈에 확 들어오게 만든게 소제목 입니다.

 

글 중간 중간 소제목을 이용해 정리해 주면 읽는 입장에선 글 전체 가독성이 올라가고 눈이 조금은 편안함을 느낄수 있을듯 합니다.

 

어떠한 것들로 꾸밀수 있는지 보겠습니다. (이미지를 클릭해서 크게 보시면 선명합니다.)

 

위 이미지를 보시면 이해가 빠를듯 합니다. 폰트 사이즈,폰트 색상, 선 위치, 선 굵기, 선 색상,선 모양 까지 다양하게 지정이 가능합니다. 각 부분의 설명이 있으시니 직접 수정하실수 있을겁니다.

 

이 이미지는 선의 위치만 바꿔서 지정한 모습입니다. 선의 옵션을 이용해 여러가지 응용이 가능합니다.

 

응용해서 꾸며보자.

 

태그 박스선을 실선(solid)으로 왼쪽만 나오게 하고 선의 두께를 조금 두껍게 (10px), 선의 색상을 녹색(#84c55e)으로 조절하면 왼쪽과 같은 소제목이 완성됩니다.

 

메뉴전체를 우측으로 이동시키고 싶다면 왼쪽 외부여백값(margin 0 0 0 40px;)을 추가 하면되고 녹색 포인트와 소제목의 간격을 두려면 왼쪽 내부여백인(padding 0 0 0 40px;) 값을 추가하면 됩니다.

 

외부 여백 : margin : 0 0 0 40px ; ( 상 우 하 좌 )

내부 여백 : padding : 0 0 0 40px ; ( 상 우 하 좌 )

 

 

위 옵션은 선 색상 지정값 뒤로 (solid #000;  margin : 0 0 0 40px ; )넣어서 사용하시면 됩니다.

 

style.css에 태그넣고 사용해 보자

 

style.txt <- 제 블로그는 마우스 드래그가 안됩니다. 옆에 파일을 다운하셔서 열어보시면 아래 소스가 들어있습니다. 사용할 소스를 정리하셔서 관리화면 HTML/CSS 편집 -> style.css 하단에 넣어주세요.

.article h1 {font-size: 30pt; color:#000; border-bottom: 1px solid #000; }
.article h2 {font-size: 30pt; color:#000; border-bottom: 1px dotted #000; }
.article h3 {font-size: 30pt; color:#000; border-bottom: 1px dashed #000; }

.article h4 {font-size: 30pt; color:#000; border-top: 1px solid #000; }
.article h5 {font-size: 30pt; color:#000; border-right: 1px solid #000; }
.article h6 {font-size: 30pt; color:#000; border-bottom: 1px solid #000; }
.article h7 {font-size: 30pt; color:#000; border-left: 1px solid #000; }

<h1>실선</h1>
<h2>점선</h2>
<h3>파선</h3>
<h4>위쪽</h4>
<h5>오른쪽</h5>
<h6>하단</h6>
<h7>왼쪽</h7>

내부 여백 : padding : 0 0 0 40px ; ( 상 우 하 좌 )
외부 여백 : margin : 0 0 0 40px ; ( 상 우 하 좌 )

 

위 소스중 .article h1 ~ .article h7 까지만 넣어주시면 되는데 한 서너개로 정리하시고 폰트,선등 블로그에 맞게 정리하셔서 넣어주세요.

 

소스 적용이 잘 됬는지 확인해야 겠지요. <h>제목</h>를 이용해 작성해 보겠습니다.

 

 

글 인용,참고 사이트 ( 티비의 세상구경 )

, , , , , , ,

  1. 잘보고 갑니다. 정말 많은 도움이 되었습니다. 갑사합니다.^^

  2. 쉽게 풀어쓴다고 썻는데 지금 본문글을 읽어보니 어렵네요.^^
    도움이 되셨다니 기쁘네요.

    댓글 감사합니다.^^